CSS样式命名之“逻辑块命名法”_Div+CSS教程

当我们依照结构与内容分离的思想去切出一个符合标准的网页时，每个人可能都有自己的样式命名习惯。

但这种不同的习惯一方面未必系统，即往往随意性比较强，容易重名造成麻烦，管理也很不方便，甚至有时候会为起个名字而发愁(呵呵，夸大了点^0^);另一方面，用在一个团队中，也会由于混乱性，而带来团队效率的降低。

再者，目前的样式命名基本上都用“英文”，极少有人用中文(来回切换输入法也很麻烦的)。如果有些人习惯于全套英文式命名的话，会对团队里英文不佳者造成一定的麻烦。因为他们要为起名去查字典，而且他们查到的单词还不一定可以准确形容被命名的块逻辑结构。比如曾经有人建议使用面包屑(crumb)来作为导航命名——故事来自两个迷路的孩子沿着撒下的面包屑找回家的英文小说典故。但是，这作为个性还行，用在团队中却绝不可取。认知不同，别人说不定也有自己的典故。

此外，还有几个忌讳之处：比如，不要出现表示方向的命名，例如“left、right、top、bottom”等等。因为一旦如果我们需要左边放右边，那么这些命名将完全失去作用，反而成为了混淆我们认知的垃圾。

下面我提出一种命名系统设想(逻辑块命名法)供大家参考：

<div id="a1">　<!--第１层--> 
　　　<div id="a1a">　<!--第２层--> 
　　　　 <div id="a1a1">　<!--第３层--> 
　　　　　 <div id="a1a1a">　<!--第４层--> 
　　　　　　 <ul id="a1a1a1">　<!--第５层--> 
　　　　　　　 <li class="li01"><a>邮箱列表１</a></li>　<!--类似li的重复性标签使用“类”--> 
　　　　　　　 <li class="li02">邮箱列表１</li>　<!--类名视需要添加，如导航的话就加全以便增强控制。--> 
　　　　　　 </ul> 
　　　　　 </div> 
　　　　 </div> 
　　　　 <div id="a1a2">　<!--第３层--> 
　　　　　 <div id="a1a2a">　<!--第４层--> 
　　　　　　 <ul id="a1a2a1">　<!--第５层--> 
　　　　　　　 <li><a>邮箱列表１</a></li> 
　　　　　　　 <li><a>邮箱列表１</a></li> 
　　　　　　 </ul> 
　　　　　 </div> 
　　　　 </div>　 
　　　 </div> 
　　</div>　 

注：

(1)类样式的控制：“#相邻外层id名 .(标签名)(序列数字) {}”。比如“#a1a1a1 .li01 {}”。

(2)超链接的控制：“#相邻外层id名 [类名] a {}”，类名可选。比如“#a1a1a1 .li01 a {}”。

解释：

1、最外层嵌套：a(x)。

说明：意思是区域x。括号内是数字，从“1”开始。

2、第二层嵌套：a(x)(a)。

说明：第二个括号内是单个字母，从“a”开始。

3、第三层嵌套：a(x)(a)(x)。

4、第四层嵌套：a(x)(a)(x)(a)。

说明：四层DIV逻辑块嵌套已足够复杂，可应付绝大部分网站(包括门户型)的需要了。当然，如必要，可继续增加“(x)”和“(a)”。

5、“页头、页脚、导航”：导航算在页头里，页头使用“head(x)”。页脚使用“foot(x)”。

6、首页样式单独列出，不使用外置的样式表，直接加到首页“head”区。因为首页访问量通常比较大，为避免样式加载失败出现裸页，及首页的样式往往与其他页不同，故单独处理。命名规则是“a(x)”(区域x)开头。

另外，全站页面相似的博客类网站可以看做没有首页，即把首页作为频道页之一。

7、其他页的样式调用外部样式文件。

样式表公用部分：页头、页脚及通用定义单独提出来作为base.css加载。base.css的加载顺序为所有样式的第一位。

其他页再各自链接各自的样式表，比如“c(x).css”(频道页，样式命名规则：c(x)开头)，“cc(x).css”(频道内容页，样式命名规则：cc(x)开头)，像新浪之类大网站的频道，因为各自不同，就需要使用“c(x).css”。

注：样式表的文件名中的“x”只指频道x，样式命名中的“x”则只指“区域x”。

8、关于样式重复利用的规则。

首页因单独处理故排除，只考虑频道页“c(x).css”、频道更多页“m(x).css”、内容页“cc(x).css”等有大量逻辑块重复时的情况(少量重复的情况也不考虑)，此时全部样式总字节数很小，可以考虑合并为一个样式表文件。

选择其中一个频道作为基本页，建议使用第一个频道。样式表的文件名是“c.css”，样式命名规则是“c(x)”。注：这里的“x”不是指“频道x”，而是指“频道页区域x”。

(1)频道页局部样式发生改变：在对应的样式命名上加后缀“_c(x)”，x指“频道x”。

(2)更多页局部样式发生改变：在对应的样式命名上加后缀“_m(x)”，x指“频道x更多”。

(3)内容页局部样式发生改变：在对应的样式命名上加后缀“_cc(x)”，x指“频道x内容”。

注：页头、页脚规则同样。另，改样式命名的时候需要把其内层逻辑块样式命名同时改变——加同样后缀。而且如果局部样式更改后，比公用的多出几个逻辑块，则也需要在命名后加同样的识别后缀。

9、表单样式。命名规则：id名=name值。可以单独处理成“form.css”，但为减少不必要的http连接数，及其数量通常很少，故建议放到base.css里。多个表单时加后缀“_form(x)”。

10、加足“id”与“class”，不能出现逻辑块遗漏及跳跃，并要求每一个有可能在未来需要它在必要的时候发生一些变化的页面标签都可以被样式直接控制到，比如某个li标签下的的第三个span标签。

11、如果觉得外部样式表文件名使用数字不爽，或者经常改变栏目数量，则可以修改“c(x).css”规则为“c_news.css”之类的。不过页面样式命名具体规则不变，仍使用“c(x)”(频道页区域x)，只在加后缀时顺应新规则“_c_(channel)”。

12、假如网站完成后需求变动，比如增加或删除新闻栏目：删除时样式命名不变;增加的时候，照逻辑块嵌套顺序写样式名，再在后边加上修改时间后缀“_070908”，以规避重名。

13、其实这种命名法还可在某些情况下简化后台程序的设计，但请小心使用，否则可能会造成后患。另一大好处：也将会使得所有的页面代码被统一化，无论啥站，都一个样，根本不用重新适应。^0^

这个命名法定名“逻辑块命名法”，适合建站量较大或懒得想英文者。其基础建立在按逻辑块切图的思想上，逻辑块切图流程见拙作“写一个稍有语义的易换肤的标准化网页”一文。

整站例子：www.dizyh.cn。欢迎大家提意见。

顺带多说两句其它：如果不考虑页面在不同分辨率下的居中，代码将会简化并高效许多。比如左右两个逻辑块，如果考虑居中，我们需要在其外层加个大逻辑块把左右两个逻辑块圈起来。若不考虑居中，则直接一个清除右浮动就搞定了，还优化了显示速度。

注意，我们不能把body的宽度设置为800px并居中来简化逻辑嵌套层次。因为调整浏览器窗口大小时，最外层被相对定位的内容块将会不随之相对改变位置，必须得重新刷新才行。