SMACSS-[Scalable and ModularArchitecture for CSS](https://smacss.com/) 分为Base、Layout、Module、Status和Theme共五个部分。不过它的核心思想仍然和OOCSS类似，鼓励使用class。 **1\. Base 基本样式** 页面元素的默认外观。它的定义不会用到class和ID。css reset也属于此类。 **2\. Layout 布局** 左右分栏、栅格系统等都属于布局样式。是Module的容器。 **3\. Module 模块** 它可以是一个产品列表，一个导航条。一般来说，Module定义的元素放置于前面说的Layout元素之内。模块是独立的，可以在各种场合重用。 **4\. Status 状态** 任一元素在特定状态下的外观 is-是一个合适的词，指明某一元素是什么状态 **5\. Theme 皮肤** 主题就是皮肤，和OOCSS的分离皮肤与结构不谋而合。更重要的是对于可更换皮肤的站点来说，这样的分离是非常必要的，只需要更换加载的theme文件即可将皮肤更换。 ## 命名规则 Layout 用`l-`或`layout-`这样的前缀，例如：`.l-header`、`.l-sidebar`。 Module 用模块本身的命名，例如图文排列的`.media`、`.media-image`。 State 用`is-`前缀，例如：`.is-active`、`.is-hidden`。 Theme 如果作为单独class，用`theme-`前缀，例如`.theme-a-background`、`.theme-a-shadow`。 Base 不会用到class和ID，是以标签选择符为主的样式，例如`p`、`a`，无需命名。 > [SMACSS官网](https://smacss.com/) > [An Introduction To SMACSS Guidelines For Writing CSS](http://www.vanseodesign.com/css/smacss-introduction/) > [Introduction to SMACSS](http://webdesign.tutsplus.com/courses/introduction-to-smacss)