英文 | https://beforesemicolon.medium.com/50-css-best-practices-guidelines-to-write-better-css-c60807e9eee2

翻译 | 杨小二

1 、使用预处理器

2、分离全局与局部风格

3、模块化你的代码风格

4、正确延迟加载样式表

5、具体但不太具体

• section#sample-section —（问为什么需要指定“ section”和ID）
• main div p.title —（询问为什么需要指定.title以外的任何内容）
• [disabled] -不够具体且昂贵
• #sample-最具体，最有效的选择器
• * -全球和超级昂贵（最慢）

6、像浏览器一样阅读CSS

nav ul li a

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

11 、使用设计系统

12、使用速记

13 、结合通用样式

14、 将常见技巧转换为实用程序类

15、更多使用相对单位

16、注意昂贵的属性

17 、最小化布局修改样式

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 方面有艺术水平。无论你最终采用什么规则，都要保持一致。

感谢你的阅读。祝你好运！

学习更多技能

请点击下方公众号