Less、SASS、stylus都是动态的CSS语言,给CSS带来了很多的语言特性,比如变量、复用的css片段、带argument变量的mixin、适当的嵌套,当然还有一些其它的特性。不过有些需要注意的地方,写的时候可以稍微考虑下。

嵌套造成的selector over qualified

有时候我们可能会看到这样组织CSS的代码

.wraper {  }
.wraper .level-one {  }
.wraper .level-one .level-two {  }
.wraper .level-one .level-two 

这样将selector写得越来越长的初衷可能是为了层次上的更清晰,区域性更明确,在less这样的语言里嵌套是一个很适用的特性,它能够减少书写的代码,更加清晰的组织区域性,但稍不注意,写出很深的嵌套,最后生成的CSS代码很容易出现太长的selector,而这样的selector会拖慢浏览器渲染样式的速度,这篇文章介绍了怎么避免书写低效的CSS selector。

公共代码不适当的使用

我们常常需要不同主题的button,但是它们的基本样式一般是相同的,比如我需要的是.normal-btn和.primary-btn,一种less的写法如下

.btn {
    border: solid 1px #black;
    padding: 5px 8px;
}

.normal-btn {
    .btn;
    background: whitesmoke;
}

.primary-btn {
    .btn;
    background: blue;
}

这样写看起来是减少了书写的代码,但实际上最后生成的CSS代码中.normal-btn和.primary-btn中会出现相同的一段代码,这样其实是增加了CSS文件的大小。更好的做法是去掉.normal-btn和.primary-btn中的.btn,在使用的时候给元素加上这样的class:class="btn normal-btn"(就像bootstrap那样)。其实这里涉及到如何分解样式的问题,作为公用的代码更多的是从一般性去考虑,如果一个公共代码片段应用到一组相同性质的元素的样式里,就应该考虑将其提出该元素的样式。