前言：这篇翻译节选自两篇关于CSS书写规范和技巧的博文。CSS，或者其他语言的书写格式，各人都有各人的习惯，但是如果牵扯到可持续性，牵扯到你的代码未来可能被他人所重写、所重用，那么书写时采用一定的可读、可调用标准也就是十分有必要的。下面节选的都是自己认为比较重要、或者平时容易忽视的点，希望能帮到大家。
原文：
《Enduring CSS: writing style sheets for rapidly changing, long-lived projects》
1.支持技术和工具
不管你用Sass、LESS、Stylus、Myth哪种预处理工具来编写样式表，这些都不重要。重要的是，无论编写者的风格如何，预处理工具应该能便捷、快速地处理成其他元语言。
好的预处理工具满足以下要求就足够了：
* 变量名用不同的颜色标示出来，以防人为输入错误；而常量数字最好用度量的方式来指定
* 可自定义代码段风格，便于控制同一分支或者模板的代码中
* 支持基本数学运算，不要依赖于“magic number”（魔法数，没有来源、无法判断含义的数）
* 可控制代码显示颜色，使界面明晰
2.CSS书写风格
很多人都认为要写尽可能不重复（“DRY”）、高度抽象的样式，CSS文件要精简到最小。我却不这么想，相反，很多情况下，我并不会死守那些大众化规范。我写代码的首要目标，是使代码保持长期的稳定性，以适应快速发展的web应用的需求。
以下是我自己的“FUN”法则（Flat hierachy selectors 选择器浅继承 / Utility styles 采用实用样式 / Name-spaced components 元素分隔命名），仅供参考：
* 选择器浅继承：除了特殊情况，一般只用类选择器，尽量不使用ID选择器；如非必要，不要嵌套选择器。
* 采用实用样式：使用单一效用风格，如类名`w100`表示 `width:100%` ，`Tbl`表示`display:table;table-layout:fixed` 等等，它们的样式不因所应用的元素而改变。
* 元素分隔命名：一般每2-3个字母为一部分，中间用“-”隔开。如设置购物车（shoppingcart）类元素，则使用 `.sc-` 为类名前缀，如果是新版的购物车，那就用 `.sc2-` 作为前缀，以此类推。而元素内部的不同部件，则在“-”后加部件名即可，如购物车的`wrapper`则可使用 `.sc-wrapper` ，移除按钮则使用 `.sc-RemoveItem` ，等等。
我不担心CSS代码膨胀吗？
当然担心。不过，仔细想想，为了使代码尽可能简化，使用1对1、难以修改、难以重用的代码，面对快速发展的项目时时刻刻可能存在的修改要求下，你可能需要重新复制多种相同的样式赋予给新的元素，这样一来不仅没有节省空间，反而增加了许多重复的样式。而且，在对原版本进行删改时，你无法把原有元素对应的样式清除干净，即使在文本编辑器里使用ctrl+F遍历所有的CSS/JS文件，也不见得能把原有样式完全清理。
如果像我一样使用元素分割的方法来命名，那就可以很放心、很轻松地清除掉你不需要的样式。比如更换购物车的样式版本，只需要在CSS/JS里把全部 `.sc-` 前缀的样式去掉，在HTML中把标签里的`class=“sc-”` 替换为 `class=“sc2-”` 即可。
3.项目文件管理
一般我把不同的文件放置在不同的文件里，不仅按照它的文件类型分目录，还会根据它所控制的视觉元素来命名分组：
`html/
- shopping-cart-template.html
- callouts-template.html
- products-template.html
js/
- shopping-cart-template.js
- callouts-template.js
- products-template.js
css/
- shopping-cart-template.css
- callouts-template.css
- products-template.css`
这样一来，我们可以通过`include`在css中来调用其他的css文件。假如，我们需要制作一个站点的首页，那么它的css中只需要这样调用：
首页css（大小20KB）
`@include "core";
@include "_components/nav";
@include "_components/home-offer";`
而它其中一个子页面，则可以这样调用：
offers页css（大小45KB）
`@include "core";
@include "_components/forms";
@include "_components/login";
@include "_components/callouts";`
还有个小技巧，如果你需要调用某一页面文件夹里所有的样式文件或者其他元素，你只需要通过调用通配符即可：
`@include "_components/login/**";`
4.命名规则
说道CSS命名，并没有一套必须遵守的原则，适合自己的就是最好的。目前为止最通用的标准是经典BEM句法，有兴趣的读者们可以自行点击查看。
我自己的命名规则是：
[命名空间]-[元件名]_[变量名]-[可附加尾部]
那么，真实项目中的类名就大概是这样：`sc-Wrapper`、`sc-InnerItem_Odd`
不要过于抽象
对于逻辑型的编译文件，并不是越简洁越好。例如Sass中的传参过程，写得详细点，标注参数的意思，能更方便以后的理解。
`/* ===================================================
Table modifiers ===================================================
*/
$widths: 5 10 20 30 40 50 60 70 80 90 100;
%Tbl-base {
display: table;
float: left;
vertical-align: middle;
}
@each $width in $widths {
.tbl#{$width} {
@extend %Tbl-base;
width: $width * 1%;
}
}`
不要依赖编译器
现在，越来越多的CSS文件都是通过sass等类似工具整合编译的。不要过分依赖编译器，有时候它会加入一些你并不需要的代码，所以，编译过后的css文件最好自己再浏览一遍。
网友评论