css命名规范和开发规范（开发优化）

• css基本规范

命名规范：使用BEM命名法

开发规范（优化）：推荐使用子选择器，避免使用低效选择器

1. 推荐写法

   #toc>.li{
   font-size: 14px;
   }

   浏览器是“从右往左”来分析 class 的，它的匹配规则是从右向左来进行匹配的。这里，浏览器首先会查找页面上所有的“li”节点，然后再去做进一步的判断：如果它的父节点的 id 为“toc”，则匹配成功。

   #toc li{
   font-size: 14px;
   }

   浏览器先便利所有的“li”节点，然后步步上溯其父节点，直到 DOM 结构的根节点（document），如果有某个节点的 id 为“toc”，则匹配成功，否则继续查找下一个“li”节点。

2. 避免使用低效的选择器

   CSS选择器具有高效的继承性，引用Steve Souders的话， CSS选择器效率从高到低的排序如下：
   1. ID选择器 比如#header
   2. 类选择器 比如.promo
   3. 元素选择器 比如 div
   4. 兄弟选择器 比如 h2 + p
   5. 子选择器 比如 li > ul
   6. 后代选择器 比如 ul a 7. 通用选择器 比如 *
   7. 属性选择器 比如 type = “text”
   8. 伪类/伪元素选择器 比如 a:hover

3. 尽量避免使用 filter

   IE 特有的 AlphalmageLoader filter 是为了解决 IE6 及以前版本不支持半透明的 PNG 图片而存在的。但是浏览器在下载 filter 里面的图片时会“冻结”浏览器，停止渲染页面。同时 filter 也会增大内存消耗。最不能忍受的是 filter 样式在每个页面元素（使用到该 filter 样式）渲染时都会被浏览器分析一次，而不是像一般的背景图片渲染模式：使用过该背景图片的所有元素都是被浏览器一次性渲染的。

   针对这种情况，最好的解决办法就是使用 PNG8

4. 不要直接修改标签的样式

5. 不要在标签上直接写样式

   4、5点都是因为在标签上写的样式权重太高了

6. 尽量不用 expression

   // background-color:expression((new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00”);

   Expression 只有 IE 支持，而且他的执行比大多数人想要的要频繁的多。不仅页面渲染和改变大小 (resize) 时会执行，页面滚动 (scroll) 时也会执行，甚至连鼠标在页面上滑动时都会执行。在 expression 里面加上一个计数器就会知道，expression 的执行上相当频繁的。鼠标的滚动很容易就会使 expression 的执行次数超过 10000。

7. 不要使用 @import url(1.css);

   对于 @import 和 两种加载外部CSS文件的方式： @import 就相当于是把 标签放在页面的底部，所以从优化性能的角度看，应该尽量避免使用 @import 命令。

8. 慎用 ！important

   应该优先考虑从样式的级联属性或者位置：
   切记以下情况永远不要使用!important:
   1. 全局样式
   2.组件（插件）样式
   可以使用!important:
   1. 覆盖组件或者插件中的style或者important的样式
   2. 自定义的一些页面用于覆盖全局样式等
   使用比原来的important样式优先级更高的选择器。
   /原来样式/
   #example {color: #f00!important}
   /覆盖样式/
   div#example { color: #ff0!important}

9. 绝对不要在css中使用 “*”选择符