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开销
- 模块化指的是页面元素的模块化,比如通用按钮,选项卡,小图标等等,或页面固定框架,不适合分离
- 样式合并,不可分离样式的公共部分再进行合并,常见的就是背景图的合并,逗号隔开
- 分离与合并的共存
.txtw1,.w163{width:163px;} .txtw2{width:297px;} .txtw3{width:397px;} .txtw4{width:710px;}
- 精简高效的css代码是通力合作的结果
- 面向属性的命名,一种方法就是样式分离
- 三无原则,无id 无层次 无标签