标签：
我们想一下以下问题：
1、什么样子的css代码才是高效的？
2、什么样子的css代码才是便于维护的？
3、什么样子的css才是可扩展的？
带着以下问题咱们简单的说一下css的“性能”问题
虽然我技术不是很好 但是我会说以下的代码不要用
*｛margin:0; padding:0; border:none;｝
这样的代码如果你写出来的话那么不算一个前端（除非你做了一个很简单只有十行代码的demo）
那么咱们再看这个
.box{border:0;} .box{border:none;}
这两行代码哪一种更好 可能很多人都觉得 一样 （其实不一样） 最后一行代码浏览器解析是不会做出渲染动作的 也就不会消耗内存值 同理以下代码也是最后一个代码更好 道理同上
.box{visibility: hidden;} .box{display: none;}
哈哈。。不会这么简单吧。。。。（答案是不会）
大家都知道 #box{/*里边是代码*/} 的渲染是最快的 但是千万不要出现这种代码 例如
ul#main-navigation{}
ID 是唯一的，所以不需要用标签修饰，这只会让它更低效。
当然也不需要
ul.classbox{}
直接写上classbox这个类名更高效一点，因为css渲染是从右边到左边渲染的 ，他找到了 classbox 还需要匹配ul标签，何不直接匹配呢？ 就像jq的操作dom 一样（扯远了。。。）
后代选择器是CSS里最昂贵的选择器，昂贵得可怕——特别是当它放在标签和通用符后面时
html body ul li a { }
这个绝对不可以啊 这需要匹配多少次啊 让你去做匹配你不累啊。。。（人性化一点）
PS:
1、千万不要用 css表达式 可能有人跟你说那个东西很强大，对就是很强大，强大到我有一点恐惧，因为他为了计算的很精确他会不停的计算 你可能写一个表达式就是计算一下某个合资的高度除以2 但是你会发现当你滑动屏幕或者缩小屏幕 甚至鼠标划上去 特也会计算 计算高达上千次 不是谎话。。
2、千万不要用important! 至于为什么 等你看到上百行代码都加了这个的代码 然 让你改版的时候你都想砸电脑了。。。无非就是提高层级 换成 css 的层级 实在不行咱们去覆盖也比这个坏蛋要强。。
以下为需要注意的 ：
一：css 命名 、书写规范；（好的代码看上去就很整齐 很有条理性这样方便日后的维护和管理）
二：css优先级； 选择器权重：内联样式：1000，id选择器：1000， class选择器：10，标签选择器：1 注意权重的问题。
三：少用滤镜，少用hack，少用position：absolute；。
四：多用继承属性。
五：使用简写样式：例如margin: 10px; 浏览器会解释为上下左右各有10px的外补丁。margin： 0 10px 浏览器解析为 左右有10px的外补丁。
六：
不要在ID选择器和class选择器前 使用标签名 例如：div.box { color: #f00; }; 直接 可以 用类名， .box {
color:#f00;} 这样浏览器找到这个class后 就不用再匹配是否存在div标签.从而提高了渲染效率。当然同一级的
有不同的样式可以这样写，但是不建议这样。
七：css的层级关系不要太深 用class直接代替多余的层级元素。例如 .box .box-con .box-list li { line-height: 24px; } 这么长。。。增加代码量减小开发效率。刚也说了，css渲染是从上到下，从右到左的
所以直接这样写就可以了.box-list li { line-height: 24px; };
八：平铺背景图片不要过小，影响渲染速率。
九：float使用要谨慎。
十：合理化布局（模块化布局）；可以把样式划分为 基类 和扩展类 ;模块化布局 ：模块基本相同的样式写在 基类里，不同的在重新用class来定义称为扩展类 。
CSS 优先级法则：
A 选择器都有一个权值，权值越大越优先；
B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
C 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
D 继承的CSS 样式不如后来指定的CSS 样式；
E 在同一组属性设置中标有“!important”规则的优先级最大；
PS: css 渲染是从右边到左边的 ！，css 渲染是从右边到左边的 ！，css 渲染是从右边到左边的 ！（重要的事情说三遍）
标签：
原文地址：http://www.cnblogs.com/ling-du/p/4773487.html
