如何使CSS--better（系列一）

我们想一下以下问题：

1、什么样子的css代码才是高效的？

2、什么样子的css代码才是便于维护的？

3、什么样子的css才是可扩展的？

带着以下问题咱们简单的说一下css的“性能”问题

虽然我技术不是很好  但是我会说以下的代码不要用

*｛margin:0; padding:0; border:none;｝

这样的代码如果你写出来的话那么不算一个前端（除非你做了一个很简单只有十行代码的demo）

那么咱们再看这个

.box{border:;}
.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 渲染是从右边到左边的 ！（重要的事情说三遍）