<转>CSS编撰规则
日期：2014-05-17 浏览次数：20726 次
<转>CSS编写规则
本规范概述
制定本规范的目的在于使我们的CSS代码更加易于维护和重用，从而提升效率执行本规范时建议的流程 建议使用D(esign)C(oding)D(ebug)V(alidate)R(oundup)，即DCDVR的流程。首先需要规划样式并分为共有样式和页面个性化样式，然后才开始编码，编码的同时进行Debug，Validate和代码片断的总结，而不是在所有模板都完成后才进行这三个步骤。
一、关于样式库构建规范
详见：http://aliceui.com/alice-css-guide/
二、selector 命名规范：
命名除 .fn- / .ui- / .sl- 外，可自定义命名。请慎用 selected current disabled first last success error
一般情况下，如果命名比较通用，比如 current，请限定在相应的上下文环境中。比如其父节点ID为#parent 等比较通用的命名，建议写成 #parent .current{}，而非 .current{}，即使是为了重用，也应该注意。只有在非常明确不会影响到其他组件工作，并且其他人不会写这种命名的情况下，才让它变成全局通用的。
作为JS接口的class或者ID，必须是以 J- 前缀开头的。除 JS 接口命名外，其他命名一律使用小写字母
三、注释：
组件注释:
/**
* @name: 组件名
* @overview: 组件介绍
* @require: 依赖的样式
* @author: 小鱼(sofish@163.com)
*/
块状或行内元素，都请使用 /* comment */ 注释，注释文字前后端保持各有一个空格
为了您的体验着想，一目了解的代码，就不要注释了，比如 “display:none; /* 让元素看不见 */” 工作还有很多啊，同学，请为了自己的体力着想。
四、CSS文件
文件编码必须使用utf-8（无BOM）
文件一律通过 link 链入 (NOT @import)
当只是单个页面使用时，才写在 <head> 的 <style> 中
五、Hack 规则
一般情况下，不要使用 IE 条件注释： <!–[if IE]><![endif]–>
通用 Hack
.all-IE{property:value\9;}
:root .IE-9{property:value\0/;}
.gte-IE-8{property:value\0;}
.lte-IE-7{*property:value;}
.IE-7{+property:value;}
.IE-6{_property:value;}
.not-IE{property//:value;}
@-moz-document url-prefix() { .firefox{property:value;} }
@media all and (-webkit-min-device-pixel-ratio:0) { .webkit{property:value;} }
@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) { .opera{property:value;} }
@media screen and (max-device-width: 480px) { .iphone-or-mobile-s-webkit{property:value;} }
当然，强烈建议你使用更优雅的hack方式。那就是避免hack。或者在书写上，做点小trick。比如：
.selector .child{property:value;} /* for ie-6 */
.selector > .child{property:value;} /* except ie-6 */
关于Hack: 在firefox写完，IE有问题？还是其他浏览器也出现了。你知道IE Hack 能解决。我想，你也可能知道，用其他方法也能绕过。建议少用Hack。
六、书写规范：
1. 以如下写法为例：
第一种方式：（强烈推荐）
/* 区域模块-1 */
.tech, .ued{
background:#f60 url(alipay.com/orange.png) no-repeat 0 0;
}
/* 区域模块-2 */
.tech{
width:950px;
margin:0 auto;
}
.tech .wd{
width:620px;
float:left;
}
第二种方式：（如果让其他人看，请先格式化）
/* 区域模块-3 */
.ued{width:100%;padding:30px 50px;}
.ued .visual{display:inline-block;font:700 normal 12px/1.5 arial;}
2. 非常重要，需要你注意的点:
区域模块间用空行分隔
多个选择器写一起时，逗号（,）后紧跟一个空格
避免行内样式，即使是JS，也应该尽量使用class/ID来决定显示，而非行内样式
避免使用低效选择器（所以，别滥用class；当然，不滥用ID我相信你是知道的）详见：http://code.google.com/speed/page-speed/docs/rendering.html
尽量使用缩写，比如 font:700 normal 12px/1.5 arial; 一般不要写成
font-style:normal;
font-size:12px;
line-height:1.5;
font-family:arail;
通常需要使用缩写规则的:
padding: toprightbottomleft;
padding: top-bottomright+left;
padding: topleft-rightbottom;
padding: top-right-bottom-left;
如：padding:1px 2px3px4px;
margin: 同上
如使用像`red`这样的颜色名，采用小写；16进制写法使用大写；写3位，还是6位，自便：
color: red; color;#FFF; color:#ABCABC
background: colorimageUrlrepeatattachmentposition;
如：background:#ddd url(alipay-wd.png) no-repeatscroll10px20px;
border: sizestylecolor;
如: border:1px solid#ddd;
font: weightvariantstylesize/lineHeightfamily;
如 font:700 small-capsitalic12px/1.5 "Courier New"; font-weight统一用 500代替 normal, 用 700代替 bold;
list-style: typepositionimage;
如：list-style: squareinsideurl(alipay-wd.png);不过，通常我们要使用的是 list-style:none;
CSS3 书写规范：浏览器私有写法在前，标准写法在后
-moz-box-shadow: 1px2px3px#ddd;
-webkit-box-shadow: 1px2px3px#ddd;
box-shadow: 1px2px3px#ddd;
1.书写顺序
不强制书写顺序。但我们应该养成良好的习惯，让看代码的人更易理解。易读对于团队协作来说是非常重要的：1. 框架为先，细节次之比如
本规范概述
制定本规范的目的在于使我们的CSS代码更加易于维护和重用，从而提升效率执行本规范时建议的流程 建议使用D(esign)C(oding)D(ebug)V(alidate)R(oundup)，即DCDVR的流程。首先需要规划样式并分为共有样式和页面个性化样式，然后才开始编码，编码的同时进行Debug，Validate和代码片断的总结，而不是在所有模板都完成后才进行这三个步骤。
一、关于样式库构建规范
详见：http://aliceui.com/alice-css-guide/
二、selector 命名规范：
命名除 .fn- / .ui- / .sl- 外，可自定义命名。请慎用 selected current disabled first last success error
一般情况下，如果命名比较通用，比如 current，请限定在相应的上下文环境中。比如其父节点ID为#parent 等比较通用的命名，建议写成 #parent .current{}，而非 .current{}，即使是为了重用，也应该注意。只有在非常明确不会影响到其他组件工作，并且其他人不会写这种命名的情况下，才让它变成全局通用的。
作为JS接口的class或者ID，必须是以 J- 前缀开头的。除 JS 接口命名外，其他命名一律使用小写字母
三、注释：
组件注释:
/**
* @name: 组件名
* @overview: 组件介绍
* @require: 依赖的样式
* @author: 小鱼(sofish@163.com)
*/
块状或行内元素，都请使用 /* comment */ 注释，注释文字前后端保持各有一个空格
为了您的体验着想，一目了解的代码，就不要注释了，比如 “display:none; /* 让元素看不见 */” 工作还有很多啊，同学，请为了自己的体力着想。
四、CSS文件
文件编码必须使用utf-8（无BOM）
文件一律通过 link 链入 (NOT @import)
当只是单个页面使用时，才写在 <head> 的 <style> 中
五、Hack 规则
一般情况下，不要使用 IE 条件注释： <!–[if IE]><![endif]–>
通用 Hack
.all-IE{property:value\9;}
:root .IE-9{property:value\0/;}
.gte-IE-8{property:value\0;}
.lte-IE-7{*property:value;}
.IE-7{+property:value;}
.IE-6{_property:value;}
.not-IE{property//:value;}
@-moz-document url-prefix() { .firefox{property:value;} }
@media all and (-webkit-min-device-pixel-ratio:0) { .webkit{property:value;} }
@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) { .opera{property:value;} }
@media screen and (max-device-width: 480px) { .iphone-or-mobile-s-webkit{property:value;} }
当然，强烈建议你使用更优雅的hack方式。那就是避免hack。或者在书写上，做点小trick。比如：
.selector .child{property:value;} /* for ie-6 */
.selector > .child{property:value;} /* except ie-6 */
关于Hack: 在firefox写完，IE有问题？还是其他浏览器也出现了。你知道IE Hack 能解决。我想，你也可能知道，用其他方法也能绕过。建议少用Hack。
六、书写规范：
1. 以如下写法为例：
第一种方式：（强烈推荐）
/* 区域模块-1 */
.tech, .ued{
background:#f60 url(alipay.com/orange.png) no-repeat 0 0;
}
/* 区域模块-2 */
.tech{
width:950px;
margin:0 auto;
}
.tech .wd{
width:620px;
float:left;
}
第二种方式：（如果让其他人看，请先格式化）
/* 区域模块-3 */
.ued{width:100%;padding:30px 50px;}
.ued .visual{display:inline-block;font:700 normal 12px/1.5 arial;}
2. 非常重要，需要你注意的点:
区域模块间用空行分隔
多个选择器写一起时，逗号（,）后紧跟一个空格
避免行内样式，即使是JS，也应该尽量使用class/ID来决定显示，而非行内样式
避免使用低效选择器（所以，别滥用class；当然，不滥用ID我相信你是知道的）详见：http://code.google.com/speed/page-speed/docs/rendering.html
尽量使用缩写，比如 font:700 normal 12px/1.5 arial; 一般不要写成
font-style:normal;
font-size:12px;
line-height:1.5;
font-family:arail;
通常需要使用缩写规则的:
padding: toprightbottomleft;
padding: top-bottomright+left;
padding: topleft-rightbottom;
padding: top-right-bottom-left;
如：padding:1px 2px3px4px;
margin: 同上
如使用像`red`这样的颜色名，采用小写；16进制写法使用大写；写3位，还是6位，自便：
color: red; color;#FFF; color:#ABCABC
background: colorimageUrlrepeatattachmentposition;
如：background:#ddd url(alipay-wd.png) no-repeatscroll10px20px;
border: sizestylecolor;
如: border:1px solid#ddd;
font: weightvariantstylesize/lineHeightfamily;
如 font:700 small-capsitalic12px/1.5 "Courier New"; font-weight统一用 500代替 normal, 用 700代替 bold;
list-style: typepositionimage;
如：list-style: squareinsideurl(alipay-wd.png);不过，通常我们要使用的是 list-style:none;
CSS3 书写规范：浏览器私有写法在前，标准写法在后
-moz-box-shadow: 1px2px3px#ddd;
-webkit-box-shadow: 1px2px3px#ddd;
box-shadow: 1px2px3px#ddd;
1.书写顺序
不强制书写顺序。但我们应该养成良好的习惯，让看代码的人更易理解。易读对于团队协作来说是非常重要的：1. 框架为先，细节次之比如
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
