编码规范

CSS样式表是一个序列通用字符集，传输和存储过程中，这些字符必须由支持 US-ASCII（例如 UTF-8, ISO 8859-x, SHIFT JIS 等）字符编码方式编译

实用高于完美

尽量遵循HTML标准和语义，但是不应该以浪费实用性作为代价；
任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。

代码格式化

统一使用展开格式书写样式

  1. .thn{
  2.   display: block;
  3.   width: 50px;
  4. }

代码大小写

样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。

  1. /* 推荐 */
  2. .thn {
  3.   display: block;
  4. }
  6. /* 多个单词中间用减号分割 */
  7. .thn-header {
  8.   display: block;
  9. }
  11. /* 不推荐 */
  12. .thn {
  13.     DISPLAY:BLOCK;
  14. }

选择器

  • 尽量少用通用选择器 *
  • 不使用 ID 选择器
  • 不使用无具体语义定义的标签选择器
  1. /* 推荐 */
  2. .thn {}
  3. .thn li {}
  4. .thn li p{}
  6. /* 不推荐 */
  7. *{}
  8. #thn {}
  9. .thn div{}

分号

每个属性声明末尾都要加分号

  1. .thn {
  2.   width: 100%;
  3.   height: 100%;
  4. }

代码易读性

  1. 左括号与类名之间一个空格，冒号与属性值之间一个空格
  1. /* 推荐 */
  2. .thn { 
  3.   width: 100%; 
  4. }
  6. /* 不推荐 */
  7. .thn{ 
  8.   width:100%;
  9. }
  1. 逗号分隔的取值，逗号之后一个空格
  1. /* 推荐 */
  2. .thn {
  3.   box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
  4. }
  5. /* 不推荐 */
  6. .thn {
  7.   box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
  8. }
  1. 为单个css选择器或新申明开启新行
  1. /* 推荐 */
  2. .thn, 
  3. .thn_logo, 
  4. .thn_hd {
  5.   color: #ff0;
  6. }
  7. .nav {
  8.   color: #fff;
  9. }
  11. /* 不推荐 */
  12. .thn,.thn_logo,.thn_hd {
  13.   color: #ff0;
  14. }.nav {
  15.   color: #fff;
  16. }
  1. 颜色值 rgb() rgba() hsl() hsla() rect() 中加空格，且取值不要带有不必要的 0
  1. /* 推荐 */
  2. .thn {
  3.   color: rgba(255, 255, 255, .5);
  4. }
  6. /* 不推荐 */
  7. .thn {
  8.   color: rgba(255,255,255,.5);
  9. }
  1. 属性值十六进制数值能用简写的尽量用简写
  1. /* 推荐 */
  2. .thn {
  3.   color: #fff;
  4. }
  6. /* 不推荐 */
  7. .thn {
  8.   color: #ffffff;
  9. }
  1. 不要为 0 指明单位
  1. /* 推荐 */
  2. .thn {
  3.   margin: 0 10px
  4. }
  6. /* 不推荐 */
  7. .thn {
  8.   margin: 0px 10px
  9. }
  1. 不允许有空规则
  1. /* 不推荐 */
  2. .thn {
  3.     /* width: 100px; */
  4. }

属性值引号

css属性值需要用到引号时，统一使用双引号

  1. /* 推荐 */
  2. .thn {
  3.   font-family: "Hiragino Sans GB";
  4. }
  6. /* 不推荐 */
  7. .thn {
  8.   font-family: 'Hiragino Sans GB';
  9. }

属性书写顺序

  1. 布局定位属性：display / position / float / clear / visibility / overflow
  2. 自身属性：width / height / margin / padding / border / background
  3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
  4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
  1. .thn {
  2.   display: block;
  3.   position: relative;
  4.   float: left;
  5.   width: 100px;
  6.   height: 100px;
  7.   margin: 0 10px;
  8.   padding: 20px 0;
  9.   font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  10.   color: #333;
  11.   background: rgba(0,0,0,.5);
  12.   -webkit-border-radius: 10px;
  13.   -moz-border-radius: 10px;
  14.   -o-border-radius: 10px;
  15.   -ms-border-radius: 10px;
  16.   border-radius: 10px;
  17. }

mozilla官方属性顺序推荐

CSS3浏览器私有前缀写法

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

  1. .thn {
  2.   -webkit-border-radius: 10px;
  3.   -moz-border-radius: 10px;
  4.   -o-border-radius: 10px;
  5.   -ms-border-radius: 10px;
  6.   border-radius: 10px;
  7. }

更多关于浏览器私有前辍写法：#Vendor-specific extensions

注释规范

  • 注释以字符 /* 开始，以字符 */ 结束
  • 注释不能嵌套
  1. /*Comment Text*/

单行注释

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

  • 推荐
  1. /* Comment Text */
  2. .thn {}
  4. /* Comment Text */
  5. .thn {}
  • 不推荐
  2. /*Comment Text*/
  3. .thn {
  4.     display: block;
  5. }
  6. .thn {
  7.     display: block;/*Comment Text*/
  8. }

文件信息注释

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

  1. @charset "UTF-8";
  2. /**
  3.  * @desc File Info
  4.  * @author Author Name
  5.  * @date 2015-10-10
  6.  */

更多关于CSS注释：#Comments