1. 什么是SMACSS？
SMACSS全称是Scalable and Modular Architecture for CSS，翻译过来就是可扩展和模块化的CSS架构。SMACSS提供了一种更优秀的CSS架构和组织CSS代码的方法，使CSS更加易于维护、扩展和调整。
SMACSS不是一种具体的技术，而是一种思想、一种方法。SMACSS提倡将CSS分解成多个模块，每个模块包含一个或多个CSS规则，这些规则反映了特定的设计和功能。这样可以使CSS更具有可重用性和可扩展性。
2. SMACSS的五个基本的CSS模块
SMACSS将CSS分解成5个基本的模块，为当前的CSS模块提供了一些规则，它们提供了一些指导CSS样式可读性、可维护性和可扩展性的最佳实践。
2.1 基本的模块
基本模块是所有设计中最基本的基础样式，它们通常作为操作系统样式，或在网站/应用程序更高层次的样式定义中，定义一些被广泛使用的通用样式。基本模块对于构建网站/应用程序的其余部分提供了必要的基础：
/* 基本的 CSS */
html,
body {
height: 100%;
}
body {
margin: 0;
padding: 0;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
}
基本模块可以一直使用到整个网站中。它们是全局应用的样式，对整个网站产生影响。
2.2 布局模块
布局模块定义必要的外框，布局模块决定页面的大体结构，网站中的各个元素显示在哪里。
SMACSS推荐将不同的布局以layout-为前缀类似的形式来定义：
/* 布局 CSS */
.layout-header {
height: 60px;
background-color: #333;
color: #FFF;
}
.layout-footer {
height: 30px;
background-color: #333;
color: #FFF;
}
布局模块定义了一些大的块的基本样式，这些大块通常用作整个页面的结构。比如头部、底部、侧边栏和主区域。
2.3 模块模块
模块模块是页面上某些有特定目的或功能的小块，被显式的定义为应用程序或页面的业务逻辑。这里的样式通常单一，因此，该样式也不应该显示地进行复用。
SMACSS推荐将不同的模块以module-为前缀类似的形式来定义：
/* 模块 CSS */
.module-banner {
width: 100%;
height: 200px;
background: url('/assets/img/index-banner.jpg') center / cover;
}
.module-service-item {
width: 33.3333%;
float: left;
text-align: center;
padding: 30px 0;
}
.module-service-item h3 {
margin-top: 20px;
}
模块是页面的主要内容，它定义了彼此之间相对的位置。模块元素包括（但不限于）页面中的按钮、表单、图片、文本块、列表、小部件等。
2.4 状态模块
状态模块定义指定模块的状态，例如悬停/聚焦/禁用样式和任何形式的状态/控制。它们被用于表示一个特定的模块的不同状态，标识当前显示或者当前被激活的元素是哪个模块。
SMACSS推荐将不同的状态以is-和js-为前缀类似的形式来定义：
/* 状态 CSS */
.is-selected {
background-color: #333;
color: #FFF;
font-weight: bold;
}
.is-disabled {
color: #CCC;
cursor: not-allowed;
}
.js-carouselImage--loaded {
display: block;
}
例如，我们可以添加一个is-selected的类来突出显示当前的页面选项卡。或者我们可以添加一个is-disabled的类来禁用一个元素。
2.5 皮肤模块
皮肤模块定义用于给元素添加外观变化的可参考颜色和样式。皮肤模块的作用是给你能够给组件定义不同的颜色、字体大小、圆角等等的外观，从而使这些组件能够出现在不同的主题中。
SMACSS推荐将不同的皮肤样式以skin-为前缀类似的形式来定义：
/* 皮肤 CSS */
.skin-default {
background-color: #FFF;
border: 1px solid #DDD;
}
.skin-primary {
background-color: #337ab7;
color: #FFF;
}
皮肤模块可以将一个布局或模块的默认样式更改为特定的皮肤。这对于为网站提供不同的外观和感觉非常有用。
3. SMACSS的优点
为什么要使用SMACSS？下面是一些SMACSS的优点：
易于维护 - SMACSS的模块化方法使CSS更容易阅读和维护
可扩展 - SMACSS的模块化方法使CSS变得更具伸缩性和可复用性
可读性更强 - SMACSS的模块化方法使代码更容易阅读，因为每个模块都具有明确的目的和功能
代码重复性减少 - SMACSS的模块化方法使我们能够在不同的项目中复用不同的CSS模块
总之，SMACSS提供了一种更优秀的CSS架构和组织CSS代码的方法，使CSS更加易于维护、扩展和调整。