1.简介

SMACSS，是 CSS 的一种设计模式，可以读做【S MA CSS】斯马CSS，全称：Scalable and Modular Architecture for CSS，翻译过来就是：CSS 的可扩展和模块化架构。
顾名思义，就是模块化、结构化、可扩展的 CSS。它的意义是规范一种统一的CSS开发方式，方便开发人员维护 CSS 代码。
先把官网贴上：http://smacss.com/

2.样式分类

SMACSS 核心是进行分类，把项目中的样式分为五类：

2.1 Base（基础）

如 reset.css、normailze.css 之类的格式化元素样式 CSS。建议 normailze.css 为基础，根据实际情况添加。

2.2 Layout（布局）

用于布局的 CSS，只负责布局，不在意里面的内容。如新闻详情页，布局都是差不多的，但是内容样式可能会不一样，Layout 关心的是布局。

2.3 Module（模块）

模块化、可重用的 CSS 规则，可以当作 component，如菜单、弹出框、列表等等。

2.4 State（状态）

用来描述 Layout 和 Module 的状态，是 hidden 还是 expanded？active 或是 inactive？

2.5 Theme（主题）

指 Layout 和 Module 的样式风格。

3.命名规范

3.1 Base

用来重置网页样式，一般使用元素、属性、伪类、孩子、兄弟等选择器。不应该出：class、ID、!important 等。如：

html,body{
    margin:0;
    padding:0
}
a{
    color:#333;
}

3.2 Layout

一般使用 l- 或 layout- 作为前缀。布局分大布局和小布局，header、footer、sidebar等是大布局，还有 grid 等小布局。大布局一般只有一个，如 header，使用 ID 选择器即可。小布局考虑到重用性，建议使用 class。如：

.l-grid{ }

3.3 Module

作为最主要的 CSS，不需要任何前缀，直接使用语义化模块本身的名称就好。

.callout{ }
.field{ }

3.4 State

一般使用 is- 作为前缀，如：

.callout .is-collapsed{ }

3.5 Theme

定义公共样式，项目中重复的元素，如颜色、形状、边框、阴影等规则。如：

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

已记录 SMASS 和 BEM ，下一篇记录一下OOCSS