Web前端规范--CSS规范

2019独角兽企业重金招聘Python工程师标准>>>

1、 从外部文件加载CSS，尽可能减少文件数。加载标签必须放在文件的head 部分。

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

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

4、 每个样式属性后加 ";"

5、合并margin、padding、border的设置，尽量使用缩写法，比如margin:0 10px 0 10px;

6、如果没有边框时，不要写成 border:0，应该写成 border:none。

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

8、书写顺序：

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

大小(width, height, padding, margin)

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

背景(background, border等)

其他(animation, transition等)

9、 　去掉小数点前的“0” 。比如：

padding-left:.8em;

10、 尽量不缩写，除非一看就明白的单词。

11、 一律小写。

12、CSS样式表文件命名

　　主要的 master.css

　　模块 module.css

　　基本共用 base.css

　　布局、版面 layout.css

　　主题 themes.css

　　专栏 columns.css

　　文字 font.css

　　表单 forms.css

　　补丁 mend.css

　　打印 print.css

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

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

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

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

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

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

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

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

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

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

转载于:https://my.oschina.net/CharmyZ/blog/761233