您是否曾担心自己使用 CSS 的方式完全错误?是否错过了某种使一切变得更容易、更好的新方法?是否希望自己对 CSS 的状态更有信心?
我相信我们都能理解安娜在这里的情感
我的 CSS 充满了自我怀疑。如今,哪种类名系统是最佳实践?级联本周是好是坏?
— Anna Debenham (@anna_debenham) 2014年11月13日
如果您经常使用 CSS 却从未有过这种感觉,我会担心您。要么您聪明得可怕,要么,您懂的。
以下是我最近尝试使用 CSS 的方法:**尽力而为,做好就行。** 我不遵循任何特定的方法或严格的规则。更像是试图控制局面的松散准则集,由我积极尝试做好工作的理念支撑。
免责声明:这只是我个人的做法。我主要从事大部分 CSS 代码都由我本人编写的项目。根据最近在这里进行的调查,这适用于 55% 的人。我推测,您与的人越多,您从比我遵循的更严格的规则中获得的好处就越大。
以下是“尽力而为,做好就行”的一些详细说明
**不要偷懒。**您知道您何时在偷懒。我的意思是,您对某个问题进行快速修复,而不是尝试理解问题。或者将一些 CSS 放入当前看来最方便的文件中,而不是考虑它最适合放置的位置。或者在明显需要创建新模式时避免这样做。或者继续使用正在给您带来麻烦的模式。睡一觉。不要着急。把它做好。
**按照您自己的方式做事。** 您知道吗?我喜欢在模块中少量使用子选择器。.module > h2
在很多时候都非常适合我。某些严格的方法会不同意。我不太在乎。我将继续这样做,直到它真正造成一些负面后果,而目前还没有。如果发生了,我会改变,因为请参见上文。
**按照您自己的方式命名事物。** 如果我让某种方法告诉我如何命名事物,我知道我自己,我的内心会开始发动政变。我可能会遵循一两天,直到我放弃该方法并重新完全控制。在完全基于我的 WWINTT(我将如何命名这个东西?)策略构建的项目中,我感到最舒适和高效。
**使用对您明显有用的工具。** 我甚至不会命名任何工具,因为这不是重点。如果我能识别出对我来说有明显好处的工具,我就会使用它。它可以节省时间、产生更好的输出、允许更好的组织、解决性能问题、自动化最佳实践,等等。我愿意。
我真正相信的唯一“规则”式的事情:**在整个项目中保持选择器的特异性相当低且扁平化。** Harry 的 特异性图表 是思考此问题的一种好方法。特异性将呈上升趋势,因此永远不要从高处开始,因为上限很容易变得有问题。主要:.class {}
。
**有目的地重新访问您网站的各个部分。** 可能不仅仅因为您想清理那里的 CSS,而是因为您想以某种方式让您网站的该部分对所有人来说更好。我发现每次重新访问某个区域时,都是清理所有触及它的代码的机会。这有助于我与旧代码建立联系,并减少对它的恐惧。
我认为很容易对各种 Web 技术产生这种感觉,而不仅仅是 CSS。在涉及 HTML、PHP、jQuery 等方面,我也会不断地与自己进行这样的争论。在某种程度上,这是一种健康的思考方式,因为它意味着您承认自己并不完美,并且可以始终学习做得更好。您还可以欣慰地知道,几乎肯定有人比您做得更糟糕!
另一方面,它可能会让您抓狂,通常是因为您试图完善一项本身就不完美的技术。
我认为另一件重要的事情是您要保持一致性。如果您以某种特定方式做事,请尝试在整个过程中坚持该约定,不要随意更改。
这是我读过的最理智的文章。
Chris,很棒的文章。正是这种务实、明智、适用的建议让我每天都回到您的网站。这篇文章对我特别有帮助,因为我经常会迷失在“我应该”如何做某事,而忘记问问自己我这样做是否真的有意义。
我现在需要这篇文章,而且不仅仅是为了 CSS。我正在尝试将一个网站打包以进行生产,并且对于我做出的每一个选择,我都会发现自己上网查找我是否以“推荐的方式”做到了,其他人是如何做的,人们如何命名,无情地怀疑自己,并且让自己发疯地一遍又一遍地更改已经没问题的东西。这是一个可怕的循环。我正在尝试更多地依靠自己的直觉。
各方面都很棒的观点。虽然我想说对于“按照您自己的方式命名事物”,我认为这种方法只在最理想的情况下才会有效,并且主要由一个人负责创建新的模块和元素。
一旦我需要与多人协调命名创建,我就立即清楚地意识到需要实施某种系统,无论是 BEM 还是其他任何系统。我可能是唯一接触我的 CSS 的人,但我不是设计师——他最终负责每个部分的功能以及通常的命名。
在一个经历多个设计修订阶段的大型项目中,这成为了一个如此严重的问题,以至于我认为我不会再着手一个新的项目,而不对其首先建立一些松散的准则。
这尤其有趣,因为人们可能会认为,作为一个 CSS 专家,您会成为约定的拥护者。我希望这能帮助人们放松对这些新方法的看法,并开阔他们的思维。
好吧,他主要独自处理 CSS 部分,所以他可以负担得起这一点。我们大多数人在团队中工作,严格的规则是必须的。我们负担不起如此轻松。
我同意你的观点。但是我认为重点不是避免约定,而是保持开放的心态。您不应该禁止自己使用子选择器,仅仅因为您读到它是坏习惯或不符合 BEM 风格。
很棒的帖子。我自己也开始相信这一点..在每个项目完成后,我都会回顾代码,并为没有实现这项新技术或遵循那条新“规则”而责备自己。
我认为,如果我们都能紧跟潮流,并尽最大努力保持代码简洁和模块化,那么您就已经赢得了这场艰苦的战斗。
嘿,Chris,在“按照您自己的方式做事”部分,您在这里有一个错别字“I’m don’t really care”。很棒的文章,我赞同编写 CSS 时同样的感受
谢谢!刚刚修复了那个错别字。很高兴你喜欢 Chris 的文章=)
对于自由职业开发者来说,这算是一种好的做法吗?对于封闭项目来说呢?当您不希望其他人简单地复制粘贴您的辛苦工作时?
不要误解我的意思,我并不反对安娜的观点,只是无法决定什么更重要……当我回到我的代码时,记住某个类是什么并不那么快,最终我找到了它——但开始认为这浪费了我很多时间。您认为我的观点有什么优缺点吗?我知道有很多开发者与我持有类似的想法。
很棒的文章,感谢您撰写它。我非常有罪地在一个人的环境中争论方法论几个小时。
谢谢,Chris。像这样的文章就像一股清新的空气。有时我们需要被告知要放松一下。我经常忘记没有“代码警察”会因为我搞砸了或者我做的事情与其他人不同而逮捕我。
感谢这篇精彩的文章,让我重回正轨 :)
好文章。当您独自工作时,它完全说得通……
感谢您发布这篇文章。似乎每天都有如此多的新技术出现,很难知道什么是“最好的”……这是一个很棒的建议。
感谢Chris撰写这篇文章。
跟我一样。我的规则都围绕可维护性。没有什么比用一些我忘记了的流行风格编写的旧代码更让我烦恼的了。保持简单。
对我来说,学习Sass帮助我很大程度上缓解了推文中提到的许多问题。一旦你对CSS感到舒适,接下来自然而然的事情就是将预处理器包含到工作流程中。到目前为止,这对我很有效。
好吧,Chris,从某种意义上说你是对的。但如果我们必须做好工作,为什么要写CSS呢?;)希望你理解我的意思。
一篇好文章,使用某种方法有助于构建更大、更可扩展的系统,但有时它会妨碍解决问题。在构建更复杂的东西时,我总是使用稍微松散的BEM,并使用Sass来处理CSS。在创建简单的404页面或简单的单页时,我使用常规嵌套、元素选择器等,无需为简单的事情构建结构,因为它们可以在生命周期的任何时间轻松重写。在团队合作时,应该有一些规则和良好的实践。
然后,为了所有神圣的事物,不要阅读自适应网页设计——我刚读到第二章,还没有离开HTML。学习了以前从未理解过的许多标记元素。这就像一大剂浓缩的“你做错了”。我认为这是健康的,我不会将这本书中的所有内容都融入进来,但认识到过去我错过了多少东西,这让我感到谦卑。
第三章是CSS,我有点紧张……
没有什么比回到你2或3年前做的网站,然后说“我当时到底在想什么?”更糟糕的了。
我只是遵循“它是否有效?”并一直坚持这样。
子选择器在有意义的时候才有意义(这回到了普遍的“视情况而定”规则)。你是否希望选择类名为“module”的元素中的H2,因为它们位于类名为“module”的元素中?然后使用
.module > h2
。这种策略实际上是有意义的。CSS的规则是有意义的,但这并不意味着它们都需要一直使用,但这并不意味着某些规则不应该使用,仅仅因为某些人没有发现它们的好处。CSS是我不擅长的一件事。我目前正在学习过程中,我一定会考虑你的建议。很高兴在开始项目之前就发现了它。感谢分享。