css最佳实践

1. 样式分离

实际上，CSS有几十种不同的属性，撇开一些不定参数（例如宽度，高度，颜色值）的样式，CSS的基础构成也是非常有限的，例如下面截取的的一小段CSS库样式（命名仅供参考）：

总结这一节的核心观点，其实不难理解，就是“构成的基本元素越是独立，越是最简，其组合的可能性，元素的利用率越是高！”，CSS样式越是分离，其样式的利用率和覆盖率就越高，CSS代码就越精简！

万物守恒，CSS的精简会导致部分HTML代码的开销增大。本节重点在于理论，实际情况下面再叙述

隐形的阀值,是一个单css文件还是多css文件的阀值

实际上，我是可以保证，一个CSS文件就可以搞定整个网站项目（前提是网站的风格要统一，要是这一个页面婉约派，另外一个豪放派，那就没辙了）的。但是，不是每个人都可以实现的，这需要对CSS理解透彻，知道如何使用最简单的代码实现同样的兼容性的效果；还要知道对整站CSS进行架构，还需要知道样式要适时合并。

要想CSS足够精简高效，请使用流体布局，少或无CSS reset，样式分离，样式合并，样式架构，理解所谓的“兼容性”。

2. 流式布局

学习taobao新首页

3. 无reset

不足:

CSS文件的大小
显然，CSS reset平白无故的增加了CSS文件的大小，虽然，增加的大小可能有限，但是，要知道，即使0.1秒的载入时间差异也会影响互联网企业的收入的。

样式的重置
许多的CSS样式要重写与重新覆盖，典型的多此一举。

CSS的渲染
这可以说是最大的问题，样式无缘无故增加了很多的渲染，想想看，一个项目或是一个页面中有多少个div标签，居然使用div{margin:0; padding:0;}当然，*{margin:0; padding:0;}更是无法容忍的。

没有存在的必要性

一般进行布局时,都会对h1, ul ol的margin 和padding进行限定,所以那时再规定好了,这样减少了不必要的渲染

所谓的浏览器兼容性:

我所知道的就是h1标签的文字的大小，在有些浏览器下大些，有些小些；然后就是一些margin值的些许偏差，然后还有呢？事实上，目前浏览器而言，对于这些默认标签的属性其实差异是很少很小的，兼容性一说实在不能用在标签的默认属性上。

      css库的概念

css库就是提出了一些公用的东西

4. css样式的合并与模块化

分离可以精简css,但带来极大的html开销

• 模块化指的是页面元素的模块化,比如通用按钮,选项卡,小图标等等,或页面固定框架,不适合分离
• 样式合并,不可分离样式的公共部分再进行合并,常见的就是背景图的合并,逗号隔开
• 分离与合并的共存

原则: 模块化的东西不适合分离,但可以局部分离

比如:我们可以分离出一个163像素宽度的样式w163，同时与txtw1进行合并，这样，就实现了样式重用，又规避了潜在风险，于是，我们会有如下的样式代码：

.txtw1,.w163{width:163px;}
.txtw2{width:297px;}
.txtw3{width:397px;}
.txtw4{width:710px;}

• 精简高效的css代码是通力合作的结果

5. 精简高效的css命名方法

高可重用性和不会有样式冲突的原则:

• 面向属性的命名,一种方法就是样式分离
• 三无原则,无id 无层次 无标签

要知道，层级啊，标签啊作用是什么，是用来提高CSS优先级，把那个字母长的让人发毛的”!important”干掉的。

http://www.zhangxinxu.com/wordpress/2010/08/%E7%BF%BB%E8%AF%91-%E4%B8%8D%E5%90%8Ccss%E6%8A%80%E6%9C%AF%E5%8F%8A%E5%85%B6css%E6%80%A7%E8%83%BD/