通过以下5条原则来改善CSS
编写CSS确实非常简单明了，那么为什么在编写CSS时需要原则和最佳实践？
随着项目范围的扩大以及项目工作人员的增加，问题变得越来越明显，并可能导致严重的问题。解决问题可能会变得更加困难，重复的代码，复杂的替代链以及 !important，剩余的/未使用的代码（已删除的元素或功能），难以阅读的代码等。
以专业水平编写CSS将使CSS代码更具可维护性，可扩展性，可理解性和更清洁性。我们将研究五个简单有效的原则，这些原则将使您的CSS迈上一个新台阶。
命名原则
“计算机科学中只有两件难事：缓存失效和命名。” -菲尔·卡尔顿
正确命名和构造CSS选择器是使CSS更具可读性，结构化和更简洁的第一步。在命名约定中建立规则和约束可以使代码标准化，健壮并易于理解。
这就是为什么BEM（块元素修改器），SMACSS（CSS的可伸缩和模块化体系结构）和OOCSS（面向对象的CSS）之类的概念在许多前端开发人员中流行的原因。
低特异性原理
覆盖CSS属性非常有用，但是在更复杂的项目中，事情很快就会失控。覆盖链可能会变得非常漫长而复杂，您可能被迫使用 !important 解决特异性问题，在调试或添加新功能时很容易迷失方向。
/* Low-specificity selector */
.card {}
/* High-specificity selectors */
.card .title {}
.blog-list .card img {}
.blog-list .card.featured .title {}
#js-blog-list .blog-list .card img {}
浏览器和特性
遵循低特异性原则的好处之一就是性能。浏览器从右到左解析CSS。
让我们看下面的例子：
.blog-list .card img {}
浏览器按如下方式解析选择器：
- 找到所有
img页面上的元素 - 保留选定元素作为其后代
.card类 - 保留选定元素的后代
.blog-list类
您会看到高特异性选择器如何影响性能，尤其是当我们需要全局选择通用元素时，例如 div， img， li等
使用相同级别的特异性
通过将低特异性CSS类选择器与BEM或上一节中提到的其他命名原则结合使用，我们可以创建高效，灵活且易于理解的代码。
为什么要使用CSS类？我们希望保持相同的特异性水平，保持灵活性并能够针对多个要素。元素选择器和id选择器没有提供我们所需的灵活性。
让我们使用BEM重写前面的示例，并保持较低的特异性。
/* Low-specificity selector */
.card {}
/* Fixed high-specificity selectors */
.card__title {}
.blogList__image {}
.blogList__title--featured {}
.blogList__img--special {}
您可以看到这些选择器如何简单，易于理解，并在需要时可以轻松地覆盖和扩展。通过将它们保持在低级别（单个类），可以确保我们获得最佳性能和灵活性。
干法原理
DRY（不要重复自己）原则也可以应用于CSS。 CSS中重复的代码可能导致代码膨胀，不必要的覆盖，降低可维护性等。可以通过适当地构造代码并拥有高质量的文档来解决此问题。
故事书是一个很棒的免费工具，使您能够创建可用前端组件的概述并编写高质量的文档。
/* Without DRY Princple */
.warningStatus {
padding: 0.5rem;
font-weight: bold;
color: #eba834;
}
.errorStatus {
padding: 0.5rem;
font-weight: bold;
color: #eb3d34;
}
.form-errorStatus {
padding: 0.5rem 0 0 0;
font-weight: bold;
color: #eb3d34;
}
让我们重构代码，使其遵循DRY原理。
/* With DRY Principle */
.status {
padding: 0.5rem;
font-weight: bold;
}
.status--warning {
color: #eba834;
}
.status--error {
color: #eb3d34;
}
.form__status {
padding: 0.5rem 0 0 0;
}
单一责任原则
通过在CSS中使用单一职责原则，我们可以确保CSS类易于扩展和覆盖。让我们看下面的例子。
.button {
padding: 1rem 2rem;
font-size: 2rem;
border-radius: 0.2rem;
background-color: #eb4934;
color: #fff;
font-weight: bold;
}
.button--secondary {
border-radius: 0;
font-size: 1rem;
background-color: #888;
}
我们可以看到，如果我们想扩展 .button 上课 .button--secondary，当我们只想应用不同的背景颜色并保留默认样式时，我们将进行大量覆盖以实现所需的功能。
问题是我们 .button 该类具有多种作用：
- 设置布局（
padding） - 设置版式（
font-size，font-weight） - 设置演示文稿（
color，background-color，border-radius）
这使得我们的CSS类很难扩展并与其他CSS类结合。牢记这一点，让我们使用BEM和OOCSS改进我们的CSS。
/* Shared styles */
.button {
padding: 1rem 2rem;
font-weight: bold;
color: #fff;
}
/* Style extensions */
.button--radialBorder {
border-radius: 0.2rem;
}
.button--large {
font-size: 2rem;
}
.button--primary{
background-color: #eb4934;
}
.button--secondary {
background-color: #888;
}
我们已经分解了我们的 button 样式分为几个类，可用于扩展基础 button 类。我们可以选择应用修改器，并在设计更改或添加新元素时添加新的修改器。
开/关原则
软件实体（类，模块，功能等）应打开以进行扩展，但应关闭以进行修改。
在前面的示例中，我们已经使用了打开/关闭原理。所有新功能和选项都需要通过扩展添加。让我们看一下这个例子。
.card {
padding: 1rem;
}
.blog-list .card {
padding: 0.5em 1rem;
}
的 .blog-list .card 选择器几乎没有潜在的问题：
- 只有在以下情况下才能应用某些样式：
.card元素是的子元素.blog-list元件。 - 样式被强制应用于
.card元素，如果放在.blog-list元素，它会产生意外的结果和不必要的覆盖。
让我们重写前面的示例：
.card {
padding: 1rem;
}
.blogList__card {
padding: 0.5em 1rem;
}
我们通过使用单个类选择器解决了该问题。使用此选择器，我们可以避免意外的效果，并且没有条件嵌套样式。
结论
我们已经看到了通过应用以下几条简单的原理，我们可以大大改善编写CSS的方式：
- 标准化的命名和结构，并通过使用BEM，OCSS等提高了可读性。
- 通过使用低特异性选择器提高了性能和结构。
- 利用DRY原理减少代码膨胀并提高代码质量
- 使用开/关原理的灵活性和可维护性
- 等等
感谢您抽出宝贵的时间阅读这篇文章。如果您发现此功能有用，请给它一个❤️或?，分享并发表评论。