两种 CSS 方法论你知道吗？
前言
CSS 命名规范对于开发人员来说并不陌生，其中 BEM(Block Element Modifier)是一种广泛应用的命名方法。BEM 由 Yandex 团队提出，旨在帮助开发者创建结构一致的 CSS 模块。BEM 将类名分为块(Block)、元素(Element)和修饰符(Modifier)三个部分。
块(Block):一个块是视觉上或者语义上的一个整体，它是一个具体且唯一的一个元素。例如，页面上的一个弹窗或是一个搜索框。
元素(Element):一般认为是块的组成部分，元素通常使用它的父级块名称作为前缀。例如，弹窗的标题、关闭按钮和确认按钮。
修饰符(Modifier):修饰符表示一个具体元素的特定状态。例如，关闭按钮在鼠标没放上去和放上去的时候，呈现的两种状态。
以 Bootstrap 的弹窗组件为例，我们可以看到类名是如何遵循 BEM 规则的：鼠标放上去和没放上去的状态是有区别的。通过上面的示例可以看出，块与元素是通过两个下划线(__)连接的，而元素和修饰符之间是通过两个短横线(--)连接的。
当然，如果你之前没有接触过 BEM,可以通过阅读相关文档并在实际项目中尝试使用来加深理解。另外，现在网上已经有很多关于 BEM 的文章，耐心寻找优秀的教程。
今天的文章将介绍两种较少人了解的 CSS 方法论：SUIT CSS 和 SMACSS。
1. SUIT CSS
官方文档：SUIT CSS 命名约定(https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md)
SUIT CSS 是一种基于组件开发的 CSS 的方法论，它将类名分为两种类型：工具类和组件类。
工具类：CSS 中有很多固定工具类，如左右浮动、文本截断、垂直居中等。工具类的作用是帮助程序减少重复代码，并提供一致的实现。
命名规则：u-[sm-|md-|lg-]<工具类名>。工具类使用 u- 打头，后面接类名(类名使用驼峰的方式命名),中间可以加上 sm、md、lg 这种响应式的规则。
举个例子：
```html
```
2. SMACSS
SMACSS(Scalable Micro App Architecture for CSS)是一种用于构建可扩展移动端 Web 应用的 CSS 框架中的层级结构和样式重构的方法论。它是根据设计模式(如 MVC)将 UI 架构分解为一系列独立的组件，然后对这些组件进行样式重构的一种方法。
👉看看我的博客
爱折腾的前端工程师，欢迎关注我的公众号「更了不起的前端」
组件类：用于描述一个个具体的组件。组件是构成一个具体应用程序的基石，因此组件的设计特别重要。
命名规则：[<命名空间>-]<组件名>[-后代名][--修饰符],这样的命名方式在编写HTML和CSS时有几个好处：有助于区分组件的根元素、后代元素以及用来修饰的类；降级类名重复的几率；能够让类名更具有语义化。下面来看看命名规则的各个部分的具体作用：
命名空间(可选):如果希望避免自己定义的组件类名与引入的第三方样式类名发生冲突，则可以为自己的类名加上命名空间。但是，如果业务中不存在第三方的样式，则可以不带命名空间。例如：
```css
.sfq-Modal{} /* 我的弹窗组件 */
.sfq-Button {} /* 我的按钮组件 */
```
组件名：使用大驼峰规则(首字母大写的驼峰规则，Pascal Case)来命名，使用这种方式也可以尽可能地避免出现同名样式的冲突。例如：
```css
.Modal {}
```
组件名-后代名：组件的后代指附加在组件上的一部分，例如，弹窗组件的标题、按钮等等。后代名称使用小驼峰规则(首字母大写的驼峰规则，Camel Case)命名。例如：
```html
```
SUIT CSS 是一种在 BEM 基础上进行改进的命名规范，它提供了完整的基础类，以及测试套件用来检测你的 CSS 类名是否符合规范。具体的使用方法可以查看官方文档(https://github.com/suitcss/suit)。除了定义了工具类、组件类这两种命名方式外，SUIT CSS 还定义了 CSS 变量的命名方式，命名规则为： --组件名[-后代名|--修饰符]-(CSS属性|变量名)。
SMACSS 是一套易开发，易维护的 CSS 编写的方法论，它将 CSS 规则一共分为五大类：Base(基础)、Layout(布局)、Module(模块)、State(状态)、Theme(主题)。
在现有项目中，你可以在样式表中找到以下五个分类：基础规则、布局规则、模块规则、状态规则和其他。这几种类型的样式混合在一起会使得代码显得非常复杂。为了降低代码的复杂度，你可以尝试将这些样式进行归类。每个类别都有一些适用的准则，如下所示：
1. 基础规则：作用于元素选择器，用于定义 HTML 标签的默认样式。基础样式主要用于设置标题大小、默认链接颜色、默认字体样式以及 body 背景等。
```css
/* 基础样式示例 */
body, form {
margin: 0;
padding: 0;
}
a {
color: #039;
}
a:hover {
color: #03F;
}
```
2. 布局规则：CSS 的本质是布局页面中的元素。页面各个元素有主次之分，例如头部、尾部等大的区块属于主要组件，我们称之为布局(Layout)。而导航栏(属于头部)和网站说明(属于尾部)这种区块为次要组件，我们称之为模块(Module)。SMACSS 允许在布局样式中使用 ID 选择器，有助于在 HTML 中一眼区分出节点在布局中的位置。其他的非 ID 选择器的类需要添加 l-前缀，表示这属于布局样式。
```html
```
3. 模块规则：相对于布局组件来说，模块是更加松散的次要组件。这个区分确实比较模糊，所以有一些方案也取消了布局规则，将所有可重用组件都划分为模块。模块规则在官方文档没有详细的命名风格，很多文章在命名模块时基本都是参考 BEM。
4. 状态规则：状态用于描述模块在不同状态下的外观。使用 is-前缀有助于我们在 HTML 中区分元素的状态。
通过以上四种规则，你可以更好地组织和管理你的 CSS 样式，降低代码的复杂度。
欢迎关注的 HTML 代码：
```html
```
某些状态优先级较高的 CSS 类，例如用来控制元素显示或隐藏的，可以加上 `!important`,例如：
```css
.is-hide {
display: none !important;
}
.is-show {
display: block !important;
}
```
SMACSS(Scalable Microfrontend Architecture)是一种前端开发架构，它将前端项目划分为多个可重用的模块。在这里没有特别介绍主题规则，因为主题在当前这个时间，基本已经被 CSS 变量所替代。SMACSS 有很多的规则这里没有详细列出来，但是在关于 CSS 如何命名方面的规则其实比较少，而且它的布局规则与模块规则确实有些模糊，不太好区分。
本文转载自微信公众号「更了不起的前端」，可以通过以下二维码关注。转载本文请联系更了不起的前端公众号。
