如何写出更加高效的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]>

巴特西

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

如何写出更加高效的CSS?

主要有以下四个关键点：

1、书写高效的CSS代码

2、书写可维护的CSS代码

3、组件化 CSS

4、Hack-free CSS

最新文章

热门文章