高效的CSS

高效的可维护的, 组件化的【译】

你对CSS了解多少?

“ ” 如何写出更加高效的CSS呢?

让我们来看看 4个关键点

高效的CSS 可维护的CSS 组件化的CSS hack-free CSS

书写高效CSS

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

不推荐使用行间样式::

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head>
<meta http-equiv="content-type" content="text <title>Page title</title> </head> <body> <p style="color: red"> ... </p> </body> </html>

不推荐使用内嵌样式::

推荐使用外联样式::

为了兼容老版本的浏览器，建议使用link引入外部样式表的方来代替 @import导入样式的方式. 译者注： @import是CSS2.1提出的所以老的浏览器不支持，点击查看 @import的兼容性。@import和link在使用上会有一些区别，利用二者之间的差异，可以在实际运用中进行权衡。关于@import和link方式的比较有几篇文章可以拓展阅读： @import vs
link、don’t use @import 、 Flash of Unstyled Content (FOUC) .

不推荐@import导入方式::

推荐引入外部样式表方式::

使用继承

低效率的::

p { font-family: arial, helvetica, sans-serif; } #container { font-family:
arial, helvetica, sans-serif; } #navigation { font-family: arial, helvetica, sans-serif; } #content { font-family: arial, helvetica, sans-serif; } #sidebar { font-family: arial, helvetica, sans-serif; } h1 { font-family: georgia, times, serif; }

高效的::

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

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

使用多重选择器

低效率的::

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

高效的::

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

使用多重声明

低效率的::

p { margin: 0 0 1em; } p { background:
#ddd; } p { color: #666; } 译者注：对于十六进制颜色值，个人偏向于色值不缩写且英文字母要大写的方式.

高效的::

p { margin: 0 0 1em; background: #ddd; color: #666;
}

使用简记属性

低效率的::

body { font-size: 85%; font-family: arial, helvetica, sans-serif; background-image: url(image.gif);
background-repeat: no-repeat; background-position: 0 100%; margin-top: 1em; margin-right: 1em; margin-bottom: 0; margin-left: 1em; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-style: solid; border-width: 1px; border-color: red; color: #222222;

高效的::

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; color: #222; }

避免使用 !important

慎用写法::

#news { background: #ddd !important; }

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

#container #news { background: #ddd; } body #container #news {
background: #ddd; }

那么,如何让(后续)维护你站点的人更容易理解你的样式代码呢？

书写可维护的CSS

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

/* --------------------------------- Site: Site name Author: Name Updated: Date and
time Updated by: 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 form { ... } #header a#skip { ... } #navigation { ... } #navigation ul { ... } #navigation ul li { ... } #navigation ul li a { ... } #navigation ul li a:hover { ... } #content { ... } #content h2 { ... } #content p { ... } #content ul { ... } #content ul li { ... }

给样式添加清晰的注释

/* --------------------------------- header styles --------------------------------- */ #header { ... }
#header h1 { ... } #header h1 img { ... } #header form { ... } /* --------------------------------- navigation styles --------------------------------- */ #navigation { ... }

接下来, 如何管理你整站的CSS文件呢？

组件化 CSS

举个例子: 你的Html 文档引入了一个主样式表 HTML文档主样式表

步骤一将主样式表拆分成独立的样式文件 HTML 文档 container.css header.css content.css

为什么要拆分样式文件? 更易于查找样式规则.简化维护，方便管理.还可以针对某一页面提供特定的样式.

步骤二添加一个桥接样式文件 HTML 文档桥接样式文件

为什么要添加桥接样式？你可以随时添加或移除样式而不需要修改 HTML文档.

步骤三引入桥接样式文件 HTML 文档桥接样式文件

为什么要定义两种媒体类型？ NN4不支持@import，故识别不到桥接样式.

步骤四将(分离的)CSS文件导入桥接样式中 HTML 文档桥接样式文件

@import ‘header.css’; @import ‘content.css’; @import ‘footer.css’;

@imports 如何工作? 它将所有CSS规则从一个文件导入到另外一个文件. @import 不能被老的浏览器所识别.

概述? HTML 文档桥接样式文件

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

Home bridge1 header nav footer home

Section 1 bridge2 header nav footer Section 1

Section 2 bridge3 header nav footer Section 2

Hack-free CSS

处理诸如IE这样烦人的浏览器的兼容性是我们最头疼的事儿之一.

很多朋友使用CSS hack来解决这些问题.

问题是当IE版本进行升级更替，改进对CSS的支持后，之前使用的hacks将会无效!

你是怎么解决这个问题的呢？

“我们要求你在不使用CSS hacks 的情况下更新你的页面.假如你想针对IE或者避开IE，你可以使用条件注释.”

条件注释如何工作？

步骤一针对IE，创建一个新的样式文件

Home bridge1 header nav footer home IE

步骤二在HTML文档的开头添加条件注释代码

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

平常的浏览器识别:

特定IE版本识别:

举个例子, 大多数浏览器会将补白加进容器的宽度里，但是IE5不会.这种情况下， IE5显示的是一个比较小的容器.

main.css (被包含IE5在内的所有浏览器识别): :

#container { width: 600px; padding: 100px; }

ie5.css (只有IE5识别)::

#container { width: 800px; }

为什么条件注释是一个好的解决方案呢？

1. No hacks 特定的CSS规则仅出现在新的样式表里.

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

3. 针对性可对不同版本的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 组件化的 CSS hack-free CSS

作者: Russ Weakley http://www.maxdesign.com.au 翻译: Jeanne http://webteam.tencent.com

高效的CSS

高效的CSS

More Decks by cssrain

Other Decks in Technology

Featured

Transcript