CSS规范

1. 样式表编码

• 样式文件必须写上 @charset 规则，并且一定要在样式文件的第一行首个字符位置开始写，编码名用 “UTF-8”
• 字符 @charset “”; 都用小写字母，不能出现转义符，编码名允许大小混写
• 考虑到在使用“UTF-8”编码情况下 BOM 对代码的污染和编码显示的问题，在可控范围下，坚决不使用 BOM。

    @charset "UTF-8";
    .fs{}

2. 代码格式化

• 样式书写一般有两种：一种是紧凑格式 (Compact)；统一使用展开格式书写样式
• 统一使用四个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）
• 每个属性声明末尾都要加分号；

推荐

.fs{
    display: block;
    width: 50px;
}

不推荐

    .fs{ display: block;width: 50px;}
    .nav{ 
      display: block;
      width: 50px;
    }
    .head{ 
      display: block;
      width: 50px
    }

3. 选择器

• 尽量少用通用选择器 *
• 不使用 ID 选择器
• 不使用无具体语义定义的标签选择器

推荐

.fs {}
.fs li {}
.fs li p{}

不推荐

*{}
#fs {}
.fs div{}

4. 代码易读性

左括号与类名之间一个空格，冒号与属性值之间一个空格

推荐

.fs { 
    width: 100%; 
}

不推荐

.fs{ 
    width:100%;
}

逗号分隔的取值，逗号之后一个空格

推荐

.fs {
    box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}

不推荐

.fs {
    box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
}

为单个css选择器或新申明开启新行

推荐

.fs, 
.fs-logo, 
.fs-hd {
    color: #ff0;
}
.nav{
    color: #fff;
}

不推荐

.fs,fs-logo,.fs-hd {
    color: #ff0;
}.nav{
    color: #fff;
}

颜色值 rgb() rgba() hsl() hsla() rect() 中不需有空格，且取值不要带有不必要的 0

推荐

.fs {
    color: rgba(255,255,255,.5);
}

不推荐

.fs {
    color: rgba( 255, 255, 255, 0.5 );
}

属性值十六进制数值能用简写的尽量用简写

推荐

.fs {
    color: #fff;
}

不推荐

.fs {
    color: #ffffff;
}

不要为 0 指明单位

推荐

.fs {
    margin: 0 10px;
}

不推荐

.fs {
    margin: 0px 10px;
}

5. 属性书写顺序

WechatIMG4112.jpeg

/* css声明顺序案例 */
.test{
        z-index: 1;
        position: absolute;
        float: right;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        
        overflow: hidden;
        display: block;
        width: 100px;
        height: 100px;
        margin: 10px;
        padding: 10px;
        border:1px solid #f5f5f5;
        border-radius: 3px;
        box-sizing: border-box;
        
        line-height: 1.5;
        text-align: center;
        background: #fff url(test.jpg) center no-repeat; // 推荐简写
        background-position:'center';
        background-image:url(test.jpg);
        background-color: #fff;
        background-size: 30px 30px;
        background-repeat:'no-repeat';
        color: #fff;
        opacity: 1;
        font: normal 13px 'Helvetica Neue',sans-serif;
        vertical-align: center;
        white-space: nowrap;
        word-break: break-all;
        cursor: pointer;
        
        /* 其他css3新增属性 */
        transform：roate（45deg）;
        transition: all .2s;
        box-shadow: 0 0 0 rgba(0,0,0,.5);
        text-shadow: 0 0 0 rgba(0,0,0,.5);
    }

6.CSS3浏览器私有前缀写法

CSS3 浏览器私有前缀在前，标准前缀在后

.fs {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

7.单行注释

注释内容第一个字符和最后一个字符都是一个空格字符，单独占一行，行与行之间相隔一行

推荐

/* Comment Text */
.fs{}
/* Comment Text */
.fs{}

不推荐

/*Comment Text*/
.fs{
    display: block;
}
.fs{
    display: block;/*Comment Text*/
}

8.模块注释

注释内容第一个字符和最后一个字符都是一个空格字符，/* 与 模块信息描述占一行，多个横线分隔符-与*/占一行，行与行之间相隔两行

推荐

/* Module A
---------------------------------------------------------------- */
.mod-a {}
/* Module B
---------------------------------------------------------------- */
.mod-b {}

不推荐

/* Module A ---------------------------------------------------- */
.mod-a {}
/* Module B ---------------------------------------------------- */
.mod-b {}

9.文件信息注释

在样式文件编码声明 @charset 语句下面注明页面名称、作者、创建日期等信息

@charset "UTF-8";
/**
 * @desc File Info
 * @author Author Name
 * @date 2015-10-10
 */

10.移动端重置样式

* { -webkit-tap-highlight-color: transparent; outline: 0; margin: 0; padding: 0; vertical-align: baseline;box-sizing:border-box; }
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; vertical-align: baseline; }
img { border: 0 none; vertical-align: top; }
i, em { font-style: normal; }
ol, ul { list-style: none; }
input, select, button, h1, h2, h3, h4, h5, h6 { font-size: 100%; font-family: inherit; }
table { border-collapse: collapse; border-spacing: 0; }
a { text-decoration: none; color: #666; }
body { margin: 0 auto; min-width: 320px; max-width: 640px; height: 100%; font-size: 14px; fon-family: -apple-system,Helvetica,sans-serif; line-height: 1.5; color: #666; -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; }
input[type="text"], textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

11.PC端重置样式

html, body, div, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, li, fieldset, form, label, input, legend, table, caption, tbody, tfoot, thead, tr, th, td, textarea, article, aside, audio, canvas, figure, footer, header, mark, menu, nav, section, time, video { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal }
article, aside, dialog, figure, footer, header, hgroup, nav, section, blockquote { display: block; }
ul, ol { list-style: none; }
img { border: 0 none; vertical-align: top; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: none; }
table { border-collapse: collapse; border-spacing: 0; }
strong, em, i { font-style: normal; font-weight: normal; }
ins { text-decoration: underline; }
del { text-decoration: line-through; }
mark { background: none; }
input::-ms-clear { display: none !important; }
body { font: 12px/1.5 \5FAE\8F6F\96C5\9ED1, \5B8B\4F53, "Hiragino Sans GB", STHeiti, "WenQuanYi Micro Hei", "Droid Sans Fallback", SimSun, sans-serif; background: #fff; }
a { text-decoration: none; color: #333; }
a:hover { text-decoration: underline; }