CSS架构中的SMACSS该如何理解

这期内容当中小编将会给大家带来有关CSS架构中的SMACSS该如何理解，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

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

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

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

但是请注意， SMACSS 和 BEM 之前绝不是包含和被包含的问题，就像在应用 Flex 布局和 Grid 布局的时候，铺网站结构我们会更多倾向 Grid，普通简单的二维布局则会采用 Flex，我们会在合适的时机采用合适的方法，SMACSS 和 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