CSS规范

前面的话

　　CSS是网页样式的描述语言，CSS规范可以使CSS代码风格保持一致，使得CSS更容易理解和维护。本文将详细介绍CSS规范

 

代码风格

【选择器】

　　一、选择器 与 { 之间包含空格

.selector {}

　　二、>、+、~ 选择器的两边各保留一个空格

/* good */
main > nav{}
/* bad */
main>nav {}

【属性风格】

　　一、属性名 与以后的 : 之间不包含空格， : 与 属性值 之间包含空格

margin: 0;

　　二、对于以逗号分隔的属性值，每一个逗号后面都应该插入一个空格

font-family: Arial, sans-serif;

　　三、对于只包含一条声明的样式，为了易读性和便于快速编辑，建议将语句放在同一行。对于带有多条声明的样式，应当将声明分为多行

.selector {
    margin: 0;
    padding: 0;
}
.selector { margin: 0;}

 　　四、最后一个属性值也以分号结尾，这样能够减小修改、添加和维护代码时没必要要的失误和麻烦

/* good */
.selector {
    margin: 0;
    padding: 0;
}
/* bad */
.selector {
    margin: 0;
    padding: 0
}

【引号】

　　一、文本内容用双引号包围

html[lang|="zh"] q:before {
    font-family: "Microsoft YaHei", sans-serif;
    content: "“";
}

　　二、url() 函数中的路径不加引号

body {background: url(bg.png);}

【省略】

　　一、对于属性值或颜色参数，省略小于 1 的小数前面的 0 

panel {opacity: .8}

　　二、省略值为0时的单位，为节省没必要要的字节同时也使阅读方便，将0px、0em、0%等值缩写为0

.m-box{margin:0 10px;background-position:50% 0;}

【缩写】

　　一、尽可能使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff

　　二、十六进制值应该所有小写，例如，#fff。在扫描文档时，小写字符易于分辨，由于他们的形式更易于区分

　　三、在能够使用缩写的状况下，尽可能使用属性缩写，它最大的好处就是节省了字节，便于维护，并使阅读更加一目了然

/* good */
.post {
    font: 12px/1.5 arial, sans-serif;
}
/* bad */
.post {
    font-family: arial, sans-serif;
    font-size: 12px;
    line-height: 1.5;
}

【媒体查询】

　　将媒体查询@media放在尽量相关规则的附近。不要将它们打包放在一个单同样式文件中或者放在文档底部。若是把它们分开了，未来更容易被遗忘

.element { ... }
.element-avatar { ... }
.element-selected { ... }

@media (min-width: 480px) {
  .element { ...}
  .element-avatar { ... }
  .element-selected { ... }
}

 

注释

【单行注释】

　　星号与内容之间保留一个空格，以确保即便在编码错误的状况下也能够正确解析样式

/* 单行注释 */

【块状注释】

　　在必要的状况下，能够使用块状注释，块状注释保持统一的缩进对齐。星号要一列对齐，星号与内容之间保留一个空格

/**
 * 多行注释1
 * 多行注释2
 */

【文件注释】

　　文件顶部必须包含文件注释，星号要一列对齐，星号与内容之间保留一个空格，标识符冒号与内容之间保留一个空格

　　用 @name 标识文件说明，@author标识做者，@description为文件或模块描述，@update为可选项，建议每次改动都更新一下

/**
 * @name: 文件名或模块名
 * @description: 文件或模块描述
 * @author: author-name(mail-name@qq.com)
 *          author-name2(mail-name2@qq.com)
 * @update: 2017-07-14 00:00
 */

 

声明顺序

　　一、私有在前，标准在后，即先写带有浏览器私有标志的，后写W3C标准的

.m-box {
    -webkit-box-shadow: 0 0 0 #000;
    -moz-box-shadow: 0 0 0 #000;
    box-shadow: 0 0 0 #000;
}

　　二、相关的属性声明应当归为一组，并按照（布局类属性->盒模型属性->文本类属性->修饰类属性）顺序排列

　　布局属性处在第一位，是由于它能够使一个元素脱离正常文本流，而且覆盖盒模型相关的样式。盒模型紧跟其后，由于它决定了一个组件的大小和位置。其余属性只在组件内部起做用或者不会对前面两种状况的结果产生影响，因此它们排在后面

布局类属性     position / top / right / bottom / left / float / display / overflow 等
盒模型属性   border / margin / padding / width / height 等
文本类属性     font / line-height / text-align / word-wrap 等
修饰类属性     background / color / transition / list-style 等

　　另外，若是包含 content 属性，应放在最前面

.sidebar {
    /* formatting model */
    position: absolute;
    top: 50px;
    left: 0;
    overflow-x: hidden;

    /* box model */
    width: 200px;
    padding: 5px;
    border: 1px solid #ddd;

    /* typographic */
    font-size: 14px;
    line-height: 20px;

    /* visual */
    background: #f5f5f5;
    color: #333;
    -webkit-transition: color 1s;
       -moz-transition: color 1s;
            transition: color 1s;
}

 

避免使用

　　一、尽可能不使用 !important 声明。 当须要强制指定样式且不容许任何场景覆盖时，经过标签内联和 !important 定义样式

　　二、避免耗性能的属性，如express和filter。不过有时候需求大于一切

/* expression */
.class {width: expression(this.width>100?'100px':'auto');}
/* filter */
.class {filter: alpha(opacity=50);}

　　三、避免使用 @import，与 <link> 标签相比，@import 指令要慢不少，不光增长了额外的请求次数，还会致使不可预料的问题

　　四、避免sass中没必要要的嵌套,这是由于虽然能够使用嵌套，可是并不意味着应该使用嵌套。只有在必须将样式限制在父元素内（也就是后代选择器），而且存在多个须要嵌套的元素时才使用嵌套

　　五、尽可能避免使用hack，因为浏览器自身缺陷，没法避开的时候，能够容许使用适当的Hack。统一使用“*”和“_”分别对IE7和6进行Hack

/* IE7会显示灰色#888，IE6会显示白色#fff，其余浏览器显示黑色#000 */
.m-list{
    color:#000;
    *color:#888;
    _color:#fff;
}