CSS编码规范

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/luoleikexin/article/details/84760207 [size=large][color=darkblue]CSS规范[/color][/size]
[size=medium]1 CSS文件规范[/size]
[list]
[*]一律使用link的方式调用外部样式 使用fekit时，会处理样式内部的@import依赖关系，同时会合并文件，所以这里不反对使用在css文件内部使用@import
[/list][size=medium]2 样式的命名约定[/size]
[color=cyan][size=small]2.1 命名组成元素[/size][/color]
[list][*]命名必须由单词、中划线 ① 组成。例如：.detail, .news-list, #topic, and etc...
[/list][list][*]不推荐使用拼音来作为样式名，尤其是缩写的拼音、拼音与英文的混合
[/list][list][*]所有命名都使用小写 ①我们使用中划线 “-” 作为连接字符，而不是下划线 "_"。 我们知道2种方式都有不少支持者，但 "-" 能让你少按一次shift键，并且更符合CSS原生语法，所以我们只选一种目前业内普遍使用的方式
[/list]
[color=cyan][size=small]2.2 前缀规范[/size][/color]

|前缀|说明|示例|
| g- |全局通用样式命名，前缀g全称为global，一旦修改将影响全站样式| g-mod |
| m- |模块命名方式| m-detail |
| ui- |组件命名方式| ui-selector |
| J- |所有用于纯交互的命名，不涉及任何样式规则。JSer拥有全部定义权限| J-switch |
[color=red] 不允许出现以类似：.info, .current, .news 开头的选择器，比如：[/color]

.info{sRules;}

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

.m-xxx .info{sRules;}

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

[color=cyan][size=small]2.3 命名单词的选择规范[/size][/color]
[list][*]不以表现来命名，而是根据内容来命名。比如：left, right, center, red, black这种以表现来定命名，不允许出现；
[/list][list][*]推荐使用功能和内容相关词汇的命名，如：navigation, news, type, search (待大家总结)
[/list]
[color=cyan][size=small]2.4 样式命名缩写规范[/size][/color]
[list]
[*]原则：缩写后还能较为清晰保持原单词所能表述的意思，如：[/list]
[color=orange] navigation => nav
header => hd
information => info[/color]
[color=cyan][size=small]2.5 id与className的使用规范[/size][/color]
[list]
[*]id只可能出现在document layout级别上，意思就是说页面工程师几乎没有写id的场景，除了layout搭建者外
[/list]
[size=medium]3 书写风格与排版规范[/size]
[color=cyan][size=small]3.1 视觉封装[/size][/color]
[list][*]CSS代码书写不分行[/list]
[list][*]不要以缩进的方式来体现层级关系
[/list][color=blue] 不推荐：[/color]

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

[color=blue] 推荐：[/color]

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

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

[color=cyan][size=small]3.2 规则与分号[/size][/color]
[color=red] *[/color]每条规则结束后都必须加上分号
[color=blue] 不推荐：[/color]

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

[color=blue] 推荐：[/color]

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

[color=cyan][size=small]3.3 0与单位[/size][/color]
[list]
[*]如果属性值为0，则不需要为0加单位
[/list][color=blue] 不推荐：[/color]

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

[color=blue] 推荐：[/color]

body{margin:0;padding:0;}

[color=cyan][size=small]3.4 0与小数[/size][/color]
[list][*]如果是0开始的小数，前面的0可以省略不写
[/list][color=blue] 不推荐：[/color]

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

[color=blue] 推荐：[/color]

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

[color=cyan][size=small]3.5 去掉uri中引用资源的引号[/size][/color]
[list][*]不要在url()里对引用资源加引号
[/list][color=blue] 不推荐：[/color]

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

[color=blue] 推荐：[/color]

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

[color=cyan][size=small]3.6 HEX颜色值写法[/size][/color]
[color=violet]- 将所有的颜色值小写[/color]
[color=violet]- 可以缩写的缩写至3位[/color]

[color=blue] 不推荐：[/color]

body{background-color:#FF8000;}

[color=blue] 推荐：[/color]

body{background-color:#f00;}

[size=medium]4 样式规则书写顺序[/size]
[list][*]遵循先布局后内容的顺序
[/list]

.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;
}

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

.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;
}

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

[color=violet] - 私有属性在前标准属性在后[/color]

.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);
}

[color=red]当有一天你的浏览器升级后，可能不再支持私有写法，那么这时写在后面的标准写法将生效，避免无法向后兼容的情况发生。[/color]
[size=medium]5 注释规范[/size]
[list][*]保持注释内容与星号之间有一个空格的距离
[/list][color=cyan][size=small]5.1 普通注释（单行）[/size][/color]
[color=gray] /* 普通注释 */[/color]
[color=cyan][size=small]5.2 区块注释[/size][/color]

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

[color=red] 有特殊作用的规则一定要有注释说明
应用了高级技巧的地方一定要注释说明[/color]

[size=medium]6 hack规范[/size]
[list][*]尽可能的减少对Hack的使用和依赖，如果在项目中对Hack的使用太多太复杂，对项目的维护将是一个巨大的挑战；
[/list][list][*]使用其它的解决方案代替Hack思路；
[/list][list][*]如果非Hack不可，选择稳定且常用并易于理解的；
[/list]

.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 */
}

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

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

语法说明：
[color=orange] 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版本。关键字：![/color]
目前的常用IE版本为6.0及以上，推荐酌情忽略低版本，把精力花在为使用高级浏览器的用户提供更好的体验上，另从IE10开始已无此特性

[size=medium]7 避免类型选择器[/size]
[list][*]避免出现标签名与ID或class组合的选择器
[/list][list][*]太多这种写法会让你的CSS效率变得糟糕
[/list][color=blue] 不推荐：[/color]

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

[color=blue] 推荐：[/color]

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

[size=medium]8 属性缩写与分拆[/size]
[list][*]无继承关系时，使用缩写
[/list][list][*]存在继承关系时，使用分拆方式
[/list][list][*]根据规则条数选择缩写和拆分
[/list][color=cyan][size=small]8.1 无继承关系时，使用缩写[/size][/color]
[color=blue] 不推荐：[/color]

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

[color=blue] 推荐：[/color]

body{
    margin:10px;
}

[color=cyan][size=small]8.2 存在继承关系时，使用分拆方式[/size][/color]
[color=blue] 不推荐：[/color]

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

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

[color=blue] 推荐：[/color]

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

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

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

[color=blue] 推荐：[/color]

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