> 参考: http://alloyteam.github.io/CodeGuide/ (腾讯前端代码规范) http://www.waylau.com/css-code-guide/ [TOC] # 缩进 使用 soft tab(4个空格)。 ~~~ .element { position: absolute; top: 10px; left: 10px; border-radius: 10px; width: 50px; height: 50px; } ~~~ # 分号 每个属性声明末尾都要加分号。 ~~~ .element { width: 20px; height: 20px; background-color: red; } ~~~ # 空格 * 以下几种情况不需要空格: ▫ 属性名后 ▫ 多个规则的分隔符`,`前 ▫ !important `!`后 ▫ 属性值中`(`后和`)`前 ▫ 行末不要有多余的空格 * 以下几种情况需要空格: ▫ 属性值前 ▫ 选择器`>`, `+`,`` ~``前后 ▫ `{`前 ▫ !important `!`前 ▫ `@else` 前后 ▫ 属性值中的`,`后 ▫ 注释``/*后和`*/`前 ~~~ /* not good */ .element { color :red! important; background-color: rgba(0,0,0,.5); } /* good */ .element { color: red !important; background-color: rgba(0, 0, 0, .5); } /* not good */ .element , .dialog{ ... } /* good */ .element, .dialog { } /* not good */ .element>.dialog{ ... } /* good */ .element > .dialog{ ... } /* not good */ .element{ ... } /* good */ .element { ... } /* not good */ @if{ ... }@else{ ... } /* good */ @if { ... } @else { ... } ~~~ # 空行 * 以下几种情况需要空行: ▫ 文件最后保留一个空行 ▫ `}`后最好跟一个空行,包括scss中嵌套的规则 ▫ 属性之间需要适当的空行,具体见属性声明顺序 ~~~ /* not good */ .element { ... } .dialog { color: red; &:after { ... } } /* good */ .element { ... } .dialog { color: red; &:after { ... } } ~~~ # 换行 * 以下几种情况不需要换行: ▫ {`前 * 以下几种情况需要换行: ▫ `{`后和`}`前 ▫ 每个属性独占一行 ▫ 多个规则的分隔符`,`后 ~~~ /* not good */ .element {color: red; background-color: black;} /* good */ .element { color: red; background-color: black; } /* not good */ .element, .dialog { ... } /* good */ .element, .dialog { ... } ~~~ # 注释 * 注释统一用`/* */`(scss中也不要用`//`),具体参照例子的写法; * 缩进与下一行代码保持一致; * 可位于一个代码行的末尾,与代码间隔一个空格。 ~~~ /* Modal header */ .modal-header { ... } /* * Modal header */ .modal-header { ... } .modal-header { /* 50px */ width: 50px; color: red; /* color red */ } ~~~ # 引号 * 最外层统一使用双引号; * url的内容要用引号; * 属性选择器中的属性值需要引号。 ~~~ .element:after { content: ""; background-image: url("logo.png"); } li[data-type="single"] { ... } ~~~ # 命名 * css 元素名称以及id和类名的命名也是**区分大小写**的(但是属性和值不区分) * 类名使用小写字母,以中划线`-`分隔 * id采用驼峰式命名 * scss中的变量、函数、混合、placeholder采用驼峰式命名 ~~~ /* class */ .element-content { ... } /* id */ #myDialog { ... } /* 变量 */ $colorBlack: #000; /* 函数 */ @function pxToRem($px) { ... } /* 混合 */ @mixin centerBlock { ... } /* placeholder */ %myDialog { ... } ~~~ # 属性声明顺序 * 相关的属性声明按例子的顺序做分组处理,组之间需要有一个空行。 ~~~ .declaration-order { display: block; float: right; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; border: 1px solid #e5e5e5; border-radius: 3px; width: 100px; height: 100px; font: normal 13px "Helvetica Neue", sans-serif; line-height: 1.5; text-align: center; color: #333; background-color: #f5f5f5; opacity: 1; } // 下面是推荐的属性的顺序 [ [ "display", "visibility", "float", "clear", "overflow", "overflow-x", "overflow-y", "clip", "zoom" ], [ "table-layout", "empty-cells", "caption-side", "border-spacing", "border-collapse", "list-style", "list-style-position", "list-style-type", "list-style-image" ], [ "-webkit-box-orient", "-webkit-box-direction", "-webkit-box-decoration-break", "-webkit-box-pack", "-webkit-box-align", "-webkit-box-flex" ], [ "position", "top", "right", "bottom", "left", "z-index" ], [ "margin", "margin-top", "margin-right", "margin-bottom", "margin-left", "-webkit-box-sizing", "-moz-box-sizing", "box-sizing", "border", "border-width", "border-style", "border-color", "border-top", "border-top-width", "border-top-style", "border-top-color", "border-right", "border-right-width", "border-right-style", "border-right-color", "border-bottom", "border-bottom-width", "border-bottom-style", "border-bottom-color", "border-left", "border-left-width", "border-left-style", "border-left-color", "-webkit-border-radius", "-moz-border-radius", "border-radius", "-webkit-border-top-left-radius", "-moz-border-radius-topleft", "border-top-left-radius", "-webkit-border-top-right-radius", "-moz-border-radius-topright", "border-top-right-radius", "-webkit-border-bottom-right-radius", "-moz-border-radius-bottomright", "border-bottom-right-radius", "-webkit-border-bottom-left-radius", "-moz-border-radius-bottomleft", "border-bottom-left-radius", "-webkit-border-image", "-moz-border-image", "-o-border-image", "border-image", "-webkit-border-image-source", "-moz-border-image-source", "-o-border-image-source", "border-image-source", "-webkit-border-image-slice", "-moz-border-image-slice", "-o-border-image-slice", "border-image-slice", "-webkit-border-image-width", "-moz-border-image-width", "-o-border-image-width", "border-image-width", "-webkit-border-image-outset", "-moz-border-image-outset", "-o-border-image-outset", "border-image-outset", "-webkit-border-image-repeat", "-moz-border-image-repeat", "-o-border-image-repeat", "border-image-repeat", "padding", "padding-top", "padding-right", "padding-bottom", "padding-left", "width", "min-width", "max-width", "height", "min-height", "max-height" ], [ "font", "font-family", "font-size", "font-weight", "font-style", "font-variant", "font-size-adjust", "font-stretch", "font-effect", "font-emphasize", "font-emphasize-position", "font-emphasize-style", "font-smooth", "line-height", "text-align", "-webkit-text-align-last", "-moz-text-align-last", "-ms-text-align-last", "text-align-last", "vertical-align", "white-space", "text-decoration", "text-emphasis", "text-emphasis-color", "text-emphasis-style", "text-emphasis-position", "text-indent", "-ms-text-justify", "text-justify", "letter-spacing", "word-spacing", "-ms-writing-mode", "text-outline", "text-transform", "text-wrap", "-ms-text-overflow", "text-overflow", "text-overflow-ellipsis", "text-overflow-mode", "-ms-word-wrap", "word-wrap", "-ms-word-break", "word-break" ], [ "color", "background", "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader", "background-color", "background-image", "background-repeat", "background-attachment", "background-position", "-ms-background-position-x", "background-position-x", "-ms-background-position-y", "background-position-y", "-webkit-background-clip", "-moz-background-clip", "background-clip", "background-origin", "-webkit-background-size", "-moz-background-size", "-o-background-size", "background-size" ], [ "outline", "outline-width", "outline-style", "outline-color", "outline-offset", "opacity", "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity", "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha", "-ms-interpolation-mode", "-webkit-box-shadow", "-moz-box-shadow", "box-shadow", "filter:progid:DXImageTransform.Microsoft.gradient", "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient", "text-shadow" ], [ "-webkit-transition", "-moz-transition", "-ms-transition", "-o-transition", "transition", "-webkit-transition-delay", "-moz-transition-delay", "-ms-transition-delay", "-o-transition-delay", "transition-delay", "-webkit-transition-timing-function", "-moz-transition-timing-function", "-ms-transition-timing-function", "-o-transition-timing-function", "transition-timing-function", "-webkit-transition-duration", "-moz-transition-duration", "-ms-transition-duration", "-o-transition-duration", "transition-duration", "-webkit-transition-property", "-moz-transition-property", "-ms-transition-property", "-o-transition-property", "transition-property", "-webkit-transform", "-moz-transform", "-ms-transform", "-o-transform", "transform", "-webkit-transform-origin", "-moz-transform-origin", "-ms-transform-origin", "-o-transform-origin", "transform-origin", "-webkit-animation", "-moz-animation", "-ms-animation", "-o-animation", "animation", "-webkit-animation-name", "-moz-animation-name", "-ms-animation-name", "-o-animation-name", "animation-name", "-webkit-animation-duration", "-moz-animation-duration", "-ms-animation-duration", "-o-animation-duration", "animation-duration", "-webkit-animation-play-state", "-moz-animation-play-state", "-ms-animation-play-state", "-o-animation-play-state", "animation-play-state", "-webkit-animation-timing-function", "-moz-animation-timing-function", "-ms-animation-timing-function", "-o-animation-timing-function", "animation-timing-function", "-webkit-animation-delay", "-moz-animation-delay", "-ms-animation-delay", "-o-animation-delay", "animation-delay", "-webkit-animation-iteration-count", "-moz-animation-iteration-count", "-ms-animation-iteration-count", "-o-animation-iteration-count", "animation-iteration-count", "-webkit-animation-direction", "-moz-animation-direction", "-ms-animation-direction", "-o-animation-direction", "animation-direction" ], [ "content", "quotes", "counter-reset", "counter-increment", "resize", "cursor", "-webkit-user-select", "-moz-user-select", "-ms-user-select", "user-select", "nav-index", "nav-up", "nav-right", "nav-down", "nav-left", "-moz-tab-size", "-o-tab-size", "tab-size", "-webkit-hyphens", "-moz-hyphens", "hyphens", "pointer-events" ] ] ~~~ # 颜色 * 使颜色16进制用小写字母; * 颜色16进制尽量用简写。 ~~~ /* not good */ .element { color: #ABCDEF; background-color: #001122; } /* good */ .element { color: #abcdef; background-color: #012; } ~~~ # 属性简写 * 属性简写需要你非常清楚属性值的正确顺序,而且在大多数情况下并不需要设置属性简写中包含的所有值,所以建议尽量分开声明会更加清晰; * margin 和 padding 相反,需要使用简写; * 常见的属性简写包括: ▫ font ▫ background ▫ transition ▫ animation ~~~ /* not good */ .element { transition: opacity 1s linear 2s; } /* good */ .element { transition-delay: 2s; transition-timing-function: linear; transition-duration: 1s; transition-property: opacity; } ~~~ # 媒体查询 **尽量将媒体查询的规则被包含在他们相关的规则**,不要将他们一起放到一个独立的样式文件中,或者丢在文档的最底部,这样做只会让大家以后更容易忘记他们。 ```css // Example: button { font-size: 0.875rem; // All the internal/external value use in 'em' // This value use of your "font-size" as the basic font size // And you will not have any problem with the font size of the container ( Example bottom ) padding: .5em 1em; border: .125em solid #e3e3e3; @media (min-width: 48rem){ // min-width: 768px font-size: 1.125rem; } @media (min-width: 62rem){ // min-width: 992px font-size: 1.375rem; } } ``` # 杂项 * 不允许有空的规则; * 元素选择器用小写字母; * **去掉小数点前面的0;** * 去掉数字中不必要的小数点和末尾的0; * **属性值`0`后面不要加单位;** * 禁止使用`expression`表达式; * 禁止滥用`!important`; * 同个属性不同前缀的写法需要在垂直方向保持对齐,具体参照右边的写法; * 无前缀的标准属性应该写在有前缀的属性后面; ~~~ -ms-transform:rotate(7deg); //-ms代表ie内核识别码 -moz-transform:rotate(7deg); //-moz代表火狐内核识别码 -webkit-transform:rotate(7deg); //-webkit代表谷歌内核识别码 -o-transform:rotate(7deg); //Opera15以前加 -o-,Opera15及以后加 -webkit-。 transform:rotate(7deg); //统一标识语句,符合w3c标准 ~~~ * 不要在同个规则里出现重复的属性,如果重复的属性是连续的则没关系; * 不要在一个文件里出现两个相同的规则; * 用 `border: 0;` 代替 `border: none;`; * 在保证选择器准确的情况下尽量简化选择器 (尽量不超过4级,最多4级),不写多余的选择器(如class/id前的标签选择器、li上一级的的ul/ol、dt/dd上一级的dl等,在保证准确的前提下能去掉的都去掉)(在`scss`中如果超过4层应该考虑用嵌套的方式来写); * **尽量少用`*`选择器。** ~~~ /* not good */ .element { } /* not good */ LI { ... } /* good */ li { ... } /* not good */ .element { color: rgba(0, 0, 0, 0.5); } /* good */ .element { color: rgba(0, 0, 0, .5); } /* not good */ .element { width: 50.0px; } /* good */ .element { width: 50px; } /* not good */ .element { width: 0px; } /* good */ .element { width: 0; } /* not good */ .element { border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; background: linear-gradient(to bottom, #fff 0, #eee 100%); background: -webkit-linear-gradient(top, #fff 0, #eee 100%); background: -moz-linear-gradient(top, #fff 0, #eee 100%); } /* good */ .element { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: -webkit-linear-gradient(top, #fff 0, #eee 100%); background: -moz-linear-gradient(top, #fff 0, #eee 100%); background: linear-gradient(to bottom, #fff 0, #eee 100%); } /* not good */ .element { color: rgb(0, 0, 0); width: 50px; color: rgba(0, 0, 0, .5); } /* good */ .element { color: rgb(0, 0, 0); color: rgba(0, 0, 0, .5); } ~~~ * 避免使用 @import语句。如果使用了@import语句,一定要将它们写在样式表开头,保证它的优先级低于样式表中的其他规则;与 `<link>` 标签相比,`@import` 指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。替代办法有以下几种: ▫ 使用多个 `<link>` 元素 ▫ 通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件 ▫ 通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能 ▫ 请参考 http://www.stevesouders.com/blog/2009/04/09/dont-use-import/ 了解更多知识。 ```html <!-- Use link elements --> <link rel="stylesheet" href="core.css"> <!-- Avoid @imports --> <style> @import url("more.css"); </style> ```