[译]Efficient, maintainable 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>

不推荐使用内嵌样式::

<!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> <style type="text/css" media="screen"> p { color: red; } </style> </head> <body> ... </body> </html>

推荐使用外联样式::

<!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> <link rel="stylesheet" href="name.css" type="text/css" media="screen" /> < /head> <body> ... </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导入方式::

<!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> <style type="text/css" media="screen"> @import url("styles.css"); </style> </head> <body> ... </body> </html>

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

<!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> <link rel="stylesheet" href="name.css" type="text/css" media="screen" /> </head> <body> ... </body> </html>

使用继承

低效率的::

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文档主样式表

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

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

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

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

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

<!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> <link rel="stylesheet" href="bridging.css" type="text/css” media="screen, projection"> </head> <body> ... </body> </html>

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

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

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

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

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

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

header nav Home bridge1 footer home

header nav Section 1 bridge2 footer Section 1

header nav Section 2 bridge3 footer Section 2

Hack-free CSS

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

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

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

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

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

条件注释如何工作？

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

header nav Home bridge1 footer home IE

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

<!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> <link href="css/import1.css" rel="stylesheet"  </head> <body> ... </body> </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

http://isd.tencent.com	7937
http://webteam.tencent.com	3408
http://csshouse.net	2979
http://www.webdesignba.com	1664
http://www.woaicss.com	769
http://www.xyopen.com	564
http://www.soberma.com	419
http://css9.net	391
http://www.20ju.com	359
http://www.chujun.cn	310
http://www.kekaku.com	290
http://www.webjx.com	250
http://www.bobd.cn	204
http://www.abseo.cn	195
http://55u.me	142
http://www.zmool.com	124
http://www.websbook.com	107
http://www.sangcen.com	105
http://www.wwwued.com	101
http://koyoz.com	99
http://www.fangyuqiang.com	90
http://static.slidesharecdn.com	88
http://www.koyoz.com	82
http://www.iamwawa.cn	80
http://www.poluoluo.com	80
http://www.css3html5.com	77
http://lahoo.com.cn	69
http://www.solagirl.net	55
http://codelife.info	51
http://irockman.me	50
http://irockman.me	50
http://www.asktest.com	36
http://www.xh-css.cn	30
http://www.flywithmyzi.com	29
http://www.xlnv.net	28
http://20ju.com	27
http://www.mouyao.com	25
http://www.taochengxi.com	23
http://www.slideshare.net	23
http://bbs.bingyan.net	22
http://pa.779web.com	21
http://www.phpweblog.net	20
http://home.cnblogs.com	20
http://www.jb51.net	19
http://www.imjqy.com	19
http://www.taochengxi.cn	19
http://www.update8.com	16
http://www.cnblogs.com	15
http://www.ljf.cn	15
http://cache.baidu.com	15
http://v.05land.com	15

[译]Efficient, maintainable CSS

by jeannewoo on Dec 15, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

187 Embeds 22,169

Statistics

[译]Efficient, maintainable CSS — Presentation Transcript