什么是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; }
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的具体内容将会在后面的文章陆续放出，尽请期待。