编写出色CSS代码的适用性建议

CSS对于广大前端攻城狮并不陌生吧，甚至可以说习以为常，其实CSS学起来并不难，但在大型项目中，就变得难以管理，特别是不同的人在CSS书写风格上稍有不同，团队上就更加难以沟通，编写好的CSS代码，有助提升页面的渲染速度。本质上，引擎需要解析的CSS规则越少，性能越好。MDN上将CSS选择符归类成四个主要类别，如下所示，性能依次降低。

  • ID 规则
  • Class 规则
  • 标签规则
  • 通用规则

对效率的普遍认识是从Steve Souders在2009年出版的《高性能网站建设进阶指南》开始，虽然该书中罗列的更加详细，但你也可以在这里查看完整的引用列表，也可以在谷歌的《高效CSS选择器的最佳实践》中查看更多的细节。

本文我想分享一些我在编写高性能CSS中用到的简单例子和指南。这些都是受到MDN 编写的高效CSS指南的启发，并遵循类似的格式。为此总结了一些如何实现高效整洁的CSS代码原则：

使用Reset但并非全局Reset

虽然这些年来随着浏览器的迅速发展与规范的统一，浏览器特性碎片化的情况有所改善，但是在不同的浏览器之间仍然存在着很多的行为差异。而解决这种问题的最好的办法就是使用某个CSS Reset来为所有的元素设置统一的样式，保证你能在相对统一干净的样式表的基础上开始工作。目前流行的Reset库有?normalize.css?，minireset以及?ress?，它们都可以修正很多已知的浏览器之间的差异性。而如果你不打算用某个外在的库，那么建议可以使用如下的基本规则:

*{ margin:0; padding:0; box-sizing:border-box; }

上面的规则看起来没啥用，不过如果不同的浏览器在默认情况下为你设置了不同的外边距/内边距的默认值，还是会挺麻烦的，但最好还是不要使用全局Reset。

这不仅仅因为它是缓慢和低效率的方法，而且还会导致一些不必要的元素也重置了外边距和内边距。在此建议参考?YUI Reset?和?Eric Meyer?的做法。我跟Eric Meyer的观点相同，Reset并不是一成不变的，具体还需要根据项目的不同需求做适当的修改，以达到浏览器的兼容和操作上的便利性。分享个比较实用的Reset如下:

