50个有价值的CSS编写规则，让你写出更好的CSS

爱被打了一巴掌 2022-10-09 15:21 30阅读 0赞

![bd569cf33344e1d649e09618e01270e4.png][]

英文 | 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加载器，也可以通过在页面中包含样式表时使用<link>标记来延迟非关键CSS。

## **5、具体但不太具体** ##

具体要好，因为它定义了哪种样式适用于什么风格，但是一旦过于具体，它就会变得降低性能，并同时增加捆绑包的大小。有时甚至表明CSS或设计系统不正确。特定选择器的示例：

*  p\#sample-p —（问为什么需要指定“ p”和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 方面有艺术水平。无论你最终采用什么规则，都要保持一致。

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

#  #

**学习更多技能**

**请点击下方公众号**

![7555c53c97112376a3d919a2f4a822ec.gif][]

[bd569cf33344e1d649e09618e01270e4.png]: /images/20221005/9286ecc91f154a07b16fcd07355a936f.png
[7555c53c97112376a3d919a2f4a822ec.gif]: /images/20221005/8ca79e739ae84c3dbe9f8fbe4c961c35.png