CSS编码规范

CSS规范
1 CSS文件规范

• 一律使用link的方式调用外部样式 使用fekit时，会处理样式内部的@import依赖关系，同时会合并文件，所以这里不反对使用在css文件内部使用@import

2 样式的命名约定
2.1 命名组成元素

• 命名必须由单词、中划线 ① 组成。例如：.detail, .news-list, #topic, and etc...

• 不推荐使用拼音来作为样式名，尤其是缩写的拼音、拼音与英文的混合

• 所有命名都使用小写 ①我们使用中划线 “-” 作为连接字符，而不是下划线 "_"。 我们知道2种方式都有不少支持者，但 "-" 能让你少按一次shift键，并且更符合CSS原生语法，所以我们只选一种目前业内普遍使用的方式

2.2 前缀规范

前缀	说明	示例
g-	全局通用样式命名，前缀g全称为global，一旦修改将影响全站样式	g-mod
m-	模块命名方式	m-detail
ui-	组件命名方式	ui-selector
J-	所有用于纯交互的命名，不涉及任何样式规则。JSer拥有全部定义权限	J-switch

    不允许出现以类似：.info, .current, .news 开头的选择器，比如：

.info{sRules;}

    因为这样将给我们带来不可预知的管理麻烦以及沉重的历史包袱。你永远也不会知道哪些样式名已经被用掉了，如果你是一个新人，你可能会遭遇，你每定义个样式名，都有同名的样式已存在，然后你只能是换样式名或者覆盖规则。所以我们推荐这样写：

.m-xxx .info{sRules;}

    所有的选择器必须是以 g-, m-, ui- 等有前缀的选择符开头的，意思就是说所有的规则都必须在某个相对的作用域下才生效，尽可能减少全局污染。
J- 这种级别的className完全交由JSer自定义，但是命名的规则也可以保持跟重构一致，比如说不能使用拼音之类的

2.3 命名单词的选择规范

• 不以表现来命名，而是根据内容来命名。比如：left, right, center, red, black这种以表现来定命名，不允许出现；

• 推荐使用功能和内容相关词汇的命名，如：navigation, news, type, search (待大家总结)

2.4 样式命名缩写规范

• 原则：缩写后还能较为清晰保持原单词所能表述的意思，如：

                       navigation => nav
                       header => hd
                       information => info
2.5 id与className的使用规范

• id只可能出现在document layout级别上，意思就是说页面工程师几乎没有写id的场景，除了layout搭建者外

3 书写风格与排版规范
3.1 视觉封装

• CSS代码书写不分行

• 不要以缩进的方式来体现层级关系

   不推荐：

.g-box{ sRules; }
　　　.g-box-hd .xx{ sRules; }
　　　　　　.g-box-hd .xx .aa{ sRules; }

   推荐：

.g-box{ sRules; }
.g-box-hd .xx{ sRules; }
.g-box-hd .xx .aa{ sRules; }

    这些都是为了达到简易视觉封装和一致性，让肉眼可以迅速以开头选择器作为检索的流从而主观识别区块

3.2 规则与分号
    *每条规则结束后都必须加上分号  
   不推荐：

body{margin:0;padding:0;font-size:14px}

   推荐：

body{margin:0;padding:0;font-size:14px;}

3.3 0与单位

• 如果属性值为0，则不需要为0加单位

   不推荐：

body{margin:0px;padding:0px;}

   推荐：

body{margin:0;padding:0;}

3.4 0与小数

• 如果是0开始的小数，前面的0可以省略不写

   不推荐：

body{opacity:0.6;text-shadow:1px 1px 5px rgba(0,0,0,0.5);}

   推荐：

body{opacity:.6;text-shadow:1px 1px 5px rgba(0,0,0,.5);}

3.5 去掉uri中引用资源的引号

• 不要在url()里对引用资源加引号

   不推荐：

body{background-image:url("sprites.png");}@import url("global.css");

   推荐：

body{background-image:url(sprites.png);}
@import url(global.css);

3.6 HEX颜色值写法
    - 将所有的颜色值小写
    - 可以缩写的缩写至3位

   不推荐：

