高效、可维护、组件化的CSS

如何写出更加高效的CSS?

主要有以下四个关键点：

高效的CSS

可维护的CSS

组件化的CSS

hack-free CSS

1、书写高效的CSS代码

* 使用 外联样式 替代行间 样式或者内嵌样式.

* 为了兼容老版本的浏览器，建议使用 link 引入外部样式表的方来代替 @import 导入样式的方式.

* 使用 继承

低效的：

p{
font-family: arial, helvetica, sans-serif; }

#container {
font-family: arial, helvetica, sans-serif; }

#navigation {
font-family: arial, helvetica, sans-serif; }

h1 { font-family: georgia, times, serif; }

高效的： 

body {
font-family: arial, helvetica, sans-serif; }

h1 {
font-family: georgia, times, serif; }

* 使用 多重选择器

低效的： 

h1 { color: #236799; }

h2 { color: #236799; }

h3 { color: #236799; }

高效的： 

h1, h2, h3{ color: #236799; }

* 使用 多重声明

低效的： 

p { margin: 0 0 1em; }

p { background: #ddd; }

p { color: #666; }

高效的： 

p {

   margin: 0 0 1em;

   background: #ddd;

   color: #666;

}

* 使用 简记属性

高效的：

body {

 font: 85% arial, helvetica, sans-serif; background: url(image.gif) no-repeat 0 100%; margin: 1em 1em 0;
 padding: 10px;
 border: 1px solid red;

}

* 避免使用 !important

#news { background: #ddd !important; }

特定情况下可以使用 以下多层方式提高权重级别: 

#container #news { background: #ddd; }

2、书写可维护的CSS代码

* 在样式表开头添加一个注释块，用以描述这个样式表的 创建日期、创建者、 标记 等备注信息.

/*

---------------------------------

Site:      Site name Name
Author:      Name
Updated:     Date and time
Updatedby:    Name

---------------------------------

*/

* 包括公用 颜色标记

/*
---------------------------------
COLORS
Body background:    #def455

Container background:    #fff
Main Text:     #333

Links:     #00600f

Visited links:    #098761

Hover links:    #aaf433

H1, H2, H3:    #960

H4, H5, H6:    #000

---------------------------------
*/

* 给 ID 和 Class 进行 有意义 的命名

不推荐的命名方式：

.green-box { ... }

#big-text { ... }

推荐使用的命名方式：

.pullquote {... }

#introduction {... }

* 将 关联的 样式规则进行整合

#header { ... }

#header h1 { ... }

#header h1 img { ... }

#header a#skip { ... }

#navigation { ... }

#navigation ul { ... }

#navigation ul li { ... }

#navigation ul li a { ... }

* 给样式添加清晰的 注释

/*

---------------------------------

header styles

---------------------------------

*/

#header{ ... } 

/*

---------------------------------

navigation styles

---------------------------------

*/

#navigation { ... }

 

3、组件化 CSS

ep: Html文档引入了一个主样式表 

1. 将主样式表 拆分 成独立的样式文件

优势：更易于查找样式规则，简化维护，方便管理，还可以针对某一页面提供特定的样式。

2. 添加一个桥接样式文件

优势：可以随时添加或移除样式而不需要修改HTML文档。

3. 引入桥接样式

为什么要定义两种媒体类型？

NN4（第四代N氧化碳浏览器）不支持 @import，故识别不到桥接样式。

4. 将（分离的）CSS文件 导入 桥接样式中

@import 如何工作？

它将所有CSS规则从一个文件导入到另外一个文件。@import 不能被老的浏览器所识别。

概述：

对于 大型站点 来说，这是一个理想的概念

4、Hack-free CSS

假如想针对IE或者避开IE，可以使用 条件注释

1. 针对IE，创建一个新的样式文件

2. 在HTML文档的开头添加 条件注释 代码

只有指定的IE浏览器版本识别这个新的样式，其它的浏览器会彻底忽略它

条件注释的优点：

* no hacks

特定的CSS规则仅出现在新的样式表里

* 文件分离

针对特定版本的IE定义的 样式脱离了主样式表,可以 在IE浏览器升级更新对属性支持时 轻松移除这些文件. 

* 针对性

可对不同版本的IE浏览器有针对性的进行相关属性的定义。

<!--[if IE]>

<!--[if IE 5]>

<!--[if IE 6]>

<!--[if lt IE 6]>

<!--[if lte IE 6]>

<!--[if gt IE 6]>

<!--[if gte IE 6]>