50个有价值的CSS编写规则，让你写出更好的CSS
翻译 | 杨小二
我最近写了篇《掌握和成为更好的Web开发人员的15件事》（地址：https://beforesemicolon.medium.com/15-css-things-to-master-and-become-a-better-web-developer-a18f370a8bc5），然后意识到编写CSS不仅需要专注于某些功能。
通常，使CSS变得困难的原因是，开发人员没有一套可以遵循和使用的工具，以及最佳实践指南，以帮助他们享受编写CSS的乐趣。
多年来，我收集了一组规则和工具，这些规则和工具在CSS之旅中对我有很大帮助，我想与你分享其中我觉得比较实用及有有价值的50条规则。
1 、使用预处理器
CSS 预处理器能够帮助你少写CSS，它们可帮助你组织，避免重复和模块化CSS的工具和实用程序。
我个人更喜欢SASS，但我也同样喜欢LESS和Stylus。
我之所以喜欢他们，是因为他们没有采用“新方式”来设置页面样式。它仍然是CSS，具有额外的语法和功能。
2、分离全局与局部风格
区分用于任何一个或一组 HTML 选择器的样式与用于特定事物的样式至关重要。我将所有全局样式保存在一个单独的文件中（尤其是在使用预处理器时），但你也可以将其放在 CSS 文件的顶部，然后专注于为站点的特定组件、元素或部分设置特定样式。
3、模块化你的代码风格
你不需要将所有 CSS 捆绑在一个文件中，除非它会被使用。如果用户登陆主页，则只需要包含该页面的样式即可，不需要其他内容。我将样式表分为基本样式和非基本样式。
基本样式是在页面加载后用户会看到的样式，非基本样式是那些保持隐藏状态的组件，如对话框和通知。需要显示用户操作的元素或组件。
4、正确延迟加载样式表
有很多方法可以延迟加载你的CSS文件，使用WebPack等捆绑程序并进行动态导入时通常更容易。你可以创建自己的Javascript CSS加载器，也可以通过在页面中包含样式表时使用<link>标记来延迟非关键CSS。
5、具体但不太具体
具体要好，因为它定义了哪种样式适用于什么风格，但是一旦过于具体，它就会变得降低性能，并同时增加捆绑包的大小。有时甚至表明CSS或设计系统不正确。特定选择器的示例：
- section#sample-section —（问为什么需要指定“ section”和ID）
- main div p.title —（询问为什么需要指定.title以外的任何内容）
- [disabled] -不够具体且昂贵
- #sample-最具体，最有效的选择器
- * -全球和超级昂贵（最慢）
作为过于具体的，有时是需要，但把它看作一个例外，而不是普遍的做法。不够具体会导致样式冲突，过于具体会给浏览器带来困难。
6、像浏览器一样阅读CSS
查看以下选择器：
nav ul li a你最有可能从左到右阅读它，但是浏览器从右到左阅读它，这意味着，它会找到页面上的所有<a>标记，然后，对其进行过滤以仅包含<li>内部的那些，然后再次过滤以仅包含那些在<ul>内，最后只有在<nav>内的那些。
因此，它无法尽快匹配。如果没有<a>标记，则无需从<nav>开始匹配，只需找出没有<a>标记即可。
可以说，性能最高的CSS将为页面上的每个HTML元素提供一个ID，并使用它们进行样式设置，而使用CSS选择器则非常昂贵，深度嵌套时更糟。
也许你需要每一个性能，也许你不在乎，并认为浏览器足够快来处理此问题。理想情况下，你应该考虑HTML样式化页面。
7、考虑HTML样式以提高性能
在设计样式时，请始终考虑您构建 HTML 的方式，尤其是在您阅读了前两条规则/指南（6 和 5）之后。
如果你知道页面上唯一的链接是导航链接，也许使用选择器 a 是可以的，但如果你知道会有更多，使用一个类来区分它，比如 .nav-link。
当嵌套和定位常见的 HTML 标签（如 <div>、<p> 和 <a> 标签）时，样式选择器的会更糟。寻找允许您有效渲染 CSS 但不要采取任何极端措施的策略。
例如，出于样式目的向所有内容添加 id 或 class，除非您使用类实用程序优先库或确实需要额外的性能。为了获得更好的主意，请尝试了解 CSS 的工作原理。
#main-navigation /* ID (Fastest) */
body #page-wrap /* ID */
.main-navigation /* Class */
li a.nav-link /* Class *
div /* Tag (Slow)*/
nav ul li a /* Tag (Slower)*/
* /* Universal (Slowest) */
[disabled] /* Universal */8、避免使用内联样式
唯一可以覆盖内联样式的是使用 !important 标签，正如你将在下一个块中阅读的那样，!important 标签可能很糟糕，但内联样式需要它。
避免它们的另一个原因是，你出于某种原因添加了外部样式表，并且该原因是将样式与结构（HTML）分开。对此也有例外，但是，如果你的外部样式表中有样式、HTML 中的样式、Javascript 中的样式，则很难跟踪正在执行的更改，并且随着代码库的增长，它变得难以维护。
一些库和框架（如 Svelte 和 Vue）允许 HTML（JSX）、CSS 和 Javascript 在同一个文件中共存，但归根结底，这真的归结为偏好。
9 、避免使用！important
如果你正在使用 Bootstrap 并且真的想覆盖一个样式，你将需要使用 !important 标志，但同样，你为什么首先使用 Bootstrap？
如果你发现自己需要使用 !important 标志，这通常表明你遇到了问题。你可能正在使用难以覆盖的第三方库；你正在使用内联样式；你对选择器过于具体；你有 CSS 层次结构或顺序问题，或者应该尝试了解 CSS 特异性是如何计算的。
10、一致地编写CSS
一致性是关键。即使你做错了所有事情，也要保持一致，因为以后更容易修复它们。找到适合你的命名约定，采用 CSS 方法，以相同的方式组织样式，定义嵌套选择器的级别等。定义你的样式并坚持并随着时间的推移改进它。
11 、使用设计系统
设计系统允许您为将来构建，因为它允许您定义一般的设计规则和规范，遵循组织，模块化，定义最佳实践等。之所以采用面向未来的策略，是因为它更容易实现在全球范围内引入变更，修复和配置事物。
设计系统允许你为未来构建，因为它允许你定义一般设计规则和规范、遵循组织、模块化、定义最佳实践等。它是面向未来的策略的，原因是它更容易在全球范围内引入更改、修复和配置事物。
12、使用速记
有时你想指定 padding-top 或 border-right ，但根据经验，我经常回到这些来添加更多，所以，我习惯于总是使用速记，以便在不指定很多属性的情况下更容易更改，代码更少。
13 、结合通用样式
通过将具有相同样式规则的选择器分组来避免重复样式。你可以用逗号来分隔具有相同样式主体的选择器。
14、 将常见技巧转换为实用程序类
如果你发现自己一遍又一遍地应用技巧或相同的样式，请将它们转换为 class-utils 以直接在 HTML 标记上使用。
对我来说，这些是像带有显示 flex 或网格的 center 这样的东西，所以我创建了一个类 .center-flex 和 .center-grid。创建类实用程序来自动化这些重复的样式组合。
15、更多使用相对单位
你真的应该尝试更多地使用相对单位。像 em、rem、%、vw、vh、fr 等。使用 px 和 pt 设置固定值应该是静态设计的东西，尽管有些情况下需要这些值单位。浏览器很灵活，你的网站和单位也应该如此。
16、注意昂贵的属性
现在浏览器速度非常快，但有时，在复杂的网站上，我会看到一些与设置框阴影、边框半径、位置、过滤器，甚至宽度和高度相关的绘画问题，尤其是对于复杂的动画或重复更改。这些要求浏览器进行复杂的重新计算，并将视图重新绘制到每个嵌套的子级。
17 、最小化布局修改样式
布局修饰符是width，height，left，top，margin，order等属性。这些属性的动画和执行更改的成本更高，因为它们需要浏览器重新计算布局和接收更改的元素的所有后代。当你同时对许多这些属性进行更改时，它开始变得更加明显，因此请注意这一点。
18 、使用“will-change”作为最后的手段
“will-change”被用作性能提升来告诉浏览器一个属性将如何改变。浏览器会在使用之前进行复杂的计算，虽然这听起来是件好事，但通常情况下，你并不需要它。除非你发现与事物变化相关的性能问题，例如在转换或动画事物时，否则使用是最后的手段。
19、对CSS写注释
注释是个好东西，采纳吧！如果你编写了复杂的 hacks 或发现某些事情有效但不知道为什么，请添加注释。为复杂的事情添加注释，组织你的 CSS，帮助其他人理解你的想法和策略，并在你以后回来时，帮助你从你的混乱中弄明白它。
20、规范化或重置你的 CSS
每个浏览器都带有CSS元素的默认样式，并且这些样式各不相同，因此，你的东西可能在一个浏览器中看起来是一种方式，而在另一种浏览器中则不同，它可能具有你意想不到的额外边框或形状。通过重置或规范化你的 CSS，你可以简化这些事情，并让你的样式有更好的机会在任何浏览器中看起来相同。
21 、考虑更好的字体加载策略
你可以继续使用 @font-face 来定义你的字体，但使用 <link/> 标签来加载你的字体，这样你就可以推迟它们，尤其是当你有 1 个以上的字体文件时。你还应该研究 SVG 字体并了解它们，因为它们允许更准确的字体渲染。在样式表的顶部添加 @font-face 规则。
22 、 避免过多的字体文件
也许设计师给了你太多的字体文件，这是一个危险信号。字体过多的网站可能会变得混乱，因此，请始终确保包含页面所需的字体。字体加载和应用可能需要一些时间，当你有太多字体时，你的 UI 通常会在字体加载后跳转不到位。
23 、 最小化 CSS
在将 CSS 加载到浏览器之前，将其最小化。你可以使用后处理器或使其成为站点部署的简单构建过程步骤。较小的 CSS 文件加载速度会更快，并且会更快地开始处理。
24 、使用 CSS 变量
我使用预处理器的第一个原因是变量和 CSS 变量更好，因为它们在浏览器中加载时会保留下来。支持很好，它允许你创建更灵活和可重用的 UI，更不用说它可以帮助你创建更强大的设计系统和功能。
25 、不要删除大纲属性，设置样式！
不要将大纲属性设置为“无”，而是设置样式！如果你不喜欢它的外观，请对其进行样式设置以匹配你网站的外观。对于使用键盘或其他屏幕阅读浏览你的网站的人来说，大纲对于让他们跟踪自己的位置至关重要。
26 、不要不必要地引入 CSS 库/框架
现在大多数人做的第一件事就是添加一个 CSS 库或框架，从长远来看，有时这可能是一个代价高昂的决定。通常这些人会遇到一些他们不知道该怎么做的事情，因此，会带来整个图书馆来提供帮助。
添加 CSS 库应该慎重考虑。除非，你打算使用其大部分功能，否则不要添加，你和团队对这个决定需要感到满意，这确实有助于大大减少交付时间和调试时间。如果你带来了一个新的库，请花时间学习并充分利用它。如果你经常发现自己覆盖或破解第三方库，则不需要它！
27 、使用双引号
每当你包含任何字符串值（如背景或字体 URL 或内容）时，请首选双引号并保持一致。很多人省略了有时可以工作但可能会导致 CSS 解析工具出现问题的引号。此外，查看 CSS 属性引号以自动化其中的一些。
28 、避免难以维护的黑客攻击
每当你将 hack 引入你的样式时，最好将其放在一个单独的文件中，以便于维护，例如 hacks.css。随着代码库的增长，很难找到它们并解决它们，总的来说，如果可能的话，尽量避免黑客攻击。
29 、使用 CSS 格式化文本
CSS 可以格式化你的 HTML 文本。无需在 HTML 中手动编写所有大写、所有小写或大写的单词。更改 CSS 属性值比更改 HTML 中的所有文本要快得多，而且国际化也更好，因为它允许你根据需要编写文本并使用 CSS 操纵它的外观。
30 、 验证 CSS
W3C组织提供了一个免费的 CSS 验证器，你可以使用它来确保你的 CSS 遵循正确的 CSS 样式规则和指南的一般指南。
31 、 风格反应灵敏或至少流畅
你正在创建要在浏览器中使用的内容，这意味着人们将使用各种设备类型和尺寸访问它。通过考虑流畅或响应式设计，真正考虑改善这些人的体验。如果你的项目不包括响应计划，请尝试至少保持流畅。
32 、 让内容定义大小
例如，不要设置按钮的宽度和高度，而是考虑为间距设置一些填充并包括 max-width 和 max-height ，除非设计要求严格的大小。
33 、 遵循 CSS 方法论
CSS 方法将确保你的样式的一致性和未来证明。有几个选项可以尝试，或者你甚至可以采用多个选项。
- BEM（块元素修饰符）——这是一种强大的方法，旨在使用类命名约定将块（组件）与元素（组件部分）和修饰符（组件和元素状态）分开。
- ITCSS（倒三角形 CSS）——一种非常强大的方法，可以根据 3 条原则按特定级别组织事物：通用到显式，从低到高的特殊性，以及影响深远的本地化样式规则。
- OOCSS（面向对象的 CSS）——一种非常好的方法，旨在按照 CSS 中常见的面向对象范例分离和抽象独立的片段以实现可重用性。
34 、 避免不断覆盖/撤消样式
一个巨大的危险信号是你编写 CSS 样式，然后在其他地方编写具有不同值的相同 CSS，几乎覆盖了所有内容。如果你经常这样做，那么，你处理项目样式的方式显然有问题。
你几乎永远不应该陷入需要覆盖自己的样式的情况。它表明，你有样式变化，并且你可能没有事先规划你的UI。
35 、最后添加动画声明
你可以做的另一件事是将你的动画 @keyframes 放在一个单独的文件中，并将其包含在样式表的末尾或简单地最后导入。这将确保在浏览器尝试在加载时，执行任何动画之前读取你的整个样式。
36 、不要将第三方 CSS 覆盖与你的混合
每当你编写样式来覆盖第三方库时，请考虑将其放在单独的文件中，以便于跟踪和维护。如果你决定稍后删除该库，则删除会更容易，并且将它们放入自己的文件中已经是自我文档化了。
37 、指定需要转换的属性
当你指定转换时，请始终包括你打算转换的所有属性名称。使用“all”或不使用属性名称将迫使浏览器尝试转换所有内容并影响转换性能。
38 、避免在任何地方使用 id 属性
也许你是一个疯狂的人，他们迫切希望从你的 CSS 中获得每一点性能，否则，在任何地方使用 id 都可能很糟糕。id 属性样式很难覆盖，并且每个页面都是唯一的，因此请遵循以下 id 用法指南：
- 将它用于页面上真正独特的东西，例如logo标识和容器；
- 不要在要重复使用的组件上或内部使用它；
- 在你要链接到的网站的标题和部分上使用它；
- 如有必要，使用 id 生成器来确保唯一性；
39 、注意样式顺序
CSS 代表级联样式表，这意味着最后出现的任何样式都有可能覆盖以前的样式，因此，请按照确保应用所需样式的顺序对样式进行排序。这完全是为了了解你对 CSS 特异性的理解。
40、 整理你的风格
Linting 的工作原理是确保你遵循为样式定义的规则，并确保你的样式一致、结构良好，并遵循 CSS 最佳实践。了解 Stylelint 以及如何在你喜欢的 IDE 中设置样式 linting 以及如何设置你的配置文件。
41 、按字母顺序排列 CSS 属性
它使查找内容变得更加容易，你甚至可以使用 Stylelint 来强制执行此规则。
42 、框大小 border-box 一切
CSS 属性 box-sizing 默认值应该是 border-box ，并且它被列为许多 CSS API 错误之一。在顶层简单地声明 *, *::after, *::before{box-sizing: border-box;}。
43 、避免颜色名称
更喜欢用十六进制和颜色函数指定颜色值，而不是说红色、紫色、青色。有数百万个十六进制颜色值，而不是所有这些值的名称。为了保持一致性，找到一种添加颜色的方法并坚持下去。
44 、 让父级处理间距、位置和大小
当为要在内容流中使用的组件设置样式时，让内容和内部间距定义大小，不包括位置和边距等内容。让使用此组件的容器来决定位置以及此组件与其他组件的距离。
45 、尝试组织 CSS 以匹配标记顺序
它确实可以让你更轻松地通过查看 CSS 来理解你的标记。这是我做的事情，为我节省了很多时间。
46 、保持 HTML 语义并使用 CSS 进行样式设置
经常会发现开发人员会四处更改 HTML 以应用某种样式。通常，将样式设置为 CSS，并让你的 HTML 以语义上有意义的方式构建。此规则有例外，但始终确保采用的结构不违反任何 HTML 语义规则。
首先，编写 HTML 时要考虑内容，而不是样式。比添加 CSS 并在出于样式原因更改 HTML 之前尽力而为。
47 、连字符还是下划线？
类名和 id 名称最常见的分隔符是连字符，但无论你选择什么，都要坚持使用。
48 、 在你寻求 Javascript 帮助之前先找到 CSS 解决方案
我一直在分享如何在我的 Youtube UI/UX 库中尽可能多地使用 CSS 构建通用组件，我想让你明白的是，在你尝试添加 Javascript 之前，你应该尝试找到一个 CSS 解决方案（不要太老套），甚至，当你添加 Javascript 时，请考虑让 CSS 完成大部分样式并使用 Javascript 来处理触发器和副作用之类的事情。
49 、 删除未使用的 CSS
出于同样的原因，你应该发布你将使用的唯一 CSS，考虑使用 PurgeCSS 之类的工具来删除渲染中不需要的 CSS。
这些工具将查看你的 CSS 和 HTML，以确定你需要哪些样式。
如果你不确定你是否需要这个，考虑使用浏览器工具来查找你的代码覆盖率，它会告诉你是否正在发布未使用的样式。
50 、 使用后处理器
真正考虑将 PostCSS 添加到你的项目中，以便你可以利用各种插件来优化你的 CSS，例如 Autoprefixer（添加 webkit-、moz-、ms- 等）、CSSNano（最小化你的 CSS）、postcss-preset-css（允许你编写未来的 CSS），以及许多其他可以帮助你定义标准和规则、介绍工具、类实用程序、与 javascript 通信并标准化。
结论
没有人会在一夜之间就会编写更好的 CSS，这需要练习和调整。这些在我的 CSS 之旅中帮助了我很多，我相信它们也会帮助你。
每一次体验都是独一无二的，你应该保持开放的心态，尝试各种事情，直到它们适合你为止。
不要害怕采用工具来帮助你，但也不要因为每个人都这样做而急于跳入某事。在理解、编写和组织 CSS 方面有艺术水平。无论你最终采用什么规则，都要保持一致。
感谢你的阅读。祝你好运！