body{background-color:#FF8000;}

   推荐：

body{background-color:#f00;}

4 样式规则书写顺序

• 遵循先布局后内容的顺序

.g-box{
　　　display:block;
　　　float:left;
　　　width:500px;
　　　height:200px;
　　　margin:10px;
　　　padding:10px;
　　　border:10px;
　　　background:#aaa;
　　　color:#000;
　　　font:14px/1.5 sans-serif;
}

    这个应该好理解，比如优先布局，我们知道布局属性有 display, float, overflow 等等；内容次之，比如 color, font, text-align 之类。
    - 组概念。
    拿上例的代码来说，如果我们还需要进行定位及堆叠，规则我们可以改成如下：

.g-box{
　　　display:block;
　　　position:relative;
　　　z-index:2;
　　　top:10px;
　　　left:100px;
　　　float:left;
　　　width:500px;
　　　height:200px;
　　　margin:10px;
　　　padding:10px;
　　　border:10px;
　　　background:#aaa;
　　　color:#000;
　　　font:14px/1.5 sans-serif;
}

    从代码中可以看到，我们直接将z-index, top, left 紧跟在 position 之后，因为这几个属性其实是一组的，如果去掉position，则后3条属性规则都将失效。

    - 私有属性在前标准属性在后

.g-box{
　　　-webkit-box-shadow:1px 1px 5px rgba(0,0,0,.5);
　　　   -moz-box-shadow:1px 1px 5px rgba(0,0,0,.5);
　　　    -ms-box-shadow:1px 1px 5px rgba(0,0,0,.5);
　　　     -o-box-shadow:1px 1px 5px rgba(0,0,0,.5);
　　　        box-shadow:1px 1px 5px rgba(0,0,0,.5);
}

    当有一天你的浏览器升级后，可能不再支持私有写法，那么这时写在后面的标准写法将生效，避免无法向后兼容的情况发生。
5 注释规范

• 保持注释内容与星号之间有一个空格的距离

5.1 普通注释（单行）
   /* 普通注释 */
5.2 区块注释

/**
 * 模块：m-detail
 * author: joy.du
 * edit:   2013.12.19
 */

   有特殊作用的规则一定要有注释说明
   应用了高级技巧的地方一定要注释说明

6 hack规范

• 尽可能的减少对Hack的使用和依赖，如果在项目中对Hack的使用太多太复杂，对项目的维护将是一个巨大的挑战；

• 使用其它的解决方案代替Hack思路；

• 如果非Hack不可，选择稳定且常用并易于理解的；

.test{
    color:#000;       /* For all */
    color:#111\9;     /* For all IE */
    color:#222\0;     /* For IE8 and later, Opera without Webkit */
    color:#333\9\0;   /* For IE8 and later */
    color:#444\0/;    /* For IE8 and later */
    [;color:#555;];   /* For Webkit, IE7 and earlier */
    *color:#666;      /* For IE7 and earlier */
    _color:#777;      /* For IE6 and earlier */
}

• 严谨且长期的项目，针对IE可以使用条件注释作为预留Hack或者在当前使用 IE条件注释语法：

<!--[if <keywords>? IE <version>?]>
<link rel=”stylesheet” href=”*.css” />
<![endif]-->

    语法说明：
           if条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本
           是否：指定是否IE或IE某个版本。关键字：空
           大于：选择大于指定版本的IE版本。关键字：gt（greater than）
           大于或等于：选择大于或等于指定版本的IE版本。关键字：gte（greater than or equal）
           小于：选择小于指定版本的IE版本。关键字：lt（less than）
           小于或等于：选择小于或等于指定版本的IE版本。关键字：lte（less than or equal）
           非指定版本：选择除指定版本外的所有IE版本。关键字：!
           目前的常用IE版本为6.0及以上，推荐酌情忽略低版本，把精力花在为使用高级浏览器的用户提供更好的体验上，另从IE10开始已无此特性

7 避免类型选择器

• 避免出现标签名与ID或class组合的选择器

• 太多这种写法会让你的CSS效率变得糟糕

   不推荐：

div#doc{ sRules; }
li.first{ sRules; }

   推荐：

#doc{ sRules; }
.first{ sRules; }

8 属性缩写与分拆

• 无继承关系时，使用缩写

• 存在继承关系时，使用分拆方式

• 根据规则条数选择缩写和拆分

8.1 无继承关系时，使用缩写
   不推荐：

body{
    margin-top:10px;
    margin-right:10px;
    margin-bottom:10px;
    margin-left:10px;
}

   推荐：

body{
    margin:10px;
}

8.2 存在继承关系时，使用分拆方式
   不推荐：

.m-detail{
    font:blod 12px/1.5 arial,sans-serif;
}

.m-detail .info{
    font:normal 14px/1.5 arial,sans-serif;
}

   推荐：

.m-detail{
    font:blod 12px/1.5 arial,sans-serif;
}
.m-detail .info{
    font-weight:normal;
    font-size:14px;
}

    在存在继承关系的情况下，只将需要变更的属性重定义，不进行缩写，避免不需要的重写的属性被覆盖定义
8.3 根据规则条数选择缩写和拆分
   不推荐：

.m-detail{
    border-width:1px;
    border-style:solid;
    border-color:#000 #000 #f00;
}

   推荐：

.m-detail{
    border:1px solid #000;
    border-bottom-color:#f00;
}