三、CSS规范

1.代码风格

• 采用utf-8编码，在css头部引用@charset"utf-8"
• 采用4个空格作为一个缩进层级，（对于这点可忽略，因为现在有许多编辑器有格式化插件）
• 选择器嵌套层级不大于3级。越后限定条件尽可能精确、
• 尽量不用@import导入css样式文件。因为相比于<links>导入，其速度较慢
• Media Query不得单独编排，必须与相应规则一起定义。

2.样式属性顺序

全局属性>定位属性>自身属性>文本样式>文本效果>背景属性>渲染属性>其他

.class-name {
    /*全局属性*/
    display: block;
    float: none;
    list-style: none;
    
    /*定位属性*/
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom:  0;
    z-index: 0;

    /*自身属性*/ 
    box-sizeing: boder-box;
    margin: 0 auto;
    padding: 0;
    width: inherit;//继承父级的
    min-width: none;
    max-width: none;
    height: inherit;
    min-height: 0;
    max-height: 0;
    border: none;
    border-radius: 0;
    
    /*文本样式*/
    font: inherit bold 12px/32px "new york";//等价于font-style: inherit; font-wight: bold; font-size: 12px;line-height: 32px;font-family: "new york";有多个这样的属性时建议采用简写形式，以减少代码行。
    color: #ffffff;
    font-size: 12px;
    font-style: inherit;
    font-family: "new york";
    font-weight: bold;

    /*文本效果*/
    line-height: 32px;
    text-align: center;
    vertical-align: center;
    white-space: normal;
    letter-spacing: normal;
    word-spacing: normal;
    word-break: break-all;

    /*背景属性*/
    background: #ffffff url('图片路径') no-repeat  60px 10px top left;
    background-clip: border-box;
    background-color: #ffffff;
    background-origin: border-box;
    background-size: 60px 10px;
    background-position: top left;

    /*渲染效果属性*/
    opacity: inherit;
    outline: none;
    box-shadow: none;
    transition: all;
    transform: inherit;
    animation: .25s,100ms;
    
    /*其他*/
    cursor: pointer;
    pointer-events: auto; 
}

上面的pointer-events属性如需了解请看CSS之pointer-events属性
ps:按照上述规范，能减少浏览器reflow(回流)，提升浏览器渲染dom的性能

3.缩写与属性值

缩写有助提高合作的小伙伴的阅读体验。

• 缩写
  可以进行缩写的属性有 padding、border、margin、font、background等。

background: color image repeat fixed left top; /*推荐*/
/*不推荐*/
background-color: #fff;//颜色有可以简写的规则
background-image: url("图片地址");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left top;

• 当数值位小数时，可以去掉小数点前面的"0"

opacity: .7;/*推荐*/
opacity: 0.7;/*不推荐*/

• "0像素"去掉后面的单位\

width: 0px;/*不推荐*/
width: 0;/*推荐*/

• 16进制的颜色代码重叠的字符可以缩写的尽量缩写。

color: #fff;/*推荐*/
color: #ffffff;/*不推荐*/

4.规则声明块样式规范

1.每条样式独占一行
2.选择器分组时，统一个组的选择器独占一行，且逗号后必须跟一个空格
3.属性名与冒号之间，不能有空格，冒号与属性之间，必须有一个空格。
4.每条样式以分号结尾。
5.右大括号'}'独占一行。
6.最外层引号用单引号' '。
7一个属性有多个属性值时，用逗号分隔，逗号后添加一个空格，属性值过长单独占一行。
8.每个规则声明间用空行分隔。

ps:现在许多开发工具都有格式化插件，所以2、3、4、7可以忽略。

5.命名规范

1.一律小写
2.英文
3.命名短且语义化
4.有多个单词的，每个单词小写然后用‘-’相连
5.不建议用下划线命名，存在兼容问题，并且js变量名也是用下划线，易混淆
6.不要滥用id标识，id是js中惟一的，不建议多次使用。应按需使用
7.统一语义理解和命名，如下所示：

• 布局：以g为命名空间
• 状态： 以s为命名空间，表示动态的、具有交互的状态。
• 工具：以u为命名空间，表示不耦合业务逻辑的、可复用的工具。
• 组件：以m为命名空间、表示可复用、移植的组件模块。
• 钩子：以j为命名空间，表示给js调用的类名。

布局(.g-)

模块(.m-)、元件(.u-)

功能(.f-)

注：个人觉得功能这块的应用不大，因为博主暂时遇到的基本上不会单独的提出功能的块（除清楚浮动的有过应用），除非是那种一键换肤的。

皮肤(.s-)

状态(.z-)

6.注释规范

/*开始*/
  内容
/*结束*/

未完待续......

注：本文章是博主看以下文章做的笔记
CSS样式使用规范
CSS规范标准
如有侵权，请联系博主删除