前端css规范
代码规范
文件一般性命名
css文件使用小写字母，复合词以 - 分隔; 例如 nav.css.1.0.0 , login-nav.1.0.2.css , login-page.2.1.1.css
版本1.0.0说明，从左到右：
bug修复，小范围修改最后一位数字加1
小版本更新，第二位数字加1
大版本更新，第一位数字加1
id 和类的命名
命名规则
ID使用小驼峰式命名，例如：
|
1
|
<div id=”myTest”></div> |
class使用下划线或中线分割命名，例如：
|
1
|
<div class=”my_test”></div> |
|
1
|
<div class=”my-test”></div> |
为 id 和样式类使用有意义或通用的名字，避免由于 css 命名更改引起的不必要的文档或模板改变；例如 :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
/* 不推荐： 无意义 */#yee-1901 {}/* 不推荐： 表现层的命名 */.button-green {}/* 推荐: 具体 */#gallery {}#login {}.video {}/* 推荐: 通用 */.effect {}.alt {} |
id 和 class 的命名长度应该适中，不要太简略也不要太详细；例如:
|
1
2
3
4
5
6
7
8
9
|
/* 不推荐 */#navigation {}.atr {}/* 推荐 */#nav {}.author {} |
元素选择器
为了 性能原因 ， 请避免元素选择器和类选择器以及 id 选择器混用;
例如
|
1
2
3
4
5
6
7
8
9
|
/* 不推荐 */ul#example {}div.error {}/* 推荐 */#example {}.error {} |
简写属性名字
为了提高可读性，尽可能的使用简写属性。例如
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
/* 不推荐 */border-top-style: none;font-family: palatino, georgia, serif;font-size: 100%;line-height: 1.6;padding-bottom: 20px;padding-left: 10px;padding-right: 10px;padding-top: 0;/* 推荐 */border-top: 0;font: 100%/1.6 palatino, georgia, serif;padding: 0 10px 20px; |
0和单位
对属性值为 0 的情况省略单位；例如
|
1
|
{margin: 0;padding: 0;} |
0 前缀情况
省略属性值中的 0 前缀;例如
|
1
|
font-size: .8em; |
16 进制的颜色值表示
尽可能使用 3 个字符的 16 进制颜色值；例如
|
1
2
3
4
5
6
7
|
/* 不推荐 */color: #ff6600;/* 推荐 */color: #f60; |
前缀
为了防止冲突，对于应用特定的样式附加应用前缀；例如
|
1
2
3
|
.login-help {} /* login page */#detail-note {} /* detail page */ |
格式规范
块的内容应该被缩进；例如
|
1
2
3
4
5
6
7
|
@media screen, projection { html { background: #fff; color: #444; }} |
分号
使用分号结束单个属性的定义；例如
|
1
2
3
4
5
6
7
8
9
10
11
12
|
/* 不推荐 */.test { display: block; height: 100px}/* 推荐 */.test { display: block; height: 100px;} |
空格
在属性名冒号后加一个空格，例如
|
1
2
3
4
5
6
7
8
9
10
11
|
/* 不推荐 */.test { display:block;}/* 推荐 */.test { display: block;} |
空行
多个选择以及声明间以行分隔；例如
|
1
2
3
4
5
6
7
8
9
10
11
|
/* 不推荐 */a:focus, a:active { position: relative; top: 1px;}/* 推荐 */h1,h2,h3 { font-weight: normal; line-height: 1.2;} |
引号
尽可能的不用引号，迫不得已时使用单引号.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
/* 不推荐 */@import url("//www.google.com/css/maia.css");html { font-family: "open sans", arial, sans-serif; background: url("http://img1.40017.cn/cn/c/home/2013/cnHomePage.0.0.1.png") 0 0 no-repeat;}/* 推荐 */@import url(//www.google.com/css/maia.css);html { font-family: 'open sans', arial, sans-serif; background: url(http://img1.40017.cn/cn/c/home/2013/cnHomePage.0.0.1.png) 0 0 no-repeat;} |
注释
成组的 css 规则间用块状注释和空行分离;例如
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
/* Header */#login-header {}#login-header-below {}/* Footer */#login-footer {}#login-footer-below {}/* Gallery */.login-gallery {}.login-gallery-other {} |
（推荐）属性的书写顺序, 举个例子:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
.hotel-content { /* 定位 */ display: block; position: absolute; left: 0; top: 0; /* 盒模型 */ width: 50px; height: 50px; margin: 10px; border: 1px solid black; / *其他* / color: #efefef; } |
1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
6.CSS3属性
|
1
|
transform/transition/animation/box-shadow/border-radius |
按照这样的顺序书写可见提升浏览器渲染dom的性能，如图片大小设置，可以减少重绘或回流，提高页面性能。
链接的样式，（务必）按照这个顺序来书写
|
1
|
a:link -> a:visited -> a:hover -> a:active |
（禁止）使用行内（inline）样式
|
1
|
<p style="color: #ffffff;">W3Cfuns</p> |
像这样的行内样式，最好用一个class代替。又如要隐藏某个元素，可以给他加一个class
|
1
2
3
|
.hide { display: none;} |
不要使用@import
与 <link> 标签相比， @import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。
替代办法有以下几种：使用多个 <link> 元素；通过Sass 或Less 类似的CSS 预处理器将多个CSS 文件译为一个文件
媒体查询（Media query ）的位置和修改
修改页面样式时，注意媒体查询中的样式是否需要修改。
如果使用CSS3的属性，如果有必要加入浏览器前缀，则按照
|
1
|
-webkit- / -moz- / -ms- / -o- / std |
的顺序进行添加，标准属性写在最后，并且属性名称要对齐，例如：
|
1
2
3
4
5
6
|
div.animation-demo { -webkit-animation: mymove 5s infinite; -moz-animation: mymove 5s infinite; -o-animation: mymove 5s infinite; animation: mymove 5s infinite;} |
浙公网安备 33010602011771号