CSS 是一种领域语言(DSL),层叠与继承赋予了 CSS 优雅多姿的无限创造力。正是由于它如此「简单」, 我们需要一些规范来使其变得更加可依赖。在使用 CSS 的时候不要把它当做一种编程语言,应该把它当做 画画或者创作。所以本文档不仅仅是一份 CSS 书写规范,更像是 CSS 创作的调色盘。
「作为成功的项目的一员,很重要的一点是意识到只为自己写代码是很糟糕的行为。如果将有成千上万人 使用你的代码,那么你需要编写最具明确性的代码,而不是以自我的喜好来彰显自己的智商。」
—— Idan Gazit
在项目中应该有一个统一的缩进风格,以避免不必要的麻烦,千万不要缩进时空格和制表符(TAB)混用。
- 推荐缩进使用4个空格。
- 删除行尾冗余的空格。
提示:通过编辑器的全局设置保持统一的风格
良好的注释使代码更具有可读性和可维护性,尤其是多人协作的项目,不要让团队其他成员来猜测一段 代码的意图。
注释风格应当相对简洁,做如下规范:
- 区块注释放在单独一行。
- 保持注释内代码的缩进。
- 为了注释文字更具有可读性,合理控制每行的字数,推荐每行80个字符(40个汉字)以内。
提示:通过扩展 emmet 等工具(例如emmet-plus)可以快速输出统一的注释风格。
CSS 文件中有如下几种注释:
/* 普通注释 */
注释横线的长度为80个字符,作为换行参考。
一级区块注释
/* ==========================================================================
一级区块注释
========================================================================== */
二级区块注释
/* --------------------------------------------------------------------------
二级区块注释
-------------------------------------------------------------------------- */
每个 CSS 文件的头部或区块的开始处应当包含 Doxygen 风格的注释,以阐明该文件或这段代码的 作用、作者、最后更新时间等信息。
Doxygen 风格的注释以 /** 开始,每行以 * 号开头。
/**
* Doxygen 风格的注释示例
* @file: 文件信息
* @author: 一丝
* @update: 2013年11月5日
* @note: 注解
* @doc: 相关文档
*
* 这里是更详细的描述,当然我们要把字数控制在每行80个字符(40个汉字)以内。如果
* 一行写不下,需要另起一行。
*/
Doxygen 风格的注释内如果包含其他代码,不写开头的 * 号,以方便复制代码。
/**
* Doxygen 风格的注释包含代码
*
* 例如我们可以在注释中嵌入 HTML 代码,同样保持代码的缩进。
*
<div class="mod">
<p>这个模块名叫 mod</p>
</div>
*/
包括颜色中的 16 进制写法,字体名称以及 translatex等。
.Foo{ font-family: 'Helvetica Neue', Tahoma, 'Hiragino Sans GB', sans-serif; color: #FFF; BACKGROUND: #CCC; -webkit-transform: translateX(20px); }
推荐的写法:
.foo{ font-family: 'helvetica neue', tahoma, 'hiragino sans gb', sans-serif; color: #fff; background: #ccc; -webkit-transform: translatex(20px); }
- 规则集的左大括号前保留一个空格
- 属性值前增加个空格(使用 Emmet 会自动生成这个空格)
- 逗号后面保留一个空格。
合理的空白(空格)可以更好的阅读代码,最终推荐的效果如下:
.selector { width: 200px; font-size: 22px; color: rgba(0, 0, 0, .5); transition: color .3s, width .5s cubic-bezier(.6, 0, .2, 1); transform: matrix(0, 1, 1, 1, 10, 10); }
不推荐的写法:
h3 { font-weight: bold; }
推荐的写法:
h3 { font-weight: bold; }
不推荐的写法:
h3{ font-weight: bold; }
推荐的写法:
h3 { font-weight: bold; }
不推荐的写法:
h1, h2, h3 { font-weight: normal; line-height: 1.5; }
推荐的写法:
h1, h2, h3 { font-weight: normal; line-height: 1.5; }
不推荐的写法:
.selector1 { display: block; width: 100px } .selector2 { padding: 10px; margin: 10px auto; }
推荐的写法:
.selector1 { display: block; width: 100px } .selector2 { padding: 10px; margin: 10px auto; }
这样可以使得代码显得更加紧凑。
h1 {font-size: 32px;} h2 {font-size: 26px;} h3 {font-size: 22px;}
通常可以写作这样:
.selector { -webkit-transition: .3s ease; -moz-transition: .3s ease; -ms-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease; }
在CSS预处理中推荐以冒号对齐,使代码更加美观。
.selector { -webkit-transition: .3s ease; -moz-transition: .3s ease; -ms-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease; }
比如多个 box-shadow 和背景渐变等,这有助于提高代码的可读性,且易于生成有效的 Diff。
.selector { box-shadow: 1px 1px 5px #000, 0 0 6px blue, 2px 0 3px 5px #ccc inset; background-image: linear-gradient(to top right, green, blue), linear-gradient(to right, blue, red); } @media only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */ only screen and (min--moz-device-pixel-ratio: 2), /* Firefox 16 之前 */ only screen and (-webkit-min-device-pixel-ratio: 2), /* WebKit */ only screen and (min-resolution: 192dpi), /* 不支持dppx的浏览器 */ only screen and (min-resolution: 2dppx) /* 标准 */ { .selector { } } @font-face { font-family: 'FontName'; /* IE9 */ src: url('FileName.eot'); src: url('FileName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('FileName.woff') format('woff'), /* Chrome,Firefox */ url('FileName.ttf') format('truetype'), /* Chrome,Firefox,Opera,Safari,Android, iOS 4.2+ */ url('FileName.svg#FontName') format('svg'); /* iOS 4.1- */ }
@keyframes foo { 50% { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } }
- 如无必要,省略0值单位。
- 如无必要,省略小数前面的 0。
- 如无必要,省略 url 中的引号。
- 省略
font-family内中文字体名称的引号。 - 不强制要求缩写属性,
font,background,margin等。 - 不强制要求缩写颜色中的16进制写法。
- 不建议省略选择器内最后一个声明末尾的分号。
多人协作时,如果他人新增了其他代码很可能没有注意到上一行末尾没有写分号,导致不必要的麻烦。
不推荐的写法:
.selector { display: block; width: 100px }
推荐的写法:
.selector { display: block; width: 100px; }
如果团队有需求,建议使用工具来自动化排序,比如 CSScomb。
推荐以声明的特性作为分组,不同分组间保留一个空行,例如:
.dialog { /* 定位 */ margin: auto; position: absolute; top: 0; bottom: 0; right: 0; left: 0; /* 盒模型 */ width: 500px; height: 300px; padding: 10px 20px; /* 皮肤 */ background: #FFF; color: #333; border: 1px solid; border-radius: 5px; }
不推荐的写法:
.foo { -webkit-border-radius: 6px; border-radius: 6px; -moz-border-radius: 6px; }
推荐的写法:
.foo { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
- 通用选择器效率低是一个误区,如有必要可以使用。
例如:
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
CSS选择器匹配规则是从右往左,例如:
.mod .foo * { border-radius: 6px; }
- 如果需要 CSS Hacks,需详细注明解决什么问题。
- 尽量避免使用 IE 中的 CSS filters。
- 统一使用双引号「""」,如
content: ""。 - 选择器中的属性值也加上双引号,如
input[type="checkbox"]。 font-weight普通字重使用normal,加粗使用bold。大部分字体只有两个字重,所以
不建议使用容易混淆的数值表示方法。
不同的 CSS 预处理工具有着不同的特性、功能以及语法。编码习惯应当根据使用的预处理工具进行扩展, 以适应其特有的功能。推荐在使用 SCSS 时遵守以下指导。
- 将嵌套深度限制在1级。对于超过2级的嵌套,给予重新评估。这可以避免出现过于详实的 CSS 选择器。
- 避免大量的嵌套规则。当可读性受到影响时,将之打断。推荐避免出现多于20行的嵌套规则出现。
- 始终将@extend语句放在声明块的第一行。
- 如果可以的话,将@include语句放在声明块的顶部,紧接着@extend语句的位置。
- 考虑在自定义函数的名字前加上x-或其它形式的前缀。这有助于避免将自己的函数和 CSS 的原生函数混淆,
或函数命名与库函数冲突。
.selector { @extend .other-rule; @include clearfix(); @include box-sizing(border-box); width: x-grid-unit(1); // 其他声明 }
使用 grunt 部署 CSS
MIT License Copyright (c) 2013 一丝