成都全搜索前端开发

CSS 规范

为加强前端开发组内部的融合，并提高工作效率，前端开发组以

W3C 的标准为基础，

结合自身实际情况初步制定出成都全搜索前端开发

CSS 规范，望大家遵循以下规范编写代

码。

布局结构

普通布局的结构：

<div id=”page”>

<div id=”header”></div>

<div id=”content”>

<div class=”col-sub”></div>

<div class=”col-main”></div>

<div class=”col- extra”></div>

</div>

<div id=”footer”></div>

</div>

栅格布局的命名（

.grid-sXm0eY）规则如下：

 

当单元列的宽度为

40px 的倍数时，

sX 

 

表示

col-sub 

 

的宽度

= X * 40 - 10，

eY 

 

表示

col-extra 

 

的宽度

= Y * 40 - 10，

m0 

 

表示

col-main 

 

的宽度

= 

 

总宽度

- (X + Y) * 40，

s-m-e 的顺序，表示各列的排列顺序。

 

比如：总宽为

950px 时，.grid- s5m0 e6 

 

表示

col-sub(190)| col-main(520) | col-

extra(230)。

命名方法

id 和 class 命名采用该版块的英文单词或组合命名，使用英文命名原则，尽量不缩写，

除非一看就明白或特别长的单词，使用横线分隔命名方法，

css 名中的每一个单词间横线

线来分隔。例如：

#page{}，.sidebar-tips{}

。

一些常用的命名单词：

 

容 器：

box

主体内容：

main