CSS编写规范CSS编规范.doc

CSS规范 本规范概述 制定本规范的目的在于使我们的CSS代码更加易于维护和重用。在项目CSS编写之前，首先需要规划样式并分为共有样式和页面个性化样式，然后才开始编码，编码的同时进行调试，验证和代码片断的总结，而不是在所有模板都完成后才进行这三个步骤。 一、关于样式库构建 是否了解用一套同样的HTML结构，生成不同的视觉效果。CSS 的最大好处就是，灵活。比如同样的HTML结构，可以实现不同的外观；又比如，同样的外观，可以用不同的方式不实现。但灵活的同时也给我们带来麻烦。团队协作时，大家的编码风格各异，其他人要看懂并能调试的成本也因此提高。这时，我们需要一个规范，一个像红灯亮起我们就不能擅闯的规范。 关于样式库构建的规范待续…… 二、selector 命名规范： 1、命名除项目规定的前缀和公用样式名之前外，可自定义命名。请慎用 selected current disabled first last success error 2、一般情况下，如果命名比较通用，比如 current，请限定在相应的上下文环境中。比如其父节点ID为#parent 等比较通用的命名，建议写成 #parent .current{}，而非 .current{}，即使是为了重用，也应该注意。只有在非常明确不会影响到其他组件工作，并且其他人不会写这种命名的情况下，才让它变成全局通用的。 3、作为JS接口的class或者ID，必须是以 J- 前缀开头的。除 JS 接口命名外，其他命名一律使用小写字母 三、注释： 1、组件注释: /* * @name: 组件名 * @overview: 组件介绍 * @require: 依赖的样式 * @author: YOKO (onlyyoko@) */ 2、块状或行内元素，都请使用 /* comment */ 注释。 3、为了您的体验着想，一目了解的代码，就不要注释了。 比如 “display: none; /* 让元素看不见 */” 四、CSS文件 1、文件编码必须使用utf-8（无BOM） 2、文件一律通过 link 链入 (NOT @import) 3、当只是单个页面使用时，才写在 head 的 style 中 五、Hack 规则 1、一般情况下，不要使用 IE 条件注释： !–[if IE]![endif]– 2、通用 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 (/orange.png) no-repeat 0 0; } /* 区域模块-2 */ .tech{ width:950px; margin:0 auto; } .tech .wd{ width:620px; float: l