CSS 是一种领域语言（DSL），层叠与继承赋予了 CSS 优雅多姿的无限创造力。正是由于它如此「简单」， 我们需要一些规范来使其变得更加可依赖。在使用 CSS 的时候不要把它当做一种编程语言，应该把它当做 画画或者创作。所以本文档不仅仅是一份 CSS 书写规范，更像是 CSS 创作的调色盘。
「作为成功的项目的一员，很重要的一点是意识到只为自己写代码是很糟糕的行为。如果将有成千上万人 使用你的代码，那么你需要编写最具明确性的代码，而不是以自我的喜好来彰显自己的智商。」
—— Idan Gazit
在项目中应该有一个统一的缩进风格，以避免不必要的麻烦，千万不要缩进时空格和制表符（TAB）混用。
- 推荐缩进使用4个空格。
- 删除行尾冗余的空格。
提示：通过编辑器的全局设置保持统一的风格
良好的注释使代码更具有可读性和可维护性，尤其是多人协作的项目，不要让团队其他成员来猜测一段 代码的意图。
注释风格应当相对简洁，做如下规范：
- 区块注释放在单独一行。
- 保持注释内代码的缩进。
- 为了注释文字更具有可读性，合理控制每行的字数，推荐每行80个字符（40个汉字）以内。
提示：通过扩展 emmet 等工具可以快速输出统一的注释风格。
CSS 文件中有如下几种注释：
/* 普通注释 */
一级区块
/* ==========================================================================
一级区块注释
========================================================================== */
二级区块
/* --------------------------------------------------------------------------
二级区块注释
-------------------------------------------------------------------------- */
每个 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);
}不推荐的写法：
h3 {
font-weight: bold;
}推荐的写法：
h3 {
font-weight: bold;
}不推荐的写法：
h3{
font-weight: bold;
}推荐的写法：
h3 {
font-weight: bold;
}不推荐的写法：
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;
}.selector {
color: rgba(0, 0, 0, .5);
transition: color .3s, width .5s cubic-bezier(0.69, 0, 0.175, 1);
transform: matrix(0, 1, 1, 1, 10, 10);
}这样可以使得代码显得更加紧凑。
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;
}比如多个 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);
// 其他声明
}在HTML标签在浏览器里有默认的样式，例如 p 标签有上下边距，strong标签有字体加粗样式，em标签有字体倾斜样式。 不同浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而Firefox下， 它的缩进是由padding实现的。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。 所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。 “覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS Reset。
为什么需要CSS Reset？ 因为浏览器很多，每个浏览器的默认样式也是不同的，比如标签，在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不同的， 所以，通过重置button标签的默认CSS属性，然后再对它进行统一定义，就可以在各个浏览器下产生相同的显示效果。
最简单的CSS Reset内容寥寥几行就能完成：
* { padding: 0; margin: 0; border: 0; }以上代码过于简单粗暴，小朋友请勿模仿！ YUI也给了一个很好的CSS Reset，YUI的CSS Reset内容：
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
ol,ul {
list-style: none;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
q:before,q:after {
content:'';
}
abbr,acronym { border: 0;
}以及国外名人Eric Meyer的CSS Reset V1.0|200802内容：
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before,blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
} Eric Meyer V2.0|20110126
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6,
p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em,
img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,
dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption,
tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, menu, nav, output,
ruby, section, summary,time, mark, audio, video {
margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;}body {line-height: 1;
}
ol, ul {list-style: none;
}blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;}###2. normalize.css ####2.1 normalize.css什么？ normalize.css是一个可定制的CSS文件，使所有浏览器呈现HTML元素更一致和符合现代标准。 详见https://github.com/necolas/normalize.css
###3. 结论 为了显得高端大气，请毫不犹豫的使用normalize.css!
MIT License Copyright (c) 2013 一丝
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent