《CSS Secrets》读书笔记<一>

浏览器前缀

浏览器前缀是为了解决web标准混乱而退而求其次的产物。但是后期被滥用，导致任务代码头部都是一大段浏览器前缀声明。最终的代码可能就是这样：</br>

-ms-border-radius : 10px;
-o-border-radius : 10px; 
-webkit-border-radius : 10px;
border-radius : 10px;```
  
这里面有两条生命是多余的。但是大家都习以为常。这样写的问题就是代码难以维护，虽然后来出现很多工具帮助大家去判断哪个浏览器需要前缀，但是仍旧是治标不治本</br>
目前大家已经抛弃浏览器前缀的使用，改为使用浏览器配置开关。
##减少代码重复
- 减少绝对值使用
软件开发中要遵循少即使多的原则，尽量减少改动时需要编辑的部分。如果我们只是想修改一个字号，那我们不应该还要修改行高来和字号进行适配。</br>这就要求我们在平常实际编码中减少绝对值的使用，如果要实现字号15px；行高30px的效果，那么实际编码过程中，我们应该这样设置

```font-size:100%;//假设父级字号为15px;line-height:2;

font-size:100%;//假设父级字号为15px;   
line-height:2;```
尽量使用em和百分比代替px。
- HSLA
HSLA即是代表色调，饱和度，亮度，透明度四个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。各个字母代表的意思如下所示：
>H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：
Saturation(饱和度)。取值为：0.0% - 100.0%
L：
Lightness(亮度)。取值为：0.0% - 100.0%
A：
Alpha透明度。取值0~1之间。

具体使用可以参照sketch的HSBA
![sketch的color属性.png](https://img.haomeiwen.com/i1111677/fa25ac6f62d0be81.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

##使用css预处理器
css预处理器在大型项目中能让代码更加灵活。但css预处理器也会导致调试困难，存在着学习的成本。如果可维护性对于你很重要，css预处理器是必不可少的，这里推荐大家学习[scss](http://www.ruanyifeng.com/blog/2012/06/sass.html)