CSS编码规范

 

　　本目标是使CSS代码风格保持一致，容易被理解和被维护，如果自己没有这种习惯，请好好选择你的IDE，别再用“文本编辑器”。

 

　　本文档虽针对CSS设计的，但是在使用各种CSS的预编译器(如less、sass、stylus等)时，适用的部分也应尽量遵循本文档的约定。

 

　　1代码风格

 

　　1.1文件

 

　　[建议]CSS文件使用无BOM的UTF-8编码。

 

　　解释：

 

　　UTF-8编码具有更广泛的适应性。BOM在使用程序或工具处理文件时可能造成不必要的干扰。

 

　　1.2缩进

 

　　[强制]使用2个空格做为一个缩进层级，不允许使用tab字符。

 

　　示例：

 

　　.selector{

 

　　margin:0;

 

　　padding:0;

 

　　}

 

　　1.3空格

 

　　[强制]选择器与{之间必须包含空格。

 

　　示例：

 

　　.selector{

 

　　}

 

　　[强制]属性名与之后的:之间不允许包含空格，:与属性值之间必须包含空格。

 

　　示例：

 

　　margin:0;

 

　　[强制]列表型属性值书写在单行时，,后必须跟一个空格。

 

　　示例：

 

　　font-family:Arial,sans-serif;

 

　　1.4行长度

 

　　[强制]每行不得超过120个字符，除非单行不可分割。

 

　　解释：

 

　　常见不可分割的场景为URL超长。

 

　　[建议]对于超长的样式，在样式值的空格处或,后换行，建议按逻辑分组。

 

　　示例：

 

　　

 

　　/*不同属性值按逻辑分组*/

 

　　background:

 

　　transparenturl(aVeryVeryVeryLongUrlIsPlacedHere)

 

　　no-repeat00;

 

　　/*可重复多次的属性，每次重复一行*/

 

　　background-image:

 

　　url(aVeryVeryVeryLongUrlIsPlacedHere)

 

　　url(anotherVeryVeryVeryLongUrlIsPlacedHere);

 

　　/*类似函数的属性值可以根据函数调用的缩进进行*/

 

　　background-image:-webkit-gradient(

 

　　linear,

 

　　leftbottom,

 

　　lefttop,

 

　　color-stop(0.04,rgb(88,94,124)),

 

　　color-stop(0.52,rgb(115,123,162))

 

　　);

 

　　1.5选择器

 

　　[强制]当一个rule包含多个selector时，每个选择器声明必须独占一行。

 

　　示例：

 

　　/*good*/

 

　　.post,

 

　　.page,

 

　　.comment{

 

　　line-height:1.5;

 

　　}

 

　　/*bad*/

 

　　.post,.page,.comment{

 

　　line-height:1.5;

 

　　}

 

　　[强制]>、+、~选择器的两边各保留一个空格。

 

　　示例：

 

　　

 

　　/*good*/

 

　　main>nav{

 

　　padding:10px;

 

　　}

 

　　label+input{

 

　　margin-left:5px;

 

　　}

 

　　input:checked~button{

 

　　background-color:#69C;

 

　　}

 

　　/*bad*/

 

　　main>nav{

 

　　padding:10px;

 

　　}

 

　　label+input{

 

　　margin-left:5px;

 

　　}

 

　　input:checked~button{

 

　　background-color:#69C;

 

　　}

 

　　[强制]属性选择器中的值必须用双引号包围。

 

　　解释：

 

　　不允许使用单引号，不允许不使用引号。

 

　　示例：

 

　　/*good*/

 

　　article[character="juliet"]{

 

　　voice-family:"VivienLeigh",victoria,female;

 

　　}

 

　　/*bad*/

 

　　article[character='juliet']{

 

　　voice-family:"VivienLeigh",victoria,female;

 

　　}

 

　　1.6属性

 

　　[强制]多个属性定义必须另起一行。

 

　　示例：

 

　　/*good*/

 

　　.selector{

 

　　margin:0;

 

　　padding:0;

 

　　}

 

　　/*bad*/

 

　　.selector{margin:0;padding:0;}

 

　　[强制]属性定义后必须以分号结尾。

 

　　示例：

 

　　/*good*/

 

　　.selector{

 

　　margin:0;

 

　　}

 

　　/*bad*/

 

　　.selector{

 

　　margin:0

 

　　}

 

　　2通用

 

　　2.1选择器

 

　　[强制]如无必要，不得为id、class选择器添加类型选择器进行限定。

 

　　解释：

 

　　在性能和维护性上，都有一定的影响。

 

　　示例：

 

　　/*good*/

 

　　#error,

 

　　.danger-message{

 

　　font-color:#c00;

 

　　}

 

　　/*bad*/

 

　　dialog#error,

 

　　p.danger-message{

 

　　font-color:#c00;

 

　　}

 

　　[建议]选择器的嵌套层级应不大于4级，位置靠后的限定条件应尽可能精确。

 

　　示例：

 

　　/*good*/

 

　　#usernameinput{}

 

　　.comment.avatar{}

 

　　/*bad*/

 

　　.page.header.login#usernameinput{}

 

　　.commentdiv*{}

 

　　2.2属性缩写

 

　　[建议]在可以使用缩写的情况下，尽量使用属性缩写。

 

　　示例：

 

　　/*good*/

 

　　.post{

 

　　font:12px/1.5arial,sans-serif;

 

　　}

 

　　/*bad*/

 

　　.post{

 

　　font-family:arial,sans-serif;

 

　　font-size:12px;

 

　　line-height:1.5;

 

　　}

 

　　[建议]使用border/margin/padding等缩写时，应注意隐含值对实际数值的影响，确实需要设置多个方向的值时才使用缩写。

 

　　解释：

 

　　border/margin/padding等缩写会同时设置多个属性的值，容易覆盖不需要覆盖的设定。如某些方向需要继承其他声明的值，则应该分开设置。

 

　　示例：

 

　　

 

　　/*centering<articleclass="page">horizontallyandhighlightfeaturedones*/

 

　　article{

 

　　margin:5px;

 

　　border:1pxsolid#999;

 

　　}

 

　　/*good*/

 

　　.page{

 

　　margin-right:auto;

 

　　margin-left:auto;

 

　　}

 

　　.featured{

 

　　border-color:#69c;

 

　　}

 

　　/*bad*/

 

　　.page{

 

　　margin:5pxauto;/*introducingredundancy*/

 

　　}

 

　　.featured{

 

　　border:1pxsolid#69c;/*introducingredundancy*/

 

　　}

 

　　2.3属性书写顺序

 

　　[建议]同一ruleset下的属性在书写时，应按功能进行分组，并以FormattingModel（布局方式、位置）>BoxModel（尺寸）>Typographic（文本相关）>Visual（视觉效果）的顺序书写，以提高代码的可读性。

 

　　解释：

 

　　FormattingModel相关属性包括：position/top/right/bottom/left/float/display/overflow等

 

　　BoxModel相关属性包括：border/margin/padding/width/height等

 

　　Typographic相关属性包括：font/line-height/text-align/word-wrap等

 

　　Visual相关属性包括：background/color/transition/list-style等

 

　　Misc相关属性包括：opacity/text-decoration/white-space/word-wrap等

 

　　另外，如果包含content属性，应放在最前面。

 

　　示例：

 

　　

 

　　.sidebar{

 

　　/*formattingmodel:positioningschemes/offsets/z-indexes/display/...*/

 

　　position:absolute;

 

　　top:50px;

 

　　left:0;

 

　　overflow-x:hidden;

 

　　display:block;

 

　　/*boxmodel:sizes/margins/paddings/borders/...*/

 

　　width:200px;

 

　　padding:5px;

 

　　border:1pxsolid#ddd;

 

　　/*typographic:font/aligns/textstyles/...*/

 

　　font-size:14px;

 

　　line-height:20px;

 

　　/*visual:colors/shadows/gradients/...*/

 

　　background:#f5f5f5;

 

　　color:#333;

 

　　-webkit-transition:color1s;

 

　　-moz-transition:color1s;

 

　　transition:color1s;

 

　　/*Misc*/

 

　　opacity:1;

 

　　text-decoration:none;

 

　　white-space:nowrap;

 

　　word-wrap:normal;

 

　　cursor:pointer;

 

　　}

 

　　2.4清除浮动

 

　　[建议]当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置clear或触发BFC的方式进行clearfix。尽量不使用增加空标签的方式。

 

　　解释：

 

　　触发BFC的方式很多，常见的有：

 

　　float非none

 

　　position非static

 

　　overflow非visible

 

　　如希望使用更小副作用的清除浮动方法，参见Anewmicroclearfixhack一文。

 

　　另需注意，对已经触发BFC的元素不需要再进行clearfix。

 

　　示例：

 

　　<divclass="fn-clear">

 

　　<divclass="fn-left"></div>

 

　　<divclass="fn-left"></div>

 

　　</div>

 

　　2.5!important

 

　　[建议]尽量不使用!important声明。

 

　　[建议]当需要强制指定样式且不允许任何场景覆盖时，通过标签内联和!important定义样式。

 

　　解释：

 

　　必须注意的是，仅在设计上确实不允许任何其它场景覆盖样式时，才使用内联的!important样式。通常在第三方环境的应用中使用这种方案。下面的z-index章节是其中一个特殊场景的典型样例。

 

　　2.6z-index

 

　　[建议]将z-index进行分层，对文档流外绝对定位元素的视觉层级关系进行管理。

 

　　解释：

 

　　同层的多个元素，如多个由用户输入触发的Dialog，在该层级内使用相同的z-index或递增z-index。

 

　　建议每层包含100个z-index来容纳足够的元素，如果每层元素较多，可以调整这个数值。

 

　　[建议]在可控环境下，期望显示在最上层的元素，z-index指定为9999。

 

　　解释：

 

　　可控环境分成两种，一种是自身产品线环境；还有一种是可能会被其他产品线引用，但是不会被外部第三方的产品引用。

 

　　不建议取值为2147483647。以便于自身产品线被其他产品线引用时，当遇到层级覆盖冲突的情况，留出向上调整的空间。

 

　　[建议]在第三方环境下，期望显示在最上层的元素，通过标签内联和!important，将z-index指定为2147483647。

 

　　解释：

 

　　第三方环境对于开发者来说完全不可控。在第三方环境下的元素，为了保证元素不被其页面其他样式定义覆盖，需要采用此做法。

 

　　3值与单位

 

　　3.1文本

 

　　[强制]文本内容必须用双引号包围。

 

　　解释：

 

　　文本类型的内容可能在选择器、属性值等内容中。

 

　　示例：

 

　　

 

　　/*good*/

 

　　html[lang|="zh"]q:before{

 

　　font-family:"MicrosoftYaHei",sans-serif;

 

　　content:"“";

 

　　}

 

　　html[lang|="zh"]q:after{

 

　　font-family:"MicrosoftYaHei",sans-serif;

 

　　content:"”";

 

　　}

 

　　/*bad*/

 

　　html[lang|=zh]q:before{

 

　　font-family:'MicrosoftYaHei',sans-serif;

 

　　content:'“';

 

　　}

 

　　html[lang|=zh]q:after{

 

　　font-family:"MicrosoftYaHei",sans-serif;

 

　　content:"”";

 

　　}

 

　　3.2数值

 

　　[强制]当数值为0-1之间的小数时，省略整数部分的0。

 

　　示例：

 

　　/*good*/

 

　　panel{

 

　　opacity:.8

 

　　}

 

　　/*bad*/

 

　　panel{

 

　　opacity:0.8

 

　　}

 

　　3.3url()

 

　　[强制]url()函数中的路径不加引号。

 

　　示例：

 

　　/*good*/

 

　　body{

 

　　background:url(bg.png);

 

　　}

 

　　/*bad*/

 

　　body{

 

　　background:url("bg.png");

 

　　}

 

　　[强制]url()函数中的绝对路径可省去协议名。

 

　　示例：

 

　　body{

 

　　background:url(//w.zuzuche.com/img/bg.png)no-repeat00;

 

　　}

 

　　3.4长度

 

　　[强制]长度为0时须省略单位。(也只有长度单位可省)

 

　　示例：

 

　　/*good*/

 

　　body{

 

　　padding:05px;

 

　　}

 

　　/*bad*/

 

　　body{

 

　　padding:0px5px;

 

　　}

 

　　3.5颜色

 

　　[强制]RGB颜色值必须使用十六进制记号形式#rrggbb。不允许使用rgb()。

 

　　解释：

 

　　带有alpha的颜色信息可以使用rgba()。使用rgba()时每个逗号后必须保留一个空格。

 

　　示例：

 

　　/*good*/

 

　　.success{

 

　　box-shadow:002pxrgba(0,128,0,.3);

 

　　border-color:#008000;

 

　　}

 

　　/*bad*/

 

　　.success{

 

　　box-shadow:002pxrgba(0,128,0,.3);

 

　　border-color:rgb(0,128,0);

 

　　}

 

　　[强制]颜色值可以缩写时，必须使用缩写形式。

 

　　示例：

 

　　/*good*/

 

　　.success{

 

　　background-color:#aca;

 

　　}

 

　　/*bad*/

 

　　.success{

 

　　background-color:#aaccaa;

 

　　}

 

　　[强制]颜色值不允许使用命名色值。

 

　　示例：

 

　　/*good*/

 

　　.success{

 

　　color:#90ee90;

 

　　}

 

　　/*bad*/

 

　　.success{

 

　　color:lightgreen;

 

　　}

 

　　[建议]颜色值中的英文字符采用小写。如不用小写也需要保证同一项目内保持大小写一致。

 

　　示例：

 

　　

 

　　/*good*/

 

　　.success{

 

　　background-color:#aca;

 

　　color:#90ee90;

 

　　}

 

　　/*good*/

 

　　.success{

 

　　background-color:#ACA;

 

　　color:#90EE90;

 

　　}

 

　　/*bad*/

 

　　.success{

 

　　background-color:#ACA;

 

　　color:#90ee90;

 

　　}

 

　　3.62D位置

 

　　[强制]必须同时给出水平和垂直方向的位置。

 

　　解释：

 

　　2D位置初始值为0%0%，但在只有一个方向的值时，另一个方向的值会被解析为center。为避免理解上的困扰，应同时给出两个方向的值。background-position属性值的定义

 

　　示例：

 

　　/*good*/

 

　　body{

 

　　background-position:centertop;/*50%0%*/

 

　　}

 

　　/*bad*/

 

　　body{

 

　　background-position:top;/*50%0%*/

 

　　}

 

　　4文本编排

 

　　4.1字体族

 

　　[强制]font-family属性中的字体族名称应使用字体的英文FamilyName，其中如有空格，须放置在引号中。

 

　　解释：

 

　　所谓英文FamilyName，为字体文件的一个元数据，常见名称如下：

 

　　字体操作系统FamilyName

 

　　宋体(中易宋体)WindowsSimSun

 

　　黑体(中易黑体)WindowsSimHei

 

　　微软雅黑WindowsMicrosoftYaHei

 

　　微软正黑WindowsMicrosoftJhengHei

 

　　华文黑体Mac/iOSSTHeiti

 

　　冬青黑体Mac/iOSHiraginoSansGB

 

　　文泉驿正黑LinuxWenQuanYiZenHei

 

　　文泉驿微米黑LinuxWenQuanYiMicroHei

 

　　示例：

 

　　h1{

 

　　font-family:"MicrosoftYaHei";

 

　　}

 

　　[强制]font-family按「西文字体在前、中文字体在后」、「效果佳(质量高/更能满足需求)的字体在前、效果一般的字体在后」的顺序编写，最后必须指定一个通用字体族(serif/sans-serif)。

 

　　解释：

 

　　更详细说明可参考本文。

 

　　示例：

 

　　/*Displayaccordingtoplatform*/

 

　　.article{

 

　　font-family:Arial,sans-serif;

 

　　}

 

　　/*Specificformostplatforms*/

 

　　h1{

 

　　font-family:"HelveticaNeue",Arial,"HiraginoSansGB","WenQuanYiMicroHei","MicrosoftYaHei",sans-serif;

 

　　}

 

　　[强制]font-family不区分大小写，但在同一个项目中，同样的FamilyName大小写必须统一。

 

　　示例：

 

　　/*good*/

 

　　body{

 

　　font-family:Arial,sans-serif;

 

　　}

 

　　h1{

 

　　font-family:Arial,"MicrosoftYaHei",sans-serif;

 

　　}

 

　　/*bad*/

 

　　body{

 

　　font-family:arial,sans-serif;

 

　　}

 

　　h1{

 

　　font-family:Arial,"MicrosoftYaHei",sans-serif;

 

　　}

 

　　4.2字号

 

　　[强制]需要在Windows平台显示的中文内容，其字号应不小于12px。

 

　　解释：

 

　　由于Windows的字体渲染机制，小于12px的文字显示效果极差、难以辨认。

 

　　4.3字体风格

 

　　[建议]需要在Windows平台显示的中文内容，不要使用除normal外的font-style。其他平台也应慎用。

 

　　解释：

 

　　由于中文字体没有italic风格的实现，所有浏览器下都会fallback到obilique实现(自动拟合为斜体)，小字号下(特别是Windows下会在小字号下使用点阵字体的情况下)显示效果差，造成阅读困难。

 

　　4.4字重

 

　　[强制]font-weight属性必须使用数值方式描述。

 

　　解释：

 

　　CSS的字重分100–900共九档，但目前受字体本身质量和浏览器的限制，实际上支持400和700两档，分别等价于关键词normal和bold。

 

　　浏览器本身使用一系列启发式规则来进行匹配，在<700时一般匹配字体的Regular字重，>=700时匹配Bold字重。

 

　　但已有浏览器开始支持=600时匹配Semibold字重(见此表)，故使用数值描述增加了灵活性，也更简短。

 

　　示例：

 

　　/*good*/

 

　　h1{

 

　　font-weight:700;

 

　　}

 

　　/*bad*/

 

　　h1{

 

　　font-weight:bold;

 

　　}

 

　　4.5行高

 

　　[建议]line-height在定义文本段落时，应使用数值。

 

　　解释：

 

　　将line-height设置为数值，浏览器会基于当前元素设置的font-size进行再次计算。在不同字号的文本段落组合中，能达到较为舒适的行间间隔效果，避免在每个设置了font-size都需要设置line-height。

 

　　当line-height用于控制垂直居中时，还是应该设置成与容器高度一致。

 

　　示例：

 

　　.container{

 

　　line-height:1.5;

 

　　}

 

　　5变换与动画

 

　　[强制]使用transition时应指定transition-property。

 

　　示例：

 

　　/*good*/

 

　　.box{

 

　　transition:color1s,border-color1s;

 

　　}

 

　　/*bad*/

 

　　.box{

 

　　transition:all1s;

 

　　}

 

　　[建议]尽可能在浏览器能高效实现的属性上添加过渡和动画。

 

　　解释：

 

　　见本文，在可能的情况下应选择这样四种变换：

 

　　transform:translate(npx,npx);

 

　　transform:scale(n);

 

　　transform:rotate(ndeg);

 

　　opacity:0..1;

 

　　典型的，可以使用translate来代替left作为动画属性。

 

　　示例：

 

　　

 

　　/*good*/

 

　　.box{

 

　　transition:transform1s;

 

　　}

 

　　.box:hover{

 

　　transform:translate(20px);/*moverightfor20px*/

 

　　}

 

　　/*bad*/

 

　　.box{

 

　　left:0;

 

　　transition:left1s;

 

　　}

 

　　.box:hover{

 

　　left:20px;/*moverightfor20px*/

 

　　}

 

　　6响应式

 

　　[强制]MediaQuery不得单独编排，必须与相关的规则一起定义。

 

　　示例：

 

　　

 

　　/*Good*/

 

　　/*headerstyles*/

 

　　@media(...){

 

　　/*headerstyles*/

 

　　}

 

　　/*mainstyles*/

 

　　@media(...){

 

　　/*mainstyles*/

 

　　}

 

　　/*footerstyles*/

 

　　@media(...){

 

　　/*footerstyles*/

 

　　}

 

　　/*Bad*/

 

　　/*headerstyles*/

 

　　/*mainstyles*/

 

　　/*footerstyles*/

 

　　@media(...){

 

　　/*headerstyles*/

 

　　/*mainstyles*/

 

　　/*footerstyles*/

 

　　}

 

　　[强制]MediaQuery如果有多个逗号分隔的条件时，应将每个条件放在单独一行中。

 

　　示例：

 

　　@media

 

　　(-webkit-min-device-pixel-ratio:2),/*Webkit-basedbrowsers*/

 

　　(min--moz-device-pixel-ratio:2),/*OlderFirefoxbrowsers(priortoFirefox16)*/

 

　　(min-resolution:2dppx),/*Thestandardway*/

 

　　(min-resolution:192dpi){/*dppxfallback*/

 

　　/*Retina-specificstuffhere*/

 

　　}

 

　　[建议]尽可能给出在高分辨率设备(Retina)下效果更佳的样式。

 

　　7兼容性

 

　　7.1属性前缀

 

　　[建议]带私有前缀的属性由长到短排列，按冒号位置对齐。

 

　　解释：

 

　　标准属性放在最后，按冒号对齐方便阅读，也便于在编辑器内进行多行编辑。

 

　　在SublimeText2中，使用Selection→AddPreviousLine(⌃⇧↑)和Selection→AddNextLine(⌃⇧↓)。

 

　　示例：

 

　　.box{

 

　　-webkit-box-sizing:border-box;

 

　　-moz-box-sizing:border-box;

 

　　box-sizing:border-box;

 

　　}

 

　　7.2Hack

 

　　[建议]需要添加hack时应尽可能考虑是否可以采用其他方式解决。

 

　　解释：

 

　　如果能通过合理的HTML结构或使用其他的CSS定义达到理想的样式，则不应该使用hack手段解决问题。通常hack会导致维护成本的增加。

 

　　[建议]尽量使用选择器hack处理兼容性，而非属性hack。

 

　　解释：

 

　　尽量使用符合CSS语法的selectorhack，可以避免一些第三方库无法识别hack语法的问题。

 

　　示例：

 

　　/*IE7*/

 

　　*:first-child+html#header{

 

　　margin-top:3px;

 

　　padding:5px;

 

　　}

 

　　/*IE6*/

 

　　*html#header{

 

　　margin-top:5px;

 

　　padding:4px;

 

　　}

 

　　[建议]尽量使用简单的属性hack。

 

　　示例：

 

　　.box{

 

　　_display:inline;/*fixdoublemargin*/

 

　　float:left;

 

　　margin-left:20px;

 

　　}

 

　　.container{

 

　　overflow:hidden;

 

　　*zoom:1;/*triggeringhasLayout*/

 

　　}

 

　　7.3Expression

 

　　[强制]禁止使用Expression。

 

　　7.4@import

 

　　[强制]禁止使用@import。

 

　　解释：与相比,@import更慢，需要额外的页面请求，并且可能引发其他的意想不到的问题。应该避免使用他们，而选择其他的方案：

 

　　●使用多个<link>元素

 

　　●使用CSS预处理器例如Sass或Less将样式编译到一个文件中




本文转载自中文网