Web前端规范--CSS规范

一、 从外部文件加载CSS，尽量减小文件数。加载标签必须放在文件的head 部分。

二、 用 link 标签加载，不要用@import加载样式表。

三、 定义样式的时候，对样式在页面只出现一次的元素用id，其余的用class。

四、 每一个样式属性后加 ";"

五、合并margin、padding、border的设置，尽可能使用缩写法，好比margin:0 10px 0 10px;

六、若是没有边框时，不要写成 border:0，应该写成 border:none。

七、使用text-indent来隐藏文本内容。

八、书写顺序：

位置属性(position, top, right, z-index, display, float等)

大小(width, height, padding, margin)

文字系列(font, line-height, letter-spacing, color- text-align等)

背景(background, border等)

其余(animation, transition等)

九、 　去掉小数点前的“0” 。好比：

padding-left:.8em;

十、 尽可能不缩写，除非一看就明白的单词。

十一、 一概小写。

十二、CSS样式表文件命名

　　主要的 master.css

　　模块 module.css

　　基本共用 base.css

　　布局、版面 layout.css

　　主题 themes.css

　　专栏 columns.css

　　文字 font.css

　　表单 forms.css

　　补丁 mend.css

　　打印 print.css

1三、不要在html 中加入标签来清除浮动，经过在浮动元素的父元素上添加.clearfix 来清除浮动：

.clearfix:dfter{content:”.”; display:block;height:0;visibility:hidden;clear:both;}.clearfix{zoom:1}

1四、不须要重复定义可继承的值，css中，子元素自动继承父元素的属性值，如颜色、字体等，已经在父元素中定义过的，在子元素中能够直接继承，不须要重复定义，除非是为了更变当前元素样式不使用父元素的属性值。

1五、 禁止将样式写为单行 。 每一个声明换行。

1六、 让规则越具体越好。尽可能不要使用 ul li a 这样长的选择符，最好使用 .list-anchor 之类的选择符。

1七、 属性名的冒号后使用一个空格。出于一致性的缘由，属性和值（但属性和冒号之间没有空格）的之间始终使用一个空格。

1八、 每一个选择器和属性声明老是使用新的一行。 如：

h1,
    h2,
    h3 {
      font-weight: normal;
      line-height: 1.2;
    }

1九、 属性选择器或属性值用双引号（””），而不是单引号（”）括起来。URI值（url()）不要使用引号。

20、字体名称最好映射成对应的英文名，例如：黑体(SimHei) 宋体(SimSun) 微软雅黑(Microsoft Yahei)。