适合初学者到专业人士的 15 个 CSS3 最佳实践。

无论您是前端开发的初学者还是专家，遵循一些最佳实践以保持层叠样式表 (CSS) 的优化和有序都非常重要。

CSS 开发者也是一名艺术家，作为一名艺术家，你应该掌握一些独特的工作策略，让你的工作更加轻松有趣。以下是我分享的一些技巧，你可以参考，并像专业人士一样创作出自己的 CSS 风格。哇！那就开始吧！

01. 不要把所有内容都放在一个 CSS 文件中

案例 01：一个较大的 CSS 文件会导致更少的 HTTP 请求，
从而可以提高性能。

案例 02：几个较小的文件使得组织更容易，
这将使开发和维护更便宜、更容易。

那么，我们应该如何应对这两种情况呢？这是一个价值百万
美元的问题。好吧，让我来解答你的困惑；我们可以遵循
双赢的原则。

“我们可以使用多个样式表来使内容更好地
组织起来，然后在将
它们放到网站上之前将它们压缩成一个文件，以提高性能。”

02. 按照自上而下的方法组织样式表

您可以在样式表中遵循 HTML 元素的层次结构。我称之为自上而下的方法，这将帮助您编写更结构化、更有条理的代码。您会发现自上而下的方法非常方便地从整个样式表中找到所需的代码块。

03.制作UI组件

尝试制作一些预构建的 UI 组件，您将来可能会用到它们，只需简单地插入一个类名并具有一些属性即可。

04. 注释你的 CSS

为了提高代码的可读性和条理性，代码注释起着至关重要的作用。代码注释有助于将来的代码重构，并帮助其他开发人员理解项目代码库。代码注释始终是一种良好的习惯。那些编写代码时使用恰当注释的开发人员拥有巨大的市场价值。

05.如何编写一致的CSS

一致的 CSS 对于团队协作以及大型项目都至关重要。在项目初期，您可以设置一些规则，以便在整个样式表中保持一致。这将帮助您编写一致的 CSS。

06 CSS 命名空间

CSS 命名空间可以帮助您创建一个规范 CSS 属性书写方式的结构。遵循这个约定，您就可以轻松地编写 CSS，而不必担心副作用。
以下是我使用的命名空间列表：

1. .l-: 布局
2. .o-：对象
3. .c-: 组件
4. .js：JavaScript 钩子
5. .is-|.has-：状态类
6. .t1|.s1：字体大小
7. .u-：实用程序类

07. 使用 BEM 或 Block 元素修饰符

您是否曾经开发过包含多个页面的大型网站？如果是，您可能已经意识到不遵循健壮的 CSS 架构会带来哪些麻烦。您可能还会研究过如何编写可维护的 CSS。

BEM 规范是维护良好 CSS 架构的理想选择。如果你以前没听说过 BEM，它代表块、元素和修饰符。乍一看，它看起来非常丑陋。

我非常讨厌 BEM，以至于刚接触它的时候根本没想过要尝试一下。我不记得是什么促使我尝试 BEM 的，但我意识到使用它是多么强大。

08. CSS 类嵌套或复杂选择器

从逻辑上讲，CSS 类选择器嵌套没有问题，但未来会变得合理。当你想修改现有规则时，这会有点复杂。另一个主要原因是，当你使用复杂的选择器时，浏览器会花费更多时间来匹配选择器。

让我先解释一下浏览器是如何解释选择器并决定它匹配哪个元素的。让我们通过一个例子来说明。

浏览器从 a 标签开始，它将尝试匹配所有 a 标签，然后尝试匹配下一个选择器，依此类推。

使用标签作为 CSS 选择器不是一个好习惯，因为它会尝试匹配每个标签。尝试使用更具体的选择器来降低复杂性。

09. 使用 CSS 预处理器，如 SCSS、SASS 和 LESS

为了保持 CSS 的 DRY（不要重复），请使用 CSS 预处理器，例如 SCSS、SASS 或 LESS。使用这些预处理器的最大好处是，你可以在 CSS 代码顶部定义可复用的代码，并通过 @include 和 @extend 在所有 CSS 代码中复用它们。

CSS 预处理器将使您编写基于模块化的 CSS 更加轻松，它有助于编写更有条理、更一致的层叠样式表。BEM 命名约定与 CSS 命名空间和 CSS 预处理器完美结合，打造稳健的 CSS 架构。

10.减少冗余

减少冗余有点困难，你不会发现两种情况完全相同。我的建议是，如果找到 70%-80% 的样式匹配，那么你可以使用不同的类来外包剩余的 30%-20% 样式。我希望这能有所帮助。

11. 仅使用 CSS 垂直对齐任何元素

为了垂直对齐任何元素，现代 CSS 引入了 CSS 弹性和网格系统。这些是动态居中任何元素的绝佳工具。

通过 Flex：

按网格：

12. 尝试使用简写 CSS 属性

有很多方法可以管理你的样式，但尽量坚持最佳方法。尽量使用 CSS 简写，这样可以减少代码量，并使你的样式表更加美观。

不良做法：

良好做法：

13. 使用 rem 或 em

使用 rem 或 em 比使用像素更动态。尽量使用 rem 或 em，而不是像素。

14. 避免使用 !important

为了避免代码冲突，并且不想让 CSS 破坏浏览器的正常行为，千万不要使用 !important。在大型应用程序中，找出 !important 中的冲突并重构整个代码库非常困难。

15. 使用移动优先的开发方法

移动优先的样式设计方法意味着样式会优先应用于移动设备。
关注点：
1. 最小宽度媒体查询
2. 渐进式增强（CSS 和 JavaScript）
3. 内容（而非设备宽度）决定断点

最后的话

希望你喜欢我的 CSS3 编码指南和前端 Web 开发最佳实践。你可以查看我的《HTML5 初学者 15 个最佳实践》，让你的标记更规范。如果你喜欢它或发现任何错误，请在评论中告诉我。感谢这段旅程，祝你编码愉快。