1、推荐使用HSLA而不是RGBA来产生半透明的白色
理由：HSLA的字符长度更短，敲起来更快。重复度更低。
RGBA
语法：rgba(0-255,0-255,0-255,0-1)
示例：50%透明度的黑色
background-color: rgba(0,0,0,.5);
拓展：
①HEX十六进制黑色：background-color: #000000;
②RGB：background-color: rgb(0,0,0);
?RGB+opacity：
background-color: rgb(0,0,0);
opacity: .5;
HLSA：
HLS，是按照人类对颜色认知的习惯来生成的一种颜色表示法，H 表示色相（hue），其值的范围是0~360，S表示饱和度（saturation），其值范围是0~100%，L 表示亮度（light），其值范围是0~100%。
色相，hue，0/360表示红色，60表示黄色，120表示绿色，180表示青色，240表示蓝色，300表示紫色/品红色
饱和度，saturation，表示纯色加灰度的量，0%颜色为灰色，100%最鲜艳，每一处都为纯色
亮度，light，加白亮度高，加黑亮度低
HLSA，A为alpha通道，表示不透明度，0/.5/1
希望子号和其他尺寸能与父级的字号建立关联，则建议使用em单位
px：
px，pixel，像素，相对长度单位，相对于显示器分辨率而言。
特点：
①IE无法调整那些使用px作为单位的字体大小
②国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位
? Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)
示例：
font-size: 1px;
em：
em，相对长度单位，相对于当前对象内文本的字体尺寸。
如果当前对行内文本的字体尺寸还未被设置，则相对于浏览器的默认字体尺寸
特点：
①em的值并不是固定的
②em会继承父级元素的字体大小
?任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px
则12px=0.75em,10px=0.625em
注意：
为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px，即12px=1.2em, 10px=1em。所以我们在写CSS的时候，需要注意三点：
- 1. body选择器中声明Font-size=62.5%；
- 2. 将原来的px数值除以10，换上em即可作为单位；
- 3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明；
划重点，这也避免了1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，但是在声明#content内部的p的字体大小时就只能是1em，而不是1.2em， 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。
示例：
padding: .3em .8em;
height: 2em;
rem：
rem，root em，相对单位，相对的是html跟元素
特点：
这个单位可谓集相对大小和绝对大小的优点于一身，通过它
①既可以做到只修改根元素就成比例地调整所有字体大小
②又可以避免字体大小逐层复合的连锁反应
但在某些情况下，你可能希望这些尺寸是和根级子号，即<html>元素的字号，是相关联的。此时使用em，可能会产生复杂的计算，因此，可以使用rem单位。在CSS中，相关性是一个很重要的特性，必须清楚到底哪些东西是真正相关的。
示例：
font-size: 12rem;
结语：
选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。
对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。
避免不必要的媒体查询
媒体查询
响应式设计，responsive design，是一种让网站针对不同的浏览器和设备呈现不同的显示效果。
媒体查询，media queries，@media，实现响应式设计的最强大的工具。常用的应用是使用百分比宽度来布局，当浏览器变窄，并且无法容纳侧边栏中的菜单时，把布局显示成一列：
@media screen and (min-width:600px) {
nav { float: left; width: 25%; }
section { margin-left: 25%; } }
@media screen and (max-width:599px) { nav li { display: inline; } }
更多可前往
遵从“尽量减少代码重复”所描述的原则对媒体查询的使用也是很有帮助的，因为你不需要去覆盖媒体查询里同样数量的声明，这在本质上减轻了它们所产生的维护成本。
避免不必要的媒体查询的建议：
①使用百分比长度代替固定长度，或者尝试使用与视口相关的单位，vw，vh，vmin，vmax等，这些值解析为视口宽度或高度的百分比
②假如需要在较大分辨率下得到固定宽度，使用max-width，可以无需使用媒体查询
?记得为替换元素，比如img、object、video、iframe等，设置一个max-width，值为100%
④假如背景图片需要完整地铺满整个容器，不管容器尺寸如何变化，background-size: cover这个属性都可以做到，但是，我们也要时刻牢记，带宽不是无限的，因此在移动网页中通过CSS把一张图片缩小显示往往不是太明智
?当图片，或者其他元素需要以行列式进行布局时，让视口的宽度来设定列的数量，弹性盒布局flexbox或display: iinline-block加上常规的文本折行行为，都可以实现
⑥在使用多列文本时，指定column-width列宽而不俗指定column-count列数，这样可以在较小的屏幕上自动显示为当列布局
总的来说，尽最大努力实现弹性可伸缩的布局，并在媒体查询的各个断点区间内指定相应的尺寸，当网页本身的设计足够灵活时，让它变成响应式应该只需要一些简短的媒体查询代码。
结语：
弹性可伸缩、响应式设计，即想让网页在一堆不同的设备上合理展示，只需要在最终产品上添加一些CSS媒体查询即可。前提是你的布局使用的方法足够弹性可伸缩（如上面的几种方法）。因此，优化网页在小屏幕的表现，其实只意味着把一些外边距收拢到最小程度，然后因为屏幕太窄无法显示双列的侧栏调整为单列布局而已。
CSS简写属性和展开式属性
简写属性：background: red;
展开式属性：background-color: red;
注意，要合理使用简写：
或者说，不要害怕使用简写属性，因为，展开式属性在未来会越来越多，那时代码则无法完全覆盖了，合理使用简写是一种良好的防卫性编码方式，可以抵御未来的风险。
当然，如果要明确地区覆盖某个具体的展开式属性并保留其他相关样式，那就需要使用了。所以，展开式属性和简写属性的配合使用其实更加常用并且有用。
比如，把写在某一简写属性里的多个相同的部分提取出来：
background: url() top right, url() bottom right, url() top left;
background-size: 2em 2em;
background-repeat: no-repeat;
应该使用预处理器如less、sass吗？
现在有很多CSS预处理器，比如Stylus、Sass、LESS等，它们为CSS的编写提供便利，比如变量、mixin、函数、规则嵌套、颜色处理
特点：
1、适用于大型项目中，可以让代码更加灵活、健壮、DRY
2、CSS的文件体积和复杂度可能会失控（编译之后）
3、调试难度会增加，因为在开发工具种看到的代码不是自己写的CSS源代码（不过，这个问题已经大大好转，因为已经有许多调试工具开始支持SourceMap，SourceMap是一种非常酷的新技术，可以告诉浏览器哪些编译生成的CSS代码对应哪些预处理器CSS代码）
4、预处理器在开发过程中会引入一定程度的延时，因为需要等待代码编译成CSS