Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

你对CSS了解多少?

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

让我们来看看 4个关键点

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

书写高效CSS

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

不推荐使用行间样式::

Slide 9

Slide 9 text

...

Slide 10

Slide 10 text

不推荐使用内嵌样式::

Slide 11

Slide 11 text

p { color: red; } ...

Slide 12

Slide 12 text

推荐使用外联样式::

Slide 13

Slide 13 text

< /head> ...

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

不推荐@import导入方式::

Slide 16

Slide 16 text

@import url("styles.css"); ...

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

...

Slide 19

Slide 19 text

使用 继承

Slide 20

Slide 20 text

低效率的::

Slide 21

Slide 21 text

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; }

Slide 22

Slide 22 text

高效的::

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

使用 多重选择器

Slide 26

Slide 26 text

低效率的::

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

高效的::

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

使用 多重声明

Slide 31

Slide 31 text

低效率的::

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

高效的::

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

使用 简记属性

Slide 36

Slide 36 text

低效率的::

Slide 37

Slide 37 text

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;

Slide 38

Slide 38 text

高效的::

Slide 39

Slide 39 text

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; }

Slide 40

Slide 40 text

避免使用 !important

Slide 41

Slide 41 text

慎用写法::

Slide 42

Slide 42 text

#news { background: #ddd !important; }

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

书写可维护的CSS

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

/* --------------------------------- Site: Site name Author: Name Updated: Date and time Updated by: Name --------------------------------- */

Slide 49

Slide 49 text

包括公用颜色标记

Slide 50

Slide 50 text

/* --------------------------------- 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 --------------------------------- */

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

不推荐的命名方式::

Slide 53

Slide 53 text

.green-box { ... } #big-text { ... }

Slide 54

Slide 54 text

推荐使用的命名方式::

Slide 55

Slide 55 text

.pullquote {... } #introduction {... }

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

#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 { ... }

Slide 58

Slide 58 text

给样式添加清晰的注释

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

组件化 CSS

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

...

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

Home bridge1 header nav footer home

Slide 76

Slide 76 text

Section 1 bridge2 header nav footer Section 1

Slide 77

Slide 77 text

Section 2 bridge3 header nav footer Section 2

Slide 78

Slide 78 text

Hack-free CSS

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

条件注释如何工作？

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

Home bridge1 header nav footer home IE

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

...

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

Home bridge1 header nav footer home IE

Slide 91

Slide 91 text

平常的浏览器识别:

Slide 92

Slide 92 text

Home bridge1 header nav footer home IE

Slide 93

Slide 93 text

特定IE版本识别:

Slide 94

Slide 94 text

Home bridge1 header nav footer home IE

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

#container { width: 800px; }

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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