标签：style blog http color 使用 strong for ar
css
最近公司里刚好要搞一下css重构，把原来的css结构改掉，改成sass推荐的方式，然后看了下关于如何管理设计css架构。
参考地址： http://smacss.com/book
前面有讲过css的分离，看了这个以后感觉想法还是有点幼稚，css架构设计主要是为了后期开发的快捷便利，对于大型富应用网站搭建有奇效，小型的网站用这个效果可能不明显。。。
css主要可以分为5层：
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‘，一切就结束了。大大提高开发效率，多偷会懒 ^_^
标签：style blog http color 使用 strong for ar
原文地址：http://www.cnblogs.com/cyITtech/p/3918135.html
