SMACSS:一个关于CSS的最佳实践-1.Overview

什么是SMACSS？

　　SMACSS(发音"smacks")，全称Scalable and Modular Architecture for CSS。顾名思义，SMACSS是一个可扩展的，模块化的CSS架构。它不是一个CSS框架，而是一个指南，一个CSS设计的最佳实践。SMACSS旨在规范一种统一的CSS开发方式，以便开发人员能够更好的开发和维护CSS代码。

为什么要SMACSS？

　　对于软件系统来说，不管使用何种语言，何种编程思想，有几个要求总是永恒不变的：可重用，可扩展，可维护。对于小项目来说，痛点并不明显。但随着项目规模的增大，难重用，难扩展，难维护的痛点越来越被放大，这个时候，一个良好的架构就至关重要。SMACSS可以帮助我们以更良好的模式来设计开发CSS，从而达到可重用，可扩展，可维护的目的。SMACSS适合任意规模的项目，而不必担心过度设计。

SMACSS最佳实践

　　目前有一种设计思路很好的解决了可重用，可扩展，可维护的问题，那就是面向对象设计(OO)。许多设计无非是贯彻了OO编程思想，SMACSS也不例外。下面简单介绍些SMACSS的主要内容：

1.分类CSS规则

　　任何项目都需要良好的组织。没有规划，没有组织的往文件里面添加CSS规则会对后期的开发和维护带来严重的阻碍。

　　SMACSS的核心是分类CSS规则，通过分类，我们可以将CSS规则归为不同的模式，并对每种模式定义更好的实践。SMACSS将CSS规则分为以下5类：

Base
Layout
Module
State
Theme

我们经常不会区分CSS规则的类别，而将所有的CSS规则写在一块。SMACSS的这种行为其实正是OO所谓的封装和模块化。封装的好处显而易见。SMACSS针对每个类别都提出了最佳实践。

　　Base规则指的是默认的CSS规则，比如说一些Normalize或者Reset之类的CSS。本质上说，base style指的是不管element是否在页面上，它都应该长这样。

1 html, body, form { margin: 0; padding: 0; }
2 input[type=text] { border: 1px solid #999; }
3 a { color: #039; }
4 a:hover { color: #03C; }

Examples of Base Styles

　　Layout规则负责页面的布局，layout可以包含一个或多个modules。

　　Module规则是模块化的，可重用的CSS规则。它们可以是菜单，弹出框，产品列表等等。

　　State规则描述的是layouts或modules的一个特殊的状态，hidden或是expanded？active或是inactive?

　　Theme规则顾名思义，它指的是所有layouts和modules的look and feel。当然，很多网站不需要Theme.css来提供更多的网站主题。

2.规范命名规则

　　通过命名规则，我们可以快速的知道一个CSS规则属于什么类别。在大型项目中，CSS规则往往细分在许多文件中，在这种情况下，命名规则可以帮助我们快速的找到对应的文件。

　　对于layout规则，一般使用 l- 或 layout- 作为前缀。对于state规则，一般使用 is- 作为前缀，比如 .is-hidden 或 .is-collapsed 。modules规则作为最主要的一类css规则，如果使用 module- 作为前缀，会显得有些冗余，所以SMACSS建议直接使用module名称，而不需要任何前缀。

/* Example Module */
.example { }
/* Callout Module */
.callout { }
/* Callout Module with State */
.callout.is-collapsed { }
/* Form field module */
.field { }
/* Inline layout */
.l-inline { }

3.选择符书写建议

　　SMACSS简单的介绍了浏览器是如何解析CSS的，并基于此对如何书写选择符以及优化选择符性能，提出了建议。

结束语

　　本文给出了SMACSS的overview，希望读者能对SMACSS有个全局的了解。SMACSS的具体内容将会在后面的文章陆续放出，尽请期待。

前端工匠