70位专家谈CSS设计

• 使用通用命名空间. 一套好的命名体系, 会在修复缺陷时, 节省大量时间. 我建议使用 parent_child 结构. [10 CSS Tips]
• 按语法定义类和编号. “错误的名称会引起岐义, 不便于沟通协作, 也会导致重复定义". [Garrett Dimon]
• 用通用的CSS定义给同类项编组. “当一些元素的类型,类,或ID:s 使用相同的属性, 你可以把这些同类项编组, 以便一起定义, 而不是分开重复定义” [Roger Johansson]
• 如果一个独立属性需要复用, 就把它独立出来. “如果你发现一个属性的定义被广泛使用, 不妨把它单拿出来定义” [5 Steps to CSS Heaven]
• 尽可能树状化表达你的编号和类. 文档的层次化 contextual selectors 十分必要. 这样可以使文档更容易阅读和使用. [Chric Casciano]
• 学会充分利用CSS的瀑性(继承性)特征. “如果你的网站中有两个类似的显示区(box),你愿意定义两个样式, 还是定义一个样式后, 用一个外部样式对它进行修正?” [5 Steps to CSS heaven]
• 使用工具化标记(Tag): <small>, <em> 和 <strong>. “可以充分使用这些工具化标记, 对XHTML来说, 它具有更好的语意结构性, 过多的利用类来定义类似的要素, 会让文档结构本身的语法环境遭到破坏". [Mike Rundle’s 5 CSS Tips]

1.4. Workflow: 使用缩写标注

• 缩写十六进位色彩标注. “在颜色定义中: #000 等同于 #000000, #369 等同于 #336699  [Roger Johansson]
• 用 LoVe/HAte-次序定义链接伪类 Link, Visited, Hover, Active. “可以确保你看到所有的链接样式.” [Eric Meyer]

1. a:link { color: blue; }
2. a:visited { color: purple; }
3. a:hover { color: purple; }
4. a:active { color: red; }

• 用 TRouBLed-次序定义外边距, 内边距和边框: Top, Right, Bottom, Left. “用顺时针的方向,从顶部开始定义, 养成这种习惯,还可以用缩写法快速定义.” [Roger Johansson]
• 使用缩写属性 shorthand properties.
  “使用缩写定义 margin, padding and border 属性可以节省大量空间.

1. CSS:
2. margin: top right bottom left;
3. margin:1em 0 2em 0.5em;
4. (margin-top: 1em; margin-right: 0; margin-bottom: 2em; margin-left: 0.5em;)

1. CSS:
2. border:width style color;
3. border:1px solid #000;

1. CSS:
2. background: color image repeat attachment position;
3. background:#f00 url(background.gif) no-repeat fixed 0 0;

1. CSS:
2. font: font-style (italic/normal) font-variant (small-caps) font-weight font-size/line-height font-family;
3. font: italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

1.5. Workflow: 建立拓扑结构

• 用62.5%的比例, 保持 EM单位和PX单位的协同性.  font-size 的缺省值是 16px; 利用这个原则, 你可以换算一个 Em 大约是10像素  (16 x 62.5% = 10). “我倾向于让不同文字之间的比例保持在62.5%. 这样可以让你同时用em 和 px 两种方法思考 ” [Jonathan Snook]
• 使用通用字符集UTF-8编写代码. . [20 pro tips]

1. <meta http-equiv="content-type" content="text/ html;charset=utf-8" />

• 使用 CSS转换大小写. 如果你相让一些内容全部大写, 很简单,只需要在CSS中做如下定义即可”. [20 pro tips]

1. h1 {
2. text-transform: uppercase;
3. }

• 使用 small-caps . 例如:

1. h1 {
2. font-variant: small-caps;
3. }

• Cover all the bases - 定义通用字体. “如果我们使用某些特殊的字体, 必须要确定浏览者的机器上也装载这些字体, 因此我们必须了解哪些是通用的字体, 才能保证设计和展示是一致的. [Getting into good coding habits]

