语义化。
2、
class 跟 id 最大的不同就是一个元素可以有多个 class，但只能有一个 id。所以 class 应该是分散的、抽象的。比如要定义“红色按钮”和“蓝色复选框”，应该定义成“.red.button”、“.blue.checkbox”，而非“.red-button”、“.blue-checkbox”。这样一来不利于日后扩展（蓝色按钮和红色复选框）；二来这相当于为每个元素单独定义了class，class 未复用。
3、
利用好 CSS 的后代选择器、兄弟选择器等等，即使同为一个 .header，在 .nav 和 .cell 下也会是不同的（当然如果你非要定义成 .nav-header 和 .cell-header 也不是不可以）
4、
如果引入了第三方样式库，为了避免和它的命名冲突，通常做法是在你自己的CSS前加前缀，比如为每一个 class 加前缀“ui-”之类的。
5、
如果引入了两个第三方样式库本身就冲突，那……
6、
多看看主流的开源样式库是如何定义的，比如 Bootstrap、jQuery UI、WeUI 等等等等，不一一列举了。但要记得“尽信书不如无书”，这些框架未必做的就是百分百对的，其实存在很多设计不合理的地方，原因是在最开始未规划好给后来挖了坑，后来发现时想改已经来不及了（因为毕竟得尽可能兼容之前的版本，大多数时加法好做减法不好做）。
1. 内联样式表的权值最高 1000；
2. ID 选择器的权值为 100
3. Class 类选择器的权值为 10
4. HTML 标签选择器的权值为 1
一个元素的选择器的权值是所有选择器权值的和，冲突的时候根据权值执行，权值高的优先执行，如果权值相等，后面的会覆盖前面的
