css secrets（1）

css

1,hsla 表示半透明的白色

background-color:hsla(0,0,100%,.2) 

分别指：

• 色相(hue) 0-360:
  
  • 0:red
  • 120: green
  • 240: blue
• 饱和度(saturation)
• 亮度（lightness）

2, currentColor 存储text color,类似于em 存储font-size.
他默认会作为border-color,text-shadow,outline-color,box-shadow等的initial color,如果没有特别声明的话。

3，应对视觉误差

• 给top,bottom更小的padding：
  给一个有文字的容器设置相同的padding的时候，上下距离看起来会更多。因为文字看起来在左右方向会舒展，相应的padding显得更小。

• 圆看起来比同样大小(边长)的正方形要小，因此需要设置更大的radius.

4，避免响应式布局
尽量少用media。 query。原因有三点：

• 设置了以后，每个css都会去检查是否有media query的设置，应该作为the last choice。或者当横竖屏的时候也可以考虑。
• 因为它其实是不连续的，有若干个断点。不能平稳过渡。
• 设备很多..要兼容各种设备只通过媒体查询，工作量很大，break point多，而且其实不灵活。相当于写死了。

那么该怎么做才能作为媒体查询的替代方案呢：
- 用百分比替代写死的宽度，或者用viewport-relative units(vw,vh,vmin,vmax)
- background-size:cover使得图片全屏，但是需要注意的是，在手机端，这些应该是要被scale down的，而不是拉伸的。
- 尽量用column-width替代column-count，这样的话对小屏友好，可以使得一行只有一列。

5，尽可能用缩写，short hand. 一方面可以压缩代码，另一方面可以迅速的reset其他你不需要的属性设置。
- 比如设置background：rebeccapuple，background-color：rebeccapurple，两者就不一样，有时候后者还会受其他属性的影响，比如background-image,同时存在。

• 看到重复多次的属性，可以抽出来统一设置。或者先总写，再覆盖。

eg1.

//bad
border-width: 10px 10px 10px 0;

//good
border-width: 10px;
border-left-width: 0;

//bad
background: url(tr.png) no-repeat top right / 2em 2em,
url(br.png) no-repeat bottom right / 2em 2em,
url(bl.png) no-repeat bottom left / 2em 2em;
//good
background: url(tr.png) top right,
url(br.png) bottom right,
url(bl.png) bottom left;
background-size: 2em 2em;
background-repeat: no-repeat;

6,是否该用css预处理器。
优缺点都有，见仁见智。不过需要注意的是，原生的css写法有时候有预处理器没有的优势。比如
cal 100%-50px，这种要在执行时才能知道的属性是没有办法在预编译的时候识别的。但是原生的就可以。

然后插播了一条广告，一个css 预处理器 myth,只用写css,不用考虑兼容性，它自动回帮你做css polyfill的处理。

不是很明白的部分