CSS编码规范

CSS编码规范

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

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

解释：

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

示例：

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

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

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

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

Formatting Model 相关属性包括：<code>position</code> / <code>top</code> / <code>right</code> / <code>bottom</code> / <code>left</code> / <code>float</code> / <code>display</code> / <code>overflow</code> 等

Box Model 相关属性包括：<code>border</code> / <code>margin</code> / <code>padding</code> / <code>width</code> / <code>height</code> 等

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

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

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

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

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

float 非 none

position 非 static

overflow 非 visible

如希望使用更小副作用的清除浮动方法，参见 A new micro clearfix hack 一文。

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

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

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

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

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

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

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

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

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

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

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

字体

操作系统

Family Name

宋体 (中易宋体)

Windows

SimSun

黑体 (中易黑体)

SimHei

微软雅黑

Microsoft YaHei

微软正黑

Microsoft JhengHei

华文黑体

Mac/iOS

STHeiti

冬青黑体

Hiragino Sans GB

文泉驿正黑

Linux

WenQuanYi Zen Hei

文泉驿微米黑

WenQuanYi Micro Hei

更详细说明可参考本文。

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

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

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

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

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

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

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

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

<code>transform: translate(npx, npx);</code>

<code>transform: scale(n);</code>

<code>transform: rotate(ndeg);</code>

<code>opacity: 0..1;</code>

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

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

在 Sublime Text 2 中， 使用 Selection → Add Previous Line (⌃⇧↑) 和 Selection → Add Next Line (⌃⇧↓)。

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

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

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

使用多个 <code>&lt;link&gt;</code> 元素

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