结构化CSS：分离的艺术

引言

写CSS很容易。写持续可维护的CSS则很难。你也许听说过不下100次了。

因为在CSS中默认都是全局的申明。

如果你是个C的程序员你知道全局变量是糟糕的。同时不管你是什么程序员，你该了解独立及可组合的模块是一个可维护系统的关键所在。

让我们通过一些例子了解CSS的维护有多痛苦吧。

全局样式冲突

/* body */
body {
  font-family: Arial, sans-serif;
}

/* heading */
h1, h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
}

在这个例子中，body和heading的样式冲突了。

为什么？因为heading的样式会覆盖body的样式。

这会导致什么问题？

如果我们要改变body的字体，我们必须同时修改body和heading的样式。

这很麻烦，尤其是在一个大型项目中，body和heading的样式可能被分散在不同的文件中。

命名冲突

.button {
  padding: 10px;
  border: 1px solid #000;
  background-color: #fff;
}

.button-primary {
  color: #fff;
  background-color: #000;
}

.button-secondary {
  color: #000;
  background-color: #fff;
}

在这个例子中，.button、.button-primary和.button-secondary的命名冲突了。

为什么？因为它们都使用了相同的基类.button。

这会导致什么问题？

如果我们要改变.button的样式，我们必须同时修改.button-primary和.button-secondary的样式。

这很麻烦，尤其是在一个大型项目中，.button、.button-primary和.button-secondary的样式可能被分散在不同的文件中。

CSS结构化的重要性

CSS结构化的目的是为了解决上述问题。

CSS结构化可以帮助我们：

• 避免全局样式冲突
• 避免命名冲突
• 提高代码的可维护性
• 提高代码的可扩展性
• 提高代码的可重用性

CSS结构化的实现方法

有多种方法可以实现CSS结构化。

最流行的CSS结构化方法有：

• BEM
• OOCSS
• SMACSS

BEM

BEM（Block Element Modifier）是一种CSS结构化方法，它使用一个简单的命名约定来区分块（Block）、元素（Element）和修饰符（Modifier）。

OOCSS

OOCSS（Object Oriented CSS）是一种CSS结构化方法，它使用面向对象编程的思想来组织CSS代码。

SMACSS

SMACSS（Scalable and Modular Architecture for CSS）是一种CSS结构化方法，它将CSS代码分为五个部分：

• Base
• Layout
• Module
• State
• Theme

选择合适的CSS结构化方法

选择合适的CSS结构化方法取决于你的项目规模和你的个人喜好。

如果你是一个小型项目，你可以使用BEM或OOCSS。

如果你是一个大型项目，你可能需要使用SMACSS。

结语

CSS结构化是一个非常重要的概念。

它可以帮助我们写出更易于维护、扩展和重用的CSS代码。

如果你是一个前端开发人员，我强烈建议你学习CSS结构化。