css

最近公司里刚好要搞一下css重构，把原来的css结构改掉，改成sass推荐的方式，然后看了下关于如何管理设计css架构。

参考地址： http://smacss.com/book

前面有讲过css的分离，看了这个以后感觉想法还是有点幼稚，css架构设计主要是为了后期开发的快捷便利，对于大型富应用网站搭建有奇效，小型的网站用这个效果可能不明显。。。

css主要可以分为5层：

1. Base
2. Layout
3. Module
4. State
5. Theme

Base：

Base是全站的基础，在base样式里边，基本不会用class和id，它只是规定了元素应该以什么方式显示。经常使用的reset就应该归属于base的一部分了。然后还可以包括body的background之类的。

Layout：

Layout主要是页面上主要的布局，比如说header，footer。这个主要是相对于loginForm之类的来说的，loginForm归于一个module了，这个后面说。Layout有大有小，像header之类的大型Layout一般会使用ID来做布局定义

#header, #article, #footer {    width: 960px;    margin: auto;}

而小的Layout会是一种以class定义的形式出现，这样就可以在页面上无影响的多次使用了

Layout这里会有一个以class开头还是以ID开头的烦恼。在css里，ID和class都是一样的，他们都只是为了让css对指定元素进行描绘。在有能让用户自定义页面显示的网站里，用class优势更加明显，无需考虑后面的module，state层的样式无法覆盖这一层了（子css覆盖父css）。

说这么多还不如看个例子。

这里一堆元素堆在上面，Layout就是要将网页抽象化出来：

这样，在Layout设置好了基本的展示样式后，就可以进行里面元素的填充了。

Module：

Module就是一堆可以复用的独立组件了，像登录框啊，搜索框啊，商品列表啊之类的。一堆Module的拼装就可以基本形成Layout了。Module必须是一个完全独立的组件，这样页面组装就会更灵活。

Module里面的书写一般都是用class，避免使用ID和Element。不使用ID很容易理解，但是Element不是用很多人就会很难接受。其实，Module会有许多复杂的嵌套出现，可能会出现ul套ul。如果这时候在外面定义li｛background：blue；｝，然后里面那层的li背景元素是白色，那就蛋疼了，还得写一句覆盖前面的。

如果很想用element，那就至少加一个> 即.ul-list > li ，这样弄就不会污染里面的li了。

State：

State则是为了显示当前元素的状态，比如元素隐藏啊，按钮的类型啊之类的。它需要覆盖前面Sytle。

<div id="header" class="is-collapsed">    <form>        <div class="msg is-error">            There is an error!        </div>        <label for="searchbox" class="is-hidden">Search</label>        <input type="search" id="searchbox">    </form></div>

里面的is-hidden, is-error, is-collapsed就是一种state了

state一般都是单个class作为描述的：

.is-hidden {    display: none;}

而大多数的state需要覆盖前面的Style，这样优先级可能就不够了。所以在这里，允许使用!important。

有些人会对state和module迷惑，其实state有两个很关键的点：

1.它可以被用在描述Layout和Module上

2.它经常通过js动态添加删除出现的

最重要的就是第二个点，Module在页面render以后就不会变了，而State则是会根据js的运行而变化

Theme：

要形成完整的页面css，上面几个都只是通用的组件，还需要一个对于特定页面定制化的css。

Theme就是为了这个出现的。Theme是对特定有特殊展示需求的页面进行描述的。比如某个设计师或者产品一拍脑袋说就这个页面，这个图片要旋转30度。然后你就需要在Theme这层加上关于rotate的css了

以上，就是全部了。

在团队开发中，具体的Layout，Module，State分级概念还是要不断磨合后才能统一，在体系搭建以后，后期的开发其实就是填空了，一个按钮可能你不用写任何一个样式，只要加上class=‘btn btn-block btn-blue‘，一切就结束了。大大提高开发效率，多偷会懒 ^_^