🧔🏿 👩‍🎨 👩🏼‍🌾 通过这5条原则来改进CSS。 🏂🏻 🧙🏿 ♂️

编写CSS是一个相当简单明了的过程，那么为什么这需要更多的原理和最佳实践呢？

随着项目规模的扩大和从事该项目的人数的增加，越来越明显地出现了新的困难，这些困难将来可能会引起严重的问题。代码重复，复杂的属性重新定义链，使用！重要的是，来自远程HTML元素的剩余和未使用的CSS属性，等等。这样的代码更难阅读和修复。

以专业的方式编写CSS将使代码更具可维护性，可扩展性，可理解性和简洁性。让我们看一下5条简单有效的原理，这些原理将CSS提升到一个新的水平。

命名原则

“在计算机科学中，只有两件复杂的事情：缓存无效化和命名”-Phil Carleton

正确命名和构造CSS选择器是使CSS更具可读性，结构化和简洁的第一步。在命名约定中定义规则和限制使您的代码标准化，可靠且易于理解。

这就是为什么诸如BEM（块元素修改器）， SMACSS（CSS的可伸缩和模块化体系结构）和OOCSS（面向对象的CSS）之类的概念在许多前端开发人员中流行的原因。

低特异性原理

覆盖CSS属性非常有用，但是在更复杂的项目中，事情可能很快就会失控。覆盖链可能会变得很长很复杂，这将迫使您使用!important对于解决特定性问题很!important ，这在调试代码或添加新功能时很容易丢失

 /*     */ .card {} /*     */ .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并坚持低特异性重写前面的示例。

 /*     */ .card {} /*      */ .card__title {} .blogList__image {} .blogList__title--featured {} .blogList__img--special {}

您可以看到这些选择器如何更简单，更清晰，并且在需要时可以轻松地重新定义和扩展。并且保持低的特异性（唯一的一类），我们保证了最佳的性能和灵活性。

干燥原理

DRY原理（不要重复自己，rus。不要重复）也可以应用于CSS。 CSS中的重复会导致代码膨胀，不必要的覆盖，不良的支持等。可以通过适当的代码结构和质量文档解决此问题。

Storybook是一个很棒的免费工具，可让您创建可用Web界面组件的概述并编写质量文档。

 /*    DRY */ .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原理重构代码

 /*    DRY */ .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-secondary修饰符扩展.button类，则将必须执行许多替代操作，尽管我们只想更改背景颜色，并保留默认样式。

问题在于我们的.button类具有多个角色：

定义一个块模型（ padding ）
定义字体（ font-size ， font-weight ）
确定外观（ color ， background-color ， border-radius ）

这使CSS类的扩展及其与其他类的集成变得复杂。考虑到这一点，让我们使用BEM和OOCSS改进CSS。

 /*   */ .button { padding: 1rem 2rem; font-weight: bold; color: #fff; } /*   */ .button--radialBorder { border-radius: 0.2rem; } .button--large { font-size: 2rem; } .button--primary { background-color: #eb4934; } .button--secondary { background-color: #888; }

我们将按钮的样式分为几个类，可用于扩展基类。如有必要，我们可以应用修饰符并在设计更改或添加新元素时添加新修饰符

开放/封闭的原则

软件实体（类，模块，功能等）必须为扩展而开放，但为更改而封闭”

在前面的示例中，我们已经使用了打开/关闭原则。所有新功能和选项均应通过扩展添加。让我们来看这个例子。

 .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原理减少了膨胀并提高了代码质量
使用开放/封闭原理的灵活性和可维护性

感谢您抽出宝贵的时间阅读本文。如果您觉得有用，可以分享或发表评论。

通过这5条原则来改进CSS。