CSS——笔记的重点部分

1. CSS代码组织。

之前在《编写高质量代码》这一本书中看到过，两个评估应用css的的能力：第一，使用css控制页面的样式（CSS API）; 第二，对css进行组织的能力（CSS 框架）。

在实习的时候，自己感觉用CSS控制页面样式是比较容易解决的问题。但是，涉及到CSS进行组织的时候头就会变的很大。

书中有写到三种组织方式：

方式1：按功能

layout.css

color.css

font.css

方式2：按区块

head.css

foot.css

sidebar.css 

main.css

方式3：按组织方法（推荐）

base.css

common.css 

page.css

自己之前使用一些模板页，就有看到第一种做法，这一种做法对于我来说以后可能会用到的地方应该是“换皮肤”这一个功能（还没有尝试过）。而第二种方法，也没有尝试过，但是想了一下，如果是一个网站，foot.css的代码很少，却还要加载多这一个css源文件的链接。而对应到不一样的页面，“main”这一个部分的css里面的内容也会不一样，也就会造成main.css的膨胀。

后面书上对第3种方式进行了解释：

Base层：提供css reset 功能和粒度最小的通用类——原子类

详解：被所有页面引用，是页面样式所需依赖的最底层，这一层与具体UI无关，无论何种风格的设计都引用它。(里面有两个部分的代码，第一个部分是css reset(这一个部分在每一个页面的 实现上都显得非常的重要)，第二部分是使用属性名来命名的常用css属性， 例如：pt10{padding-top: 10px;}.)

Common层：位于中间，提供组件级的css类。将大量重复的模块视为一个组 件。

详解：相当于MVC模式中的M（模型）。即这一些可以说是UI组件，而UI 组件是网站中的单位，在网站内部可高度重用，但不同的网站可以用不同的组 件。（这一点有稍 微实践过，但是还是觉得实现起来很困难，因为页面中不同 的模块的相似组件要达到统一，要把那些差异的影响降到最低，而这一点，自 己还很难做好）。

Page层：每个页面都有自己的page层的CSS

通常，common层是由一个人负责的，而page层的代码则是由多个人来开发的。

2. CSS代码的命名准则

昨天在网上看到了一篇和CSS命名准则的文章，它里面有讲到一句话，CSS的命名就应该直接了当，直捣黄龙。以下是对这一篇文章的总结：

1） 面向属性的命名方法。

这一点在之前看到过的base.css中有使用过，例如：pt10{padding-top：10px;}，对 应到这一种原子元素，即具有不确定的因素是比较大的，但又要经常使用到，则直 接使 用属性名可让CSS发挥最大的重用性。

对应到一些语义强烈的命名，则有它们另外的用途，但是要注意的是，越是语义强烈的命名，则越是没有重用性。

2） 精简高效CSS命名的“三无原则”：

* 没有id

* 没有辈分层级

* 没有标签

第一点是没有id，我自己的体会是有两个方面的原因：其一是id在CSS的命名中 优先级（100）会比较高。也就是，如果某一个元素的CSS用了id来标识的时候， 那么， 这     个元素的某一些属性如果要重新覆盖上去的时候就需要更高的优先级。其 二是javascript中经常要使用id来做元素的标识，这样CSS也用，javascript也用， 会造成耦 合     性太大，这对于代码的分离是非常不好的。

第二点是没有辈分分层级。我觉得主要的问题还是CSS的渲染效率问题，CSS渲染元素和使用javascript获取页面元素是完全不一样的。CSS的渲染方式是由右往左的，在这     里就不难看到，如果是：.a .b{padding:10px;}和.b{padding:12px;}，则第一种方式css要先查找到.b再查找到.a才能最终确定下来（有可能要向上查很多层），则会有问题，而     第二种方式，则CSS直接找到.b就查到了对应的那些class相对应的元素。当然，除了上面说的渲染效率问题，也可以减少CSS文件的大小。

3. 关于CSS的一些细节性的问题：

1） CSS sprite : 将网站上的多张背景图片合并到一张大图片上。

使用它的好处：对应到html页面，如果http请求数越多，则访问服务器的次数就 越多。而图片的加载会发送HTTP请求，一张图片需要一条HTTP请求，如果一个 页面需要加载多张图片，那么它会相应地发出多条HTTP请求。

即总结：将多张图片合并成一张大图，会大大地减少网页的http请求数，减少服 务器压力。

2） 行内标签及块级标签的特点：

——行内元素：

* 和其它元素都在同一行上

* 高，外边距，内边距都是不可以改变的

* 宽度就是它的文字或图片的宽度，不可改变

* 只可容纳行内元素

——块元素特点：

* 总是在新行出现

* 高度，内边距，外边距都是可以控制的

* 宽度默认为容器的100%

* 可容纳内联元素及其它元素

3） Pre

预格式文本，它保留了空格及换行，这个标签很适合直接显示计算机代码。

4） 目前搜索引擎不解析CSS内容，如果页面中每一个样式都用CSS进行控制，由搜 索引擎就识别不了页面中相关内容样式，也就不能根据这些内容的样式判断页面的 相关性。所以如果是页面中的主辅关键字，则必须使用HTML标签，例如<h1>,<h2>(它们在搜索引擎中的解析排行是比较高的)。

5） display:inline-block: 将对象呈递为内联对象，但是对象的内容作为块对象呈递，旁边的内联对象会被呈递在同一行内。

*  position:absolute，float:left，float:right，float:both 会隐匿地让元素以display：inline-block出现，不论什么类型的元素（display;none除外）。

    * 只有对应到内联元素使用inline-block,ie7以上的浏览器才会适应，而ie6则还是会出现问题，解决方法是使用float:left;display;block，之后再对其样式进行调整。

6）css属性的兼容性问题

如果是书写传统的html页面，而又要向下兼容到ie7，甚至是ie6，那么就要非常小心地使用某一些标签了。例如，“>”这一个选择器在ie6中不兼容；first-child在ie6中不兼容，而在ie7及ie8中则部分兼容；last-child在ie6到8都不兼容。

4. 其它

关于CSS，就先记录这一些东西吧，其它的一些东西，等到以后想到的时候再慢慢地增加进来。