搜索
CSS规范本规范概述制定本规范的目的在于使我们的CSS代码更加易于维护和重用，从而提升效率执行本规范时建议的流程建议使用D(esign)C(oding)D(ebug)V(alidate)R(oundup)，即DCDVR的流程。首先需要规划样式并分为共有样式和页面个性化样式，然后才开始编码，编码的同时进行Debug，Validate和代码片断的总结，而不是在所有模板都完成后才进行这三个步骤。一、关于样式库构建规范详见：二、selector命名规范：�命名除.fn-/.ui-/.sl-外，可自定义命名。请慎用selectedcurrentdisabledfirstlastsuccesserror�一般情况下，如果命名比较通用，比如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条件注释：!–[ifIE]![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@-moz-document@-moz-document@-moz-documenturl-prefix(){.firefox{property:value;}}@media@media@media@mediaalland(-webkit-min-device-pixel-ratio:0){.webkit{property:value;}}@media@media@media@mediaalland(-webkit-min-device-pixel-ratio:10000),notalland(-webkit-min-device-pixel-ratio:0){.opera{property:value;}}@media@media@media@mediascreenand(max-device-width:480pxpxpxpx){.iphone-or-mobile-s-webkit{property:value;}}当然，强烈建议你使用更优雅的hack方式。那就是避免hack。或者在书写上，做点小trick。比如：.selector.child{property:value;}/*forie-6*/.selector.child{property:value;}/*exceptie-6*/�关于Hack:在firefox写完，IE有问题？还是其他浏览器也出现了。你知道IEHack能解决。我想，你也可能知道，用其他方法也能绕过。建议少用Hack。六、书写规范：1.以如下写法为例：第一种方式：（强烈推荐）/*区域模块-1*/.tech,.ued{background:#f60url(alipay.com/orange.png)no-repeat00;}/*区域模块-2*/.tech{width:950pxpxpxpx;margin:0auto;}.tech.wd{width:620pxpxpxpx;float:left;}第二种方式：（如果让其他人看，请先格式化）/*区域模块-3*/.ued{width:100%%%%;padding:30pxpxpxpx50pxpxpxpx;}.ued.visual{display:inline-block;font:700normal12pxpxpxpx/1.5arial;}2.非常重要，需要你注意的点:�区域模块间用空行分隔�多个选择器写一起时，逗号（,）后紧跟一个空格�避免行内样式，即使是JS，也应该尽量使用class/ID来决定显示，而非行内样式�避免使用低效选择器（所以，别滥用class；当然，不滥用ID我相信你是知道的）详见：尽量使用缩写，比如font:700normal12px/1.5arial;一般不要写成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:1px2px3px4px;margin:同上如使用像`red`这样的颜色名，采用小写；16进制写法使用大写；写3位，还是6位，自便：color:red;color;#FFF#FFF#FFF#FFF;color:#ABCABC#ABCABC#ABCABC#ABCABCbackground:colorimageUrlrepeatattachmentposition;如：background:#ddd#ddd#ddd#dddurl(alipay-wd.png)no-repeatscroll10px20px;border:sizestylecolor;如:border:1pxsolid#ddd#ddd#ddd#ddd;font:weightvariantstylesize/lineHeightfamily;如font:700small-capsitalic12px/1.5CourierNew;font-weight统一用500代替normal,用700代替bold;list-style:typepositionimage;如：list-style:squareinsideurl(alipay-wd.png);不过，通常我们要使用的是list-style:none;CSS3书写规范：浏览器私有写法在前，标准写法在后-moz-box-shadow:1px2px3px#ddd#ddd#ddd#ddd;-webkit-box-shadow:1px2px3px#ddd#ddd#ddd#ddd;box-shadow:1px2px3px#ddd#ddd#ddd#ddd;1.1.1.1.书写顺序不强制书写顺序。但我们应该养成良好的习惯，让看代码的人更易理解。易读对于团队协作来说是非常重要的：1.1.1.1.框架为先，细节次之比如写一个浮动容器的样式，我们应该先让这个容器的框架被渲染出来，让大家看到基本的网站框架。然后再再去渲染容器里面的内容。最终呈现给用户.通常像colorfontpadding之类的，写在后面。.selector{float:left;width:300pxpxpxpx;height:200pxpxpxpx;font-size:14pxpxpxpx;color:#f36;}2.2.2.2.有因才有果比如想使用”图片替换文字“技术，通常要使用的text-indent。如果我们使用标签的是span：spanclass=thepic这个文字将被图片替换/span我们应该是先将span变成”块级元素“（使用display:block，虽然他永远不是块级元素），再将文字indent。而不是先indent再变成块级的：.thepic{display:block;text-indent:-9999emememem;}又如我们，如果想让一个span使用margin,那么我们应该这样写:span{display:block;margin-bottom:10px;}而非span{margin-bottom:10px;display:block;}。因为没有display之前，行内元素是没有margin的。七、IE私有特性1.expression记住一句话：无论什么时候，都不要使用它。用Javascript吧。更优雅，更灵活。2.filter�应该尽量避免使用AlphaImageLoader�可以适当在投影/发光/渐变/去色方面上使用3.IEbug常见BUG，详见：八、如何规划你的CSS文件结构1.一定要有全局设置全局设置可以避免重复书写同样的东西。比如3人在一个项目中，假设项目中涉及到的链接有10种颜色，如果有全局重设，我们就可以统一设置颜色。如果没有，我们可能每个都会为自己所负责部分的链接定义相应的颜色。这样一来就导致多处定义，且定义不统一。以后维护需要到各个地方都改。这是很麻烦的事。另外就是css文件也会因此变大。所以，在写之前，大家应该先分析视觉稿，统一全局设置。/*globalreset*/body{padding:0;margin:0;font.....}a{color:#07f;}a:hover{color:#555;}需要注意的是，一般情况下，不要直接给标签写样式。而应该使用class。像下面这种写法，并不是很合适:h1{font-size:30pxpxpxpx}h2{font-size:20pxpxpxpx}h3{font-size:10pxpxpxpx;}如果有另外一个h2也要使用10px的，而其他的都仍使用20px的，那可就不好办了。所以，推荐用这种方法：/*globalclasses*/.text-size30{font-size:30pxpxpxpx;}.text-size20{font-size:20pxpxpxpx;}.text-size10{font-size:10pxpxpxpx;}h2class=text-size20…h2class=text-size10…2.一定要模块化有两点需要注意的，一是，注意代码重用的模块化；一是，注意HTML结构的模块化，而不是分块。我们是这样重用的：divdivdivdivid=module-1class=moduleh3h3h3h3TITLE/h3h3h3h3ppppclass=module-itemsometext/pppp/divdivdivdivdivdivdivdivid=module-2class=moduleh3TITLE/h3h3h3h3ppppclass=module-itemsometext/pppp/divdivdivdiv/*module,reusestyleinmodulescrope*/.module{}.module-status{}.module-item{}.module-status.module-1-item{}/*customize*/#modul