CSS样式编写规范语法：用两个空格来代替制表符（tab），具体视开发而定设置文件编码为 UTF-8 为选择器分组时，

语法：

用两个空格来代替制表符（tab），具体视开发而定
设置文件编码为 UTF-8
为选择器分组时，将单独的选择器单独放在一行
为了代码的易读性，在每个声明块的左花括号前添加一个空格
声明块的右花括号应当单独成行
每条声明语句后应该插入一个空格
为了获得更准确的错误报告，每条声明都应该独占一行
所有声明语句都应当以分号结尾
对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，box-shadow）
不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）
对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）
十六进制值应该全部小写，例如，#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分
尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff
为选择器中的属性添加双引号，例如，input[type="text"]
避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;



/* Bad */

.selector, .selector-secondary, .selector[type=text] {

    padding:15px;

    margin:0px 0px 15px;

    background-color:rgba(0, 0, 0, 0.5);

    box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF

}



/* Good */

.selector,

.selector-secondary,

.selector[type="text"] {

    padding: 15px;

    margin-bottom: 15px;

    background-color: rgba(0,0,0,.5);

    box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;

}

Class命名

class命名简短明确，语义化
避免过度简写，如：.s .r .t
命名使用英文，class、id都需小写，名称间隔使用 - 符号
禁止使用特殊字符和id定义样式
建议统一使用业务头部字段比如：kifp为样式前缀，参考BEM命名规则


.kifp-button-primary {

    ....

}

.kifp-button-default {

    ....

}

组件命名

基础命名规范还是参考上面【class命名】，但组件有其业务特殊性还需参考相应的规范，下面以Kicp(内部一个项目)项目为例：

规范：

通用型组件命名：==kicp-comp-组件名-组件状态==

活动模块命名：==kicp-act-模块名-模块状态==

（comp为component缩写，act为active缩写）

通用型组件特性：

具有复用性，可运用于平台类H5、游戏内页面、运营活动内，命名需要具备一定复杂度，以降低耦合度

组件样式不能污染外部组件，并且也不能受到外部样式干扰

申明顺序

相关的属性声明应当归为一组，并按照下面的顺序排列：

Positioning(定位)
Box model(盒模型)
Typographic(排版)
Visual(视觉)
Misc(其他设置)

由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在

首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。

其他属性只是影响组件的内部或者是不影响前两组属性，因此排在后面。


.declaration-order {

     /* Positioning */

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    z-index: 100;
    /* Box-model */

    display: block;

    float: right;

    width: 100px;

    height: 100px;

    /* Typography */

    font: normal 13px "Helvetica Neue", sans-serif;

    line-height: 1.5;

    color: #333;

    text-align: center;



     /* Visual */

    background-color: #f5f5f5;

    border: 1px solid #e5e5e5;

    border-radius: 3px;

    /* Misc */

    opacity: 1;

}

媒体查询（Media query）的位置

将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了，将来只会被大家遗忘。


.element {

    ...

}

.element-avatar {

    ...

}

.element-selected {

    ...

}


@media (min-width: 480px) {

    .element {

        ...

    }

    .element-avatar {

        ...

    }

    .element-selected {

        ...

    }

}

带前缀的属性

当使用特定厂商的带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑。


/* Prefixed properties */

.selector {

    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);

    box-shadow: 0 1px 2px rgba(0,0,0,.15);

}

简写形式的属性声明

在需要显示地设置所有值的情况下，应当尽量限制使用简写形式的属性声明。常被滥用的简写属性如下：

padding
margin
font
background
border
border-radius

大部分情况下，我们不需要为简写形式的属性声明指定所有值。例如，HTML 的标题元素只需要设置上、下边距

（margin）的值，因此，在必要的时候，只需覆盖这两个值就可以了。 0 值表示对浏览器默认值或以前指定的值的

覆盖。

过多地使用属性的简写形式会导致代码出现不必要的覆盖和意外的副作用。


/* Bad example */

.element {

    margin: 0 0 10px;

    background: red;

    background: url("image.jpg");

    border-radius: 3px 3px 0 0;

}



/* Good example */

.element {

    margin-bottom: 10px;

    background-color: red;

    background-image: url("image.jpg");

    border-top-left-radius: 3px;

    border-top-right-radius: 3px;

}

代码组织

制定一致的注释规范，尽可能的以模块化和组件化来组织代码段。


/* 头部导航栏 */

.header-nav {

    ...

}

公共样式和特殊样式的抽离

reset.css
屏幕orientation
样式链接引用统一选择云默认加速域名 image-1251917893.file.myqcloud.com、


/* 只有横屏的情况下，页面在竖屏打开时提示横屏观看样式 */

@media all and (orientation:landscape){

    html,body{
        position:relative;
        overflow:hidden;
        width:100%;
        height:100%;
        padding:0;
        margin:0;
     }

    html::before{
        content:"";
        position:fixed;
        top:0;
        left:0;
        height:100%;
        width:100%;
        background:#333;
        zindex:99999;
    }


    html::after{
        content:"\4E3A\4E86\66F4\597D\7684\4F53\9A8C\FF0C\8BF7\5C06\624B\673A\7AD6\8FC7\6765";
        align:center;
        fontsize:16px;
        color:#fff;
        position:absolute;
        top:50%;
        left:0;
        height:30px;
        width:100%;
        margin-top:50px;
        zindex:99999;
    }

    body::before{
        content:"";
        position:absolute;
        zindex:99999;
        height:200px;
        width:100px;
        left:50%;
        top:50%;
        margin:-140px 0 0 -50px;
        color:#fff;
        backgroundimage:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAB2CAYAAAAZUrcsAAAAGXRFWHRTb2Z0d2FyZ") repeat:no-repeat;
        background-position:center center;
        background-size:100px auto;
        -webkittransform:rotateZ(-90deg);
     }

 }



/* 只有竖屏的情况下，页面在横屏打开时提示竖屏观看样式 */

@media all and (orientation:portrait){

 html,body{
     position:relative;
     overflow:hidden;
     width:100%;
     height:100%;
     padding:0;
     margin:0;
 }

    html::before{
        content:"";
        position:fixed;
        top:0;
        left:0;
        height:100%;
        width:100%;
        background:#333;
        zindex:99999;
    }

    html::after{
        content:"\4E3A\4E86\66F4\597D\7684\4F53\9A8C\FF0C\8BF7\5C06\624B\673A\6A2A\8FC7\6765";
        top:30px;
        z-index:99999;
        text-align:center;
        font-size:16px;
        color:#fff;
    }

    body::before{
        content:"";
        position:absolute;
        zindex:99999;
        height:200px;
        width:100px;
        left:50%;
        top:50%;
        margin:-160px 0 0 -50px;
        color:#fff;
        backgroundimage:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAB2CAYAAAAZUrcsAAAAGXRFWHRTb2Z0d2FyZ");
        background-repeat:no-repeat;
        background-position:center center;
        background-size:100px auto;
     }