【翻译】CSS指南(1)——可持续CSS
前言:这篇翻译节选自两篇关于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文件最好自己再浏览一遍。