1. p {
2. font-family: Arial, Verdana, Helvetica, sans-serif;
3. }

• 用 1.4em - 1.6em 定义线高 line-height. “line-height:1.4”  合理的线长 line-lengths应避免超过10个单词 . 例如纯黑或纯白在CRT显示器上过亮. 尝试使用次白 (#fafafa) 和灰黑(#333333,).比较理想” [Christian Montoya]
• 用 100.01% 定义HTML元素(html-element). 这个特义值 100.01% 定义字符大小可以解决很多浏览器的bug. 首先, 用百分比设置缺省的 body font size 就用这个值, 这样基本上可以解决IE, Opera, Safari中的字体不同大小和缩放的问题.” [CSS: Getting into good habits]

1.6. Workflow: 调试

• 给每个容器加边框 “例如. div { border:1px red dashed; } 这样看起来很舒服. 还有其他的方法 bookmarklets that apply borders 例如 * { border: 1px solid #ff0000; }. [Chric Casciano].  [CSS Crib Sheet]

1. * { border: 1px solid #f00; }

• 调试时, 先检查封闭元素. “很多意想不到的错误,都是由于该封闭的元素,没有被封闭导致的". [10 CSS Tips]

2.1. 技术窍门: IDs, Classes

• 每页只能有一个ID, 但可以有多个类. “检查你的 IDs: 一个页面只能有一个元素使用一个确定的ID,很多元素可以用相同的类定义, 注意 ID 和 Class 的名字只能用使用 [A-Za-z0-9] 的字母或数字以及连接符号 (-), 开始字母不能用数字或连接符号(参照 CSS2 语法和类型.” [Roger Johansson]
• 元素在同类项(selectors)中是大小写相关的. “记住大小写相关. 当 CSS用在XHTML, 因为XML是大小写相关的.” [Roger Johansson]
• CSS classes 和 IDs 必须合法. “我们在定义这些对象的使用最好用他们的功能, 而不是他的外观” [CSS Best Practices]
• 一个元素可以使用多个类“你可以分配多个类给一个元素, 因此你通过多定义一些不同的类,而有选择的使用他们,完成你对样式的约束.” [Roger Johansson]

2.2. 技术窍门: 利用同类项

Roger Johansson 曾写过很有用的一篇文章 CSS 2.1 Selectors. 强烈推荐阅读这篇文章.你可以发现很多有用的东西. 例如同类项父子定义 ‘>’ 和 ‘+’ 在 IE6 和早期版本中并不支持.

• 你可以使用子同类项. “A child selector targets an immediate child of a certain element. A child selector consists of two or more selectors separated by a greater than sign, “>”. The parent goes to the left of the “>”, and whitespace is allowed around the combinator. This rule will affect all strong elements that are children of a div element. [Roger Johansson]

1. div > strong { color:#f00; }

• 使用多血缘同类项(adjacent sibling selector ). An adjacent sibling selector is made up of two simple selectors separated by a plus sign, “+”. Whitespace is allowed around the adjacent sibling combinator. The selector matches an element which is the next sibling to the first element. The elements must have the same parent and the first element must immediately precede the second element. [Roger Johansson]

1. p + p { color:#f00; }

• 使用特性同类项 一个特性同类项, 可以通过四种方式找到要定义的对象:

1. [att]
2. Matches elements that have an att attribute, regardless of its value.
3. [att=val]
4. Matches elements that have an att attribute with a value of exactly “val”.
5. [att~=val]
6. Matches elements whose att attribute value is a space-separated list that contains “val”. In this case “val” cannot contain spaces.
7. [att|=val]
8. Matches elements whose att attribute value is a hyphen-separated list that begins with “val”. The main use for this is to match language subcodes specified by the lang attribute (xml:lang in XHTML), e.g. “en”, “en-us”, “en-gb”, etc.