1 CSS文件规范
- 一律使用link的方式调用外部样式 使用fekit时,会处理样式内部的@import依赖关系,同时会合并文件,所以这里不反对使用在css文件内部使用@import
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{sRules;}
因为这样将给我们带来不可预知的管理麻烦以及沉重的历史包袱。你永远也不会知道哪些样式名已经被用掉了,如果你是一个新人,你可能会遭遇,你每定义个样式名,都有同名的样式已存在,然后你只能是换样式名或者覆盖规则。所以我们推荐这样写:
.m-xxx .info{sRules;}
所有的选择器必须是以 g-, m-, ui- 等有前缀的选择符开头的,意思就是说所有的规则都必须在某个相对的作用域下才生效,尽可能减少全局污染。
J- 这种级别的className完全交由JSer自定义,但是命名的规则也可以保持跟重构一致,比如说不能使用拼音之类的
2.3 命名单词的选择规范
- 不以表现来命名,而是根据内容来命名。比如:left, right, center, red, black这种以表现来定命名,不允许出现;
- 推荐使用功能和内容相关词汇的命名,如:navigation, news, type, search (待大家总结)
2.4 样式命名缩写规范
- 原则:缩写后还能较为清晰保持原单词所能表述的意思,如:
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.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 属性缩写与分拆
- 无继承关系时,使用缩写
- 存在继承关系时,使用分拆方式
- 根据规则条数选择缩写和拆分
不推荐:
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; }