新设计人资源网

因为 CSS 只有一个作用域，如果不注意维护 CSS 代码，则会导致我们写的代码难于阅读和维护，于是我们借助网页本身是有层次的，抽象出来了BEM 方法论。

BEM 简单的三层分法，在应对小中型网站没有问题，但是去应对复杂网站的样式可能就比较困难了，我们需要寻求一个更好的办法。

于是 SMACSS 横空出世了， SMACSS 和 BEM 的关系有点像布局中的 Flex 布局和 Grid 布局的关系。

但是请注意， SMACSS 和 BEM 之前绝不是包含和被包含的问题，就像在应用 Flex 布局和 Grid 布局的时候，铺网站结构我们会更多倾向 Grid，普通简单的二维布局则会采用 Flex，我们会在合适的时机采用合适的方法，SMACSS 和 BEM 也差不多，掌握了思想，应用都是小事。

如果你还没有学过 BEM 可以参考下 CSS 架构之 BEM 这篇文章。

什么是 SMACSS

不难想到，SMACSS 是缩写，这个缩写就是网站的开门注 ：Scalable and Modular Architecture for CSS，名字的意思很明确就是要编写模块化、结构化和可扩展的 CSS。

当你学完 SMACSS，再来理解 Scalable and Modular Architecture for CSS 体会就更深了。

SMACSS 应该怎么读，SMACSS 虽然不是一个单词，但是它是有自己的发音的，音同单词 {smacks}。

SMACSS 的分类

如果给 BEM 找个核心词，那就是分层，如果给 SMACSS 也找个核心词，那肯定就是分类，一字之差，我们来看看 SMACSS 如何进行分类的。

SMACSS 的核心是分类，具体把项目的样式分为了五类：

• Base（基础）

• Layout（布局）

• Module（模块）

• State（状态）

• Theme（主题）

接下来我们具体看看五个部分具体的内容。

Base

基础（Base）规则里一般放置默认样式。这些默认样式基本上都是元素选择器，不过也可以包含属性选择器，伪类选择器，孩子选择器，兄弟选择器。本质上来说，一个基础样式定义了元素在页面的任何位置应该是怎么样的。

例如：

html {
    margin: 0;
    font-family: sans-serif;
}
a {
    color: #000;
}
button {
    color: #ababab;
    border: 1px solid #f2f2f2;
}

我们看到 Base 的代码和 CSS resets 非常的相似。

这部分的代码一般我们都是寻求 Normalize.css 或 sanitize.css 的帮助，而不需要自己完成。

Layout

我们先来区分下网站什么部分属于 Layout 什么部分属于 Module，看看下面这个网站截图：

先来一次大致的划分，主要包括头部、体部、尾部等，这些就是属于 Layout 的。

再来一次细致的划分，Layout 里面的元素还可以继续细分，例如导航栏等，这些都是组件 Module。

Layout 很贴近 HTML 标签，作为网站的骨架，负责布局，Module 更多负责业务展示和交互的部分。

Layout 与 Module 的关系为( > 表示包含)：

Layout > Module

如果网站复杂，其实是可以这样的：

> Layout > Module > Layout > Module ...

所以，布局（Layout）规则就是将页面拆分成几个部分，每个部分都可能有一到多个模块。

一般布局类名都是 .l- 开头。

需要注意，官方讲主要的 layout 使用可以使用 ID 选择器，次要的 layout 采用类选择器，对于这个我是绝对不能接受的，我认为应该全用类。

走个实例：

.l-header {}
.l-primarynav {}
.l-main-content {}

注意，其实现在项目开发，Layout 往往直接被当做组件直接使用了，例如 、

.is-collapsed {}
.is-expanded {}
.is-active {}
.is-highlighted {}
.is-hidden {}
.is-shown {}
.is-successful {}

.button-large {
    width: 60px;
    height: 60px;
}

Like