/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p,
blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td, /* table elements 表格元素 */
img/* img elements 图片元素 */{
border:medium none;
margin: 0;
padding: 0;
}
/** 设置默认字体 **/
body,button, input, select, textarea {
font: 12px/1.5 '宋体',tahoma, Srial, helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
em{font-style:normal;}
/** 重置列表元素 **/
ul, ol { list-style: none; }
/** 重置超链接元素 **/
a { text-decoration: none; color:#333;}
a:hover { text-decoration: underline; color:#F40; }
/** 重置图片元素 **/
img{ border:0px;}
/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }

明白何谓Margin Collapse

不同于其他很多属性，盒模型中垂直方向上的Margin会在相遇时发生崩塌，也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时，只有二者中的较大值会被保留下来，可以从下面这个简单的例子来学习:

.square { width: 80px; height: 80px;}
.red { background-color: #F44336; margin-bottom: 40px;}
.blue { background-color: #2196F3; margin-top: 30px;}

使用Flexbox进行布局

在传统的布局中我们习惯使用Floats或者inline-blocks，不过它们更适合于格式化文档，而不是整个网站。而Flexbox则是专门的用于进行布局的工具。Flexbox模型允许开发者使用很多便捷可扩展的属性来进行布局，估计你一旦用上就舍不得了:

.container { ? ?display: flex; ? ?/* Don't forget to add prefixes for Safari */display: -webkit-flex;}

我们已经在Tutorialzine上提供了很多的关于Flexbox的介绍与小技巧，譬如5 Flexbox Techniques You Need to Know About。

一切应为Border-box

虽然很多初学者并不了解box-sizing这个属性，但是它确实相当的重要。而最好的理解它的方式就是看看它的两种取值:

  • 默认值为content-box，即当我们设置某个元素的heght/width属性时，仅仅会作用于其内容尺寸。而所有的内边距与边都是在其之上的累加，譬如某个<div>标签设置为宽100，内边距为10，那么最终元素会占用120(100 + 2*10)的像素。
  • border-box:内边距与边是包含在了width/height之内，譬如设置了width:100px的<div>无论其内边距或者边长设置为多少，其占有的大小都是100px。

将元素设置为border-box会很方便你进行样式布局，这样的话你就可以在父元素设置高宽限制而不担心子元素的内边距或者边打破了这种限制。

良好的命名习惯

无疑乱七八糟或者无语义命名的代码，谁看了都会抓狂。比如这样的代码：

.aaabb{margin:2px;color:red;}

我想即使是初学者，也不至于会在实际项目中如此命名一个class，但有没有想过这样的代码同样是很有问题的：

<h1>My name is <span class="red blod">Wiky</span></h1>

问题在于如果你需要把所有原本红色的字体改成蓝色，那修改后就样式就会变成这样：

.red{color:bule;}

这样的命名就会很让人费解，同样的命名为.leftBar的侧边栏如果需要修改成右侧边栏也会很麻烦。所以，请不要使用元素的特性（颜色，位置，大小等）来命名一个class或id，您可以选择意义的命名如：#navigation{...}，.sidebar{...}，.postwrap{...} 等等...

这样，无论你如何修改定义这些 class 或 id 的样式，都不影响它跟HTML元素间的联系。

另外还有一种情况，一些固定的样式，定义后就不会修改的了，那你命名时就不用担忧刚刚说的那种情况，如下：

.alignleft{float:left;margin-right:20px;}
.alignright{float:right;text-align:right;margin-left:20px;}
.clear{clear:both;text-indent:-9999px;}

那么对于这样一个段落

?<p class="alignleft">我是一个段落！</p>

如果需要把这个段落由原先的左对齐修改为右对齐，那么只需要修改它的 className 就为 align="right " 就可以了。

尽可能使用低优先级的选择器

并不是所有的CSS选择器的优先级都一样，很多初学者在使用CSS选择器的时候都是考虑以新的特性去复写全部的继承特性，不过这一点在某个元素多状态时就麻烦了，譬如下面这个例子:

a{ color: #fff; padding: 15px;}
a#blue-btn { background-color: blue;}
a.active { background-color: red;}

我们本来希望将.active类添加到按钮上然后使其显示为红色，不过在上面这个例子中很明显起不了作用，因为button已经以ID选择器设置过了背景色，也就是所谓的Higher Selector Specificity。一般来说，选择器的优先级顺序为：ID(#id) > Class(.class) > Type(header)

代码缩写

CSS代码缩写可以提高你写代码的速度，精简你的代码量。在CSS里面有不少可以缩写的属性，包括margin，padding，border，font，background和颜色值等，如果您学会了代码缩写，原本这样的代码：

li{
 　　font-family:Arial, Helvetica, sans-serif;
 　　font-size: 1.2em;
 　　line-height: 1.4em;
 　　padding-top:5px;
 　　padding-bottom:10px;
　　 padding-left:5px;
}

就可以缩写为：

li{
 　　font: 1.2em/1.4em Arial, Helvetica, sans-serif;
 　　padding:5px 0 10px 5px;
 }

如果您想更了解这些属性要怎么缩写，可以参考 “常用CSS缩写语法总结” 或者下载?CSS-Shorthand-Cheat-Sheet.pdf 。

利用CSS继承

如果页面中父元素的多个子元素使用相同的样式，那最好把他们相同的样式定义在其父元素上，让它们继承这些CSS样式。这样你可以很好的维护你的代码，并且还可以减少代码量。那么本来这样的代码：

#container li{ font-family:Georgia, serif; } 
#container p{ font-family:Georgia, serif; } 
#container h1{font-family:Georgia, serif; }

就可以简写成：

#container{ font-family:Georgia, serif; }

使用多重选择器

你可以合并多个CSS选择器为一个，如果他们有共同的样式的话。这样做不但代码简洁且可为你节省时间和空间。如：

h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; } 
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; } 
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

可以合并为：

h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

尽可能精简规则

在上面规则的基础上，你可以进一步合并不同类里的重复的规则。

// 糟糕的css
.someclass {
　　color: red;
　　background: blue;
　　height: 150px;
　　width: 150px;
　　font-size: 16px;
}
.otherclass {
　　color: red;
　　background: blue;
　　height: 150px;
　　width: 150px;
　　font-size: 8px;
}
// 不错的css
.someclass, .otherclass {
　　color: red;
　　background: blue;
　　height: 150px;
　　width: 150px;
}
.someclass {font-size: 16px;}
.otherclass {font-size: 8px;}

适当的代码注释

代码注释可以让别人更容易读懂你的代码，且合理的组织代码注释，可使得结构更加清晰。你可以选择做的样式表的开始添加目录:

?/* ======================
 *       1. Reset 
 *       2. Header 
 *       3. Content
 * =================== */

如此你代码的结构就一目了然，你可以容易的查找和修改代码。

而对于代码的主内容，也应适当的加以划分，甚至在有必要的地方在对代码加以注释说明，这样也有利于团队开发:

/*** Header ***/
#header{ height:145px; position:relative; } 
#header h1{ width:324px; margin:45px 0 0 20px; float:left; height:72px;}
/*** Content ***/
#content{ background:#fff; width:650px; float:left; min-height:600px; overflow:hidden;}
#content h1{color:#F00}/* 设置字体颜色 */
#content .posts{ overflow:hidden; } 
#content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; }
/*** Footer ***/
#footer{ clear:both; padding:50px 5px 0; overflow:hidden;} 
#footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; }

给你的CSS代码排序

如果代码中的属性都能按照字母排序，那查找修改的时候就能更加快速:

div{ 
 　　background-color:#3399cc; 
 　　color:#666; 
 　　font:1.2em/1.4em Arial, Helvetica, sans-serif; 
 　　height:300px; 
 　　margin:10px 5px; 
 　　padding:5px 0 10px 5px; 
 　　width:30%; 
 　　z-index:10; 
}

保持CSS的可读性

书写可读的CSS将会使得更容易查找和修改样式。对于以下两种情况，哪种可读性更高，我想不言而明。

/* 每个样式属性写一行 */
div{ 
　　background-color:#3399cc; 
　　color:#666; 
　　font: 1.2em/1.4em Arial, Helvetica, sans-serif; 
　　height:300px; 
　　margin:10px 5px; 
　　padding:5px 0 10px 5px; 
　　width:30%; 
　　z-index:10; 
} 
/* 所有的样式属性写在同一行 */
div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif; height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }

当对于一些样式属性较少的选择器，我会写到一行：

/* 选择器属性少的写在同一行 */
div{ background-color:#3399cc; color:#666;}

对于这个规则并非硬性规定，但无论您采用哪种写法，我的建议是始终保持代码一致。属性多的分行写，属性少的可以写一行（个人需求）。

组织好的代码格式

代码的易读性和易维护性成正比。下面是我遵循的格式化方法（更好的推荐）。

// 糟糕的css
.someclass-a, .someclass-b, .someclass-c, .someclass-d {
　　...
}
// 不错的css 
.someclass-a, 
.someclass-b, 
.someclass-c, 
.someclass-d {
　　...
}
// 更好的做法
.someclass {
　　background-image:
　　linear-gradient(#000, #ccc),
　　linear-gradient(#ccc, #ddd);
　　box-shadow:
　　2px 2px 2px #000,
　　1px 4px 1px 1px #ddd inset;
}

选择更优的样式属性值

CSS中有些属性采用不同的属性值，虽然达到的效果差不多，当性能上却存在着差异，如

区别在于border:0把border设为0px，虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。

而border:none把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。所以建议使用border:none;

同样的，display:none隐藏对象浏览器不作渲染，不占用内存。而visibility:hidden则会。

使用<link>代替@import

首先，@import不属于XHTML标签，也不是Web标准的一部分，它对于较早期的浏览器兼容也不高，并且对于网站的性能有某些负面的影响。具体可以参考《高性能网站设计：不要使用@import》。所以，请避免使用@import。

使用外部样式表

这个原则始终是一个很好的设计实践。不单可以更易于维护修改，更重要的是使用外部文件可以提高页面速度，因为CSS文件都能在浏览器中产生缓存。内置在HTML文档中的CSS则会在每次请求中随HTML文档重新下载。所以，在实际应用中，没有必要把CSS代码内置在HTML文档中：

<style type="text/css" > 
　　#container{ .. } 
　　#sidebar{ .. } 
</style>

或者：

?<li style="font-family:Arial, helvetica, sans-serif; color:#666; " >

而是使用导入外部样式表：

?<link rel="stylesheet" type="text/css" href="css/styles.css" />

避免使用CSS表达式（Expression）

CSS表达式是动态设置CSS属性的强大（但危险）方法。Internet Explorer从第5个版本开始支持CSS表达式。下面的例子中，使用CSS表达式可以实现隔一个小时切换一次背景颜色：

?background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

如上所示，expression中使用了JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。

表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

如果必须使用CSS表达式，一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。所以，在非不得已，请避免使用CSS表达式。

避免过度约束

一条普遍规则，不要添加不必要的约束。

// 糟糕的css
ul#someid {..}
.menu#otherid{..}
// 不错的css
#someid {..}
#otherid {..}

后代选择符最烂

不仅性能低下而且代码很脆弱，html代码和css代码严重耦合，html代码结构发生变化时，CSS也得修改，这是多么糟糕，特别是在大公司里，写html和css的往往不是同一个人。

// 糟糕的css
html div tr td {..}

避免链式（交集）选择符

这和过度约束的情况类似，更明智的做法是简单的创建一个新的CSS类选择符。

// 糟糕的css
.menu.left.icon {..}
// 不错的css
.menu-left-icon {..}

坚持KISS原则

想象我们有如下的DOM：

<ul id="navigator">
　　<li><a href="#" class="twitter">Twitter</a></li>
　　<li><a href="#" class="facebook">Facebook</a></li>
　　<li><a href="#" class="dribble">Dribbble</a></li>
</ul>

下面是对应的规则：

// 糟糕的css
#navigator li a {..}
// 不错的css
#navigator {..}

避免不必要的命名空间

// 糟糕的css
.someclass table tr.otherclass td.somerule {..}
// 不错的css
.someclass .otherclass td.somerule {..}

避免不明确的命名约定

最好使用表示语义的名字。一个好的CSS类名应描述它是什么而不是它像什么。

避免 !importants

认真的说，千万要避免使用!important，这可能会导致你在未来的开发中无尽的属性重写，你应该选择更合适的CSS选择器。而唯一的可以使用!important属性的场景就是当你想去复写某些行内样式的时候，不过行内样式本身也是需要避免的

遵循一个标准的声明顺序

虽然有一些排列CSS属性顺序常见的方式，下面是我遵循的一种流行方式。

.someclass {
　　/* Positioning */
　　/* Display & Box Model */
　　/* Background and typography styles */
　　/* Transitions */
　　/* Other */
}

以背景图方式使用Images

如果需要在响应式的环境下展示图片，有个简单的小技巧就是使用该图片作为某个<div>的背景图而不是直接使用img标签。基于这种方式配合上background-size与background-position这两个属性，可以很方便地按比例缩放:

img { width: 300px; height: 200px;}
div { width: 300px; height: 200px; background: url('http://cdn.tutorialzine.com/wp-content/uploads/2016/08/bicycle.jpg'); background-position: center center; background-size: cover;}
section{ float: left; margin: 15px;}

不过这种方式也是存在缺陷的，譬如你无法设置图片的懒加载、图片无法被搜索引擎或者其他类似的工具抓取到，有个不错的属性叫object-fit可以解决这个问题，不过该属性目前的浏览器支持并不是很完善。

使用transform添加CSS Animations

不建议直接改变元素的width与height属性或者left/top/bottom/right这些属性来达到动画效果，而应该优先使用transform()属性来提供更平滑的变换效果，并且能使得代码的可读性会更好:

.ball { left: 50px; transition: 0.4s ease-out;}
/* 糟糕的css */
.ball.slide-out { left: 500px;}
/* 不错的css */
.ball.slide-out { transform: translateX(450px);}

不要重复造轮子

现在CSS社区已经非常庞大，并且不断地有新的各式各样的库开源出来。这些库可以帮助我们解决从小的代码片到用于构建完整的响应式应用的全框架。所以如果下次你再碰到什么CSS问题的时候，在打算撸起袖子自己上之前可以尝试在?GitHUB?或者?CodePen?上搜索可行方案。

使用text-transform属性设置文本大写

.movie-poster {text-transform: uppercase;}

Em, Rem, 以及 Pixel

已经有很多关于人们应该如何使用em，rem，以及px作为元素尺寸与文本尺寸的讨论，而笔者认为，这三个尺寸单位都有其适用与不适用的地方。不同的开发与项目都有其特定的设置，因此并没有通用的规则来决定应该使用哪个单位，这里是我总结的几个考虑:

  • em – 其基本单位即为当前元素的font-size值，经常适用于media-queries中，em是特别适用于响应式开发中。
  • rem – 其是相对于html属性的单位，可以保证文本段落真正的响应式尺寸特性。
  • px – Pixels 并没有任何的动态扩展性，它们往往用于描述绝对单位，并且可以在设置值与最终的显示效果之间保留一定的一致性。

在大型项目中使用预处理器

估计你肯定听说过?Sass,?Less,?PostCSS,?Stylus这些预处理器与对应的语法。Preprocessors可以允许我们将未来的CSS特性应用在当前的代码开发中，譬如变量支持、函数、嵌套式的选择器以及很多其他的特性，这里我们以Sass为例:

$accent-color: #2196F3;a {
　　padding: 10px 15px;
　　background-color: $accent-color;
}
a:hover {
　　background-color: darken($accent-color,10%);
}

使用Autoprefixers来提升浏览器兼容性

使用特定的浏览器前缀是CSS开发中常见的工作之一，不同的浏览器、不同的属性对于前缀的要求也不一样，这就使得我们无法在编码过程中记住所有的前缀规则。并且在写样式代码的时候还需要加上特定的浏览器前缀支持也是个麻烦活，幸亏现在也是有很多工具可以辅助我们进行这样的开发:

在生产环境下使用Minified代码

为了提升页面的加载速度，在生产环境下我们应该默认使用压缩之后的资源代码。在压缩的过程中，会将所有的空白与重复剔除掉从而减少整个文件的体积大小。当然，经过压缩之后的代码毫无可读性，因此在开发阶段我们还是应该使用普通的版本。对于CSS的压缩有很多的现行工具:

选择哪个工具肯定是依赖于你自己的工作流啦~

多参阅Caniuse

不同的浏览器在兼容性上差异很大，因此如果我们可以针对我们所需要适配的浏览器，在caniuse上我们可以查询某个特性的浏览器版本适配性，是否需要添加特定的前缀或者在某个平台上是否存在Bug等等。不过光光使用caniuse肯定是不够的，我们还需要使用些额外的服务来进行检测。

Validate:校验

对于CSS的校验可能不如HTML校验或者JavaScript校验那么重要，不过在正式发布之前用Lint工具校验一波你的CSS代码还是很有意义的。它会告诉你代码中潜在的错误，提示你一些不符合最佳实践的代码以及给你一些提升代码性能的建议。就像Minifers与Autoprefixers，也有很多可用的工具:

代码压缩

当你决定把网站项目部署到网络上，那你就要考虑对CSS进行压缩，出去注释和空格，以使得网页加载得更快。压缩您的代码，可以采用一些工具，如YUI Compressor

利用它可精简CSS代码，减少文件大小，以获得更高的加载速度。

没了~ ?在这里只讲述了少数的规则，是我在我自己的CSS中，本着更高效和更易维护性而尝试遵循的规则。但由于本人见识和精力有限，我还是希望这些原则能帮助您更好的书写和管理您的CSS代码，不知对您是否有帮助，如果你想阅读更多的知识，我建议阅读MDN上的编写高效的CSS和谷歌的优化浏览器渲染指南。如果您有更好的建议，就给我留言吧谢谢~

赏

技术成就梦想，细节成就品质。