模块化css技巧
1.扩展
通用模块是不需要写margin的。如果要做好几种格式的宽度，该怎么办？
html:
<div class="baseMod"></div>
css:
.baseMod{color:#333;line-height:1.5;padding:10px;background:#f00;}
a.
在需要的html结构中给body设置类型。假如有类型1,2,3,4...,设置type1,type2,type3,type4.
则,<body class="type1"></body>...省略n字
在css中要这么干：
.type1 .baseMod{width:300px;} .type2 .baseMod{width:400px;} .type3 .baseMod{width:500px;}
b.
把宽度写在全局css中.
.w300{width:300px;} .w400{width:400px;} .w500{width:500px;}
然后在结构中这么干：
<div class="baseMod w300"></div> <div class="baseMod w400"></div> <div class="baseMod w500"></div>
c.
定义局部样式,.type1,.type2,.type3{width:...}
然后结构中这么干:
<div class="baseMod type1"></div> <div class="baseMod type2"></div> <div class="baseMod type3"></div>
可能有人会觉得b,c没有什么差别，基本是一个方法。没错，我也这么觉得。但是差异还是有的。一方面是css作用域的差异，另一方面是css面向对象（type1,type2,type3就属于具体的模块类型名，baseMod只是一个通用的基类）和面向属性（只是针对宽度的写法，w300,w400,w500,想给哪里用，就给哪里用，但是不一定能成功，你懂的）的差异。b,c方法的好坏，下一个问题将会阐述。
2.重写和扩展
css重写就是把继承或者已有的某个样式规则给干掉，重新换上另一种样式声明。比如,
html:
<div class="baseMod type1"></div>
css:
.type1{color:#666;}
type1模块就把已有的样式color:#333;给干掉了,因为在css权重一致的情况下,.type1的声明在.baseMod声明之后。
好第二个问题就是重写和扩展。我的意思是这样：
a.
.type1{color:#666;background:#fefefe;width:300px;} .type2{color:#777;background:#efefef;width:400px;} .type3{color:#888;background:#ccc;width:500px;}
再这样:
<div class="baseMod type1"></div>
而不是这样：
b.
.color666{color:#666;} .w300{width:300px;} .bgfefefe{background:#fefefe;}
...其它省略
然后再这样
<div class="baseMod color666 w300 bgfefefe "></div>
(太傻比了)
所以,在这个问题下b做法(原子类css拼合)就容易使得结构臃肿了,而且修改起来十分麻烦,需要针对结构去动,还要改动css,而第二种方法修改的只是css,不需要动结构.
因此,在这里,第一个扩展的问题,b,c哪两种方法好,就有答案了,结论如下：
- 通用模块只存在扩展,并且扩展的可能性（比如以宽度规格来说,有10种）有n多种(n>=3),采用a做法,即面向对象的命名方式.
- 通用模块存在扩展和重写,采用a做法,即面向对象的命名方式.
- 通用模块只存在扩展,并且扩展的可能性（比如以宽度规格来说,有3种）有n多种(n<=3),采用a做法,即面向属性的命名方式
结语：从语义化的角度来看，原子类的使用是不恰当的，请规避。