如何避免编写混乱且无法扩展的 CSS
“我只有 4 个 .css 文件，但总共却有超过 10,000 行代码。怎么会这么庞大？”
CSS 文件很容易变得难以控制。
但事情并非一定要如此。
让我们深入探讨一些实用的 CSS 技巧，帮助你编写更模块化、更灵活的代码：
方法一：利用 CSS 中的继承
你是否曾经在 CSS 中重复使用某个声明，即使你知道之前已经使用过该声明？
了解 CSS 中的继承机制或许会有帮助。
CSS 中的继承允许我们在高层定义样式，以便这些样式可以向下传递并影响后代元素。
这是简单的入门级CSS技能。
然而，尽管继承规则的性质很容易理解，但我认为它经常没有得到充分利用。
如果运用得当，从长远来看，它可以为你节省数百行代码。
从最高层面来说，对于大多数网站而言，所有 HTML 元素都会采用一致的样式：
html {
background-color: #fafafa;
color: #424242;
font-family: 'Helvetica';
font-size: 100%;
font-weight: 300;
line-height: 1.5;
box-sizing: border-box;
}
别忘了inherit
如上所示，从根元素添加样式是一个很好的起点。
但是，有些 HTML 元素（例如 <div><input>或 <span> <textarea>）默认情况下不会继承您定义的样式。
这意味着，如果您font-family: Helvetica像上面的示例所示那样在根元素中设置样式，则元素中的字体<input>将不会继承此样式，它们将采用浏览器默认字体系列。
你可以通过添加以下声明来覆盖此默认行为：font-family: inherit对于这些默认情况下不继承属性的元素。
确保所有元素都继承根元素上定义的样式的一种常用方法是使用通用选择器* {}并将inherit值应用于特定属性：
* {
font-family: inherit;
line-height: inherit;
color: inherit;
box-sizing: inherit;
}
需要注意的是：font-size上面的通用选择器代码片段中不包含类似 ` and`的属性font-style，因为应用这些样式会覆盖用户代理样式。
例如，如果您在通用选择器中设置样式，这将覆盖所有标题标签（h1、h2、h3……）的font-size: 20px用户代理。font-size
综上所述，以下是一些常用声明的示例，这些声明利用继承规则来节省一些 CSS 代码：
html {
background-color: #fafafa;
color: #424242;
font-family: Georgia, serif;
font-size: 100%;
font-weight: 300;
line-height: 1.5;
}
* {
font-family: inherit;
line-height: inherit;
color: inherit;
}
现在，让我们更深入地探讨一下造型元素。
技巧二：元素之力
比起设置根元素的样式，直接向元素选择器添加样式是保持 CSS 文件简洁高效的好方法。
例如，对于像博客这样内容丰富的网站，您可以这样设置字体选择器的样式：
p {
/* paragraph styles are not required
as they are inherited from the root */
}
h1, h2, h3, h4, h5, h6 {
font-family: Helvetica, sans-serif;
font-weight: 700;
line-height: 1.3;
}
h1 {
font-size: 2rem;
max-width: 32rem;
}
h2 {
font-size: 1.75rem;
max-width: 24rem;
}
h3 {
font-size: 1.5rem;
max-width: 20rem;
}
h4 {
font-size: 1.25rem;
max-width: 16rem;
}
这样做有两个好处：
- 您的 HTML 代码会更加简洁，因为样式是直接应用于 HTML 元素选择器（即无需向 HTML 标签添加类）。
- 在某些情况下，它可以省去添加自定义类的需要，从而简化 CSS 样式表并使其更具可扩展性。
我喜欢把这看作是在项目中建立样式的核心基础，这样你就可以有一个良好的基础来开始设置组件样式并构建网站更复杂的部分。
方法三：使用 CSS 方法
仅仅利用 CSS 继承规则和样式元素选择器是远远不够的。
使用类来设计网站上的各种组件和布局是不可避免的（而且你会花费大部分时间）。
因此，我们需要的是一个“系统”，以模块化、灵活的方式编写 CSS，从而保持 CSS 的高效性和组织性。
这就需要用到CSS方法论了。
CSS 方法论是一套一致的命名约定，开发团队将遵循这套约定，以确保他们编写出一致、可重用且随着时间推移可扩展的 CSS。
一些最流行的设计方法包括BEM、SMACSS、OOCSS和Atomic CSS。
根据 CSS 2019 的统计结果，BEM 方法似乎已成为最受采用的方法。
那么，让我们重点关注 BEM：它是什么以及如何开始在您的项目中实施它。
BEM 代表块-元-修改器，这是三大核心支柱。
每个支柱在创建组件时都有不同的命名规则：
- Block 指的是组件本身，例如，卡片组件（例如
.card）。 - Element 是 Block 内的子元素，并使用命名约定
[Block]__[Element]（例如.card__title）。 - 修饰符是块或元素设计上的变体，并使用命名约定
[Block]--[Modifier]（例如.card--dark）
让我们来看一个实际的例子，就以卡片组件为例：
在这个例子中，它.card是 Block。
您可以看到 Block 中的子元素.card使用了命名约定[Block]__[Element]。
例如，卡片图像所使用的类是.card__image
现在，让我们来看一个关于“修饰符”的例子：
[Block]--[Modifier]你可以看到，修饰符（）使用了命名约定.card--dark。
这里需要注意的是，使用修饰符时，要将其与方块一起使用（而不是代替方块）。
从上面的 CodePen 示例中可以看出，Modifier 类并没有.card--dark替换Block 类。.card
如需更多代码示例和更深入地了解 BEM，我建议查看Sparkbox 的文章。
概括
也许你已经编写 CSS 样式表很长时间了，但经常回头看时会说：“糟糕，我的 CSS 简直一团糟！”
如果加以运用，本文介绍的技术将有助于消除这种感觉，你也将朝着成为模块化和可扩展的 CSS 大师的目标迈进一大步。
综上所述，以下是您可以立即开始使用的 3 种 CSS 技术：
- 了解 CSS 中的继承机制并加以利用。
- 样式元素选择器可直接为您的设计奠定坚实的基础。
- 使用BEM等 CSS 方法论，以模块化和灵活的方式设计组件。
你觉得怎么样？有什么编写更简洁CSS代码的技巧或策略吗？
文章来源：https://dev.to/bytomray/how-to-stop-writing-messy-unscalable-css-2ngj