15、灵活且模块化的 CSS 编写指南

灵活且模块化的 CSS 编写指南

1. 模块化 CSS 编写的重要性

在过去几年里，CSS 发生了巨大的变化。曾经，开发者使用 CSS2 作为声明式语言来装饰页面，而如今的 CSS3 赋予了我们更多的能力。现在，CSS 被广泛用于实现设计理念，为页面上的元素添加动画效果，甚至应用逻辑，如隐藏和显示内容块。大量的 CSS 代码需要更好的架构、文件结构和合适的 CSS 选择器。

2. 流行的模块化 CSS 编写技术

2.1 BEM（块、元素、修饰符）

BEM 是由 Yandex 在 2007 年引入的一种命名约定，它成为开发前端应用的流行概念。它不仅适用于 CSS，也适用于其他语言，因为其规则简单且效果良好。

例如，有如下 HTML 标记：

<header class="site-header">
    <div class="logo"></div>
    <div class="navigation"></div>
</header>

对应的简单 CSS 可能是：

.site-header { ... }
.logo { ... }
.navigation { ... }

但这种方式可能不太理想，因为页面侧边栏可能还有另一个 logo。虽然可以使用后代选择器，但这会带来新问题，因为难以提取部分选择器并在其他地方使用。BEM 通过定义规则解决了这个问