英文：https://beforesemicolon.medium.com/50-css-best-practices-guidelines-to-write-better-css-c60807e9eee2
翻译：杨小二
最近，我写了一篇关于《掌握和成为更好的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加载器，也可以通过在页面中包含样式表时使用标记来延迟非关键CSS。
5、具体但不太具体
***遵循这些CSS**实践指南将有助于提高你的编码效率，确保你的网站在各种设备和浏览器上的兼容性和美观性。希望这些建议对你有所帮助！
好的，以下是重构后的内容：
在编写CSS时，需要考虑性能和可维护性。以下是一些规则/指南：
1. 避免使用过于具体的选择器，因为它们会降低性能并增加捆绑包的大小。
2. 尽可能使用通用的选择器，例如 *,以确保样式适用于所有内容。
3. 像浏览器一样阅读CSS。查看选择器并理解它们的优先级顺序。
4. 如果可能的话，使用HTML样式化页面。这将使浏览器更容易处理样式匹配。
5. 考虑使用类而不是ID来区分元素。这将使代码更易于维护。
6. 当嵌套和定位常见的HTML标签时，样式选择器可能会更糟。寻找允许您有效渲染CSS但不要采取任何极端措施的策略。
7. 了解CSS的工作原理。这将有助于您更好地理解如何编写高性能和可维护的CSS代码。
以下是根据您提供的内容重构后的段落结构：
# 样式指南
## 9. 避免使用！important
如果你正在使用 Bootstrap 并且真的想覆盖一个样式，你将需要使用 !important 标志，但同样，你为什么首先使用 Bootstrap?
如果你发现自己需要使用 !important 标志，这通常表明你遇到了问题。你可能正在使用难以覆盖的第三方库；你正在使用内联样式；你对选择器过于具体；你有 CSS 层次结构或顺序问题，或者应该尝试了解 CSS 特异性是如何计算的。
## 10. 一致地编写CSS
一致性是关键。即使你做错了所有事情，也要保持一致，因为以后更容易修复它们。找到适合你的命名约定，采用 CSS 方法，以相同的方式组织样式，定义嵌套选择器的级别等。定义你的样式并坚持并随着时间的推移改进它。
## 11. 使用设计系统
要确保您的网站在不同设备和屏幕尺寸上看起来都很棒，最好使用设计系统来确保所有内容都具有一致的外观和感觉。这将确保您的网站在各种情况下都能正常工作，并且可以轻松地进行更新和维护。
设计系统是一种允许您为将来构建的方法，因为它允许您定义一般的设计规则和规范、遵循组织、模块化、定义**实践等。这种方法被称为“面向未来的策略”，因为它更容易在全球范围内引入变更、修复和配置事物。
以下是一些关于使用设计系统的技巧：
- 使用速记来指定属性，如 padding-top 或 border-right。
- 结合通用样式，避免重复样式。
- 将常见技巧转换为实用程序类。
- 更多使用相对单位，如 em、rem、%、vw、vh、fr 等。
- 注意昂贵的属性，如框阴影、边框半径、位置、过滤器、宽度和高度等。
- 最小化布局修改样式，如 width、height、left、top、margin 和 order 等属性。
- 使用“will-change”作为最后的手段。
以下是重构后的内容：
1. 使用"will-change"属性以提升性能。虽然这在大多数情况下可能并不需要，但如果你遇到与元素属性变化相关的性能问题(如过渡或动画),那么使用它是最后的手段。
2. 为CSS编写注释。注释是个好东西，尤其是当你编写复杂的hacks或者发现某些事情有效但不知道为什么时。为复杂的事情添加注释，可以帮助你组织你的CSS,让其他人理解你的想法和策略，同时也在你以后回来时帮助你搞清楚它。
3. 规范化或重置你的CSS。由于每个浏览器都有可能带有不同的默认样式，你的样式可能在一个浏览器中看起来完全正确，而在另一个浏览器中却完全不同，甚至会有你未曾预料到的额外边框或形状。通过重置或规范化你的CSS,你可以简化这类问题，并让你的样式有更大的机会在任何浏览器中看起来一样。
4. 考虑更好的字体加载策略。使用`@font-face`定义字体是常见的做法，但是你也可以使用``标签来加载你的字体，这样你就可以推迟加载他们。特别是当你有多个字体文件时，这一点尤其重要。***你还应研究SVG字体，因为它们允许更精确的字体渲染。将`@font-face`规则放在样式表的顶部是一个好习惯。
5. 避免使用过多的字体文件。如果设计师给你提供了大量的字体文件，那么这是一个危险的信号。拥有过多字体的网站可能会显得混乱，所以一定要确保只包含页面实际需要的字体。字体的加载和应用可能需要一些时间，当你有太多字体时，UI可能在所有字体都加载完毕之前就无法正常显示。
6. 尽量减少CSS的大小。在将CSS加载到浏览器之前，尽可能地将其最小化。你可以使用后处理器或者将其作为站点部署过程中的一个简单构建步骤来实现这一点。较小的CSS文件加载速度会更快，也更有可能开始处理任务。
7. 使用CSS变量。我使用预处理器的第一个原因是变量和CSS变量更好，因为它们在浏览器中加载时能够保留下来。这种支持很好，它可以让你创建更灵活、可重用的UI,而且还能帮助你创建更强大的设计系统和功能。
8. 不要删除大纲属性，而是设置样式！不要将大纲属性设置为“无”，而是设置样式！如果你不喜欢它的外观，可以通过设置样式来使其匹配你的网站风格。对于那些使用键盘或其他屏幕阅读器浏览你的网站的用户来说，大纲对于让他们跟踪自己的位置至关重要。
以下是重构后的内容：
不要不必要地引入 CSS 库/框架。现在大多数人做的第一件事就是添加一个 CSS 库或框架，从长远来看，有时这可能是一个代价高昂的决定。通常这些人会遇到一些他们不知道该怎么做的事情，因此，会带来整个图书馆来提供帮助。
添加 CSS 库应该慎重考虑。除非你打算使用其大部分功能，否则不要添加。你和团队对这个决定需要感到满意，这确实有助于大大减少交付时间和调试时间。如果你带来了一个新的库，请花时间学习并充分利用它。如果你经常发现自己覆盖或破解第三方库，则不需要它！
每当你包含任何字符串值(如背景或字体 URL 或内容)时，请首选双引号并保持一致。很多人省略了有时可以工作但可能会导致 CSS 解析工具出现问题的引号。***查看 CSS 属性引号以自动化其中的一些。
每当你将 hack 引入你的样式时，最好将其放在一个单独的文件中，以便于维护，例如 hacks.css。随着代码库的增长，很难找到它们并解决它们。*****如果可能的话，尽量避免黑客攻击。
CSS 可以格式化你的 HTML 文本。无需在 HTML 中手动编写所有大写、所有小写或大写的单词。更改 CSS 属性值比更改 HTML 中的所有文本要快得多，而且国际化也更好，因为它允许你根据需要编写文本并使用 CSS 操纵它的外观。
W3C组织提供了一个免费的 CSS 验证器，你可以使用它来确保你的 CSS 遵循正确的 CSS 样式规则和指南的一般指南。
你正在创建要在浏览器中使用的内容，这意味着人们将使用各种设备类型和尺寸访问它。通过考虑流畅或响应式设计，真正考虑改善这些人的体验。如果你的项目不包括响应计划，请尝试至少保持流畅。
例如，不要设置按钮的宽度和高度，而是考虑为间距设置一些填充并包括 max-width 和 max-height ,除非设计要求严格的大小。
CSS 方法将确保你的样式的一致性和未来证明。有几个选项可以尝试，或者你甚至可以采用多个选项。BEM(块元素修饰符)——这是一种强大的方法，旨在使用类命名约定将块(组件)与元素(组件部分)和修饰符(组件和元素状态)分开。
ITCSS(倒三角形 CSS)和 OOCSS(面向对象的 CSS)是两种非常强大的 CSS 实践方法。
ITCSS 遵循三个原则来组织样式：通用到显式，从低到高的特殊性，以及影响深远的本地化样式规则。这种方法有助于提高代码的可读性和重用性。
OOCSS 通过将 CSS 中的片段分离并抽象为独立的对象，实现代码的可重用性。这种方法使得开发者能够更好地组织和管理他们的样式代码。
避免不断覆盖或撤消样式是一个重要的开发原则。如果在编写 CSS 样式后，又在其他地方编写具有不同值的相同 CSS,那么这可能表明你的样式管理存在问题。你应该尽量避免需要覆盖自己的样式的情况，因为这可能意味着你没有预先规划你的 UI。
在添加动画声明时，应考虑将 `@keyframes` 放在一个单独的文件中，并将其包含在样式表的末尾或简单地最后导入。这样可以确保在浏览器尝试执行动画之前，已经完全读取了整个样式表。
当编写 CSS 以覆盖第三方库的样式时，建议将其放在单独的文件中。这样可以方便进行跟踪和维护，***如果你决定以后删除这个库，删除也会更加容易。
指定转换的属性时，一定要包括打算转换的所有属性名称。使用 "all" 或不使用属性名称会迫使浏览器尝试转换所有内容，并可能影响转换性能。
在任何地方都不应使用 id 属性。id 属性的样式很难覆盖，并且每个页面都是唯一的。因此，应遵循以下 id 用法指南：
- 将它用于页面上真正独特的元素；
- 不要在要重复使用的组件上或内部使用它；
- 在你要链接到的网站的标题和部分上使用它；
- 如有必要，使用 id 生成器来确保唯一性；
注意 CSS 中的样式顺序也非常重要。因为 CSS 是级联样式表，所以最后出现的任何样式都有可能覆盖以前的样式。为了确保应用所需样式的顺序，应该按照特定的顺序对样式进行排序。这也是对 CSS 特异性的理解的一种体现。
***整理你的风格也是一个重要的步骤。通过遵循上述原则和**实践，你可以有效地管理和优化你的 CSS 代码，提高代码质量和开发效率。
Linting 是一种静态代码分析工具，它可以确保你的 CSS 代码遵循为样式定义的规则，并确保你的样式一致、结构良好，并遵循 CSS **实践。以下是一些 Linting 的建议：
1. 确保按照字母顺序排列 CSS 属性，这样查找内容变得更加容易。你甚至可以使用 Stylelint 来强制执行此规则。
2. 将 box-sizing 属性设置为 border-box ,因为默认值应该是 border-box ,并且它被列为许多 CSS API 错误之一。在顶层简单地声明 *, *::after, *::before{box-sizing: border-box;}。
3. 更喜欢使用十六进制和颜色函数指定颜色值，而不是说红色、紫色、青色等颜色名称。有数百万个十六进制颜色值，而不是所有这些值的名称。为了保持一致性，找到一种添加颜色的方法并坚持下去。
4. 当为要在内容流中使用的组件设置样式时，让内容和内部间距定义大小，不包括位置和边距等内容。让使用此组件的容器来决定位置以及此组件与其他组件的距离。
5. 尝试组织 CSS 以匹配标记顺序，这样可以让你更轻松地通过查看 CSS 来理解你的标记。这是我做的事情，为我节省了很多时间。
6. 经常会发现开发人员会四处更改 HTML 以应用某种样式。通常，将样式设置为 CSS,并让你的 HTML 以语义上有意义的方式构建。此规则有例外，但始终确保采用的结构不违反任何 HTML 语义规则。首先，在编写 HTML 时要考虑内容，而不是样式。比添加 CSS 并在出于样式原因更改 HTML 之前尽力而为。
7. 连字符还是下划线？类名和 id 名称最常见的分隔符是连字符，但无论你选择什么，都要坚持使用。
8. 在寻求 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 方面有艺术水平。无论你**采用什么规则，都要保持一致。感谢你的阅读。祝你好运！
学习更多技能请点击下方公众号。
