70位专家谈CSS设计

原文取自smashing magazine 下面我对原文大致翻译一下, 以便大家阅读.

CSS 并不总是很好对付. 这取决于你的技巧和经验. CSS编码有时会成为一场噩梦, 特别是当你还不知道文件中的元素应该适用哪些选项的时候. 一个减少代码复杂性的简易法门, 就是利用哪些鲜为人知的CSS属性来创建适用性比较强的正确标注.

下面引用的70个专家技巧,附加了他们的相关文章地址.

• 如果感兴趣你还可以阅读 53 CSS-Techniques You Couldn’t Live Without(53个你必须掌握的CSS技术),
  
• Digg this article(挖掘这篇文章) 如果你觉得有用.

1.1. Workflow: 上路

• 当你确定了设计思路, 请用一个空白页面展开设计. “包括页头 , 导航条, 内容样例 和页脚  之后添加HTML标记, CSS控制,这样会让事情简单清晰起来.” [CSSing]
• 务必要重置CSS样式表 “你可能会经常删除哪些不必要的特殊设置, 而充分利用每个特性的缺省值. 而另一些人则倾向于做全局重置 Global white space reset , 就是在样式表的开头把所有要素的边据(margin)和空距(padding)全部归零. Eric Meyer’s Global Reset(全局重置), Christian Montoya’s initial CSS file(初始化CSS文件), Mike Rundle’s initial CSS file, Ping Mag’s initial CSS file. [Roger Johansson]
• 使用主样式表master stylesheet. “一个常见的错误就是, 我看到很多初学者和中级玩家, 在使用样式表的时候, 由于不同的浏览器对一些样式有不同的缺省设置, 再没有统一化的情况下, 就会导致在不同浏览器中显示效果不一致. 而招致程序员抱怨调试困难. 其实, 你只要重置这些设置, 很多问题都可以得到避免. ” [Master Stylesheet: The Most Useful CSS Technique(主样式表: 最有用的CSS技术)], [Ryan Parr]

1. master.css
2. @import url("reset.css");
3. @import url("global.css");
4. @import url("flash.css");
5. @import url("structure.css");

1. <style type="text/css" media="Screen">
2. /*\*/@import url("css/master.css");/**/
3. </style>

• 保持一个有用的CSS对象库. 这对调试很有用, 但应该避免出现在发布的版本中.  因为你可以同时使用多个类名称用来调试你的一个标记(i.e. <p class="floatLeft alignLeft width75">...</p>用了三个类名称来标记<p/>). [Richard K. Miller]

1. CSS:
2. .width100 { width: 100%; }
3. .width75 { width: 75%; }
4. .width50 { width: 50%; }
5. .floatLeft { float: left; }
6. .floatRight { float: right; }
7. .alignLeft { text-align: left; }
8. .alignRight { text-align: right; }

1.2. 组织化CSS编码

• 使用主样式表组织化CSS “用主样式表组织化的样式非常有利于网站维护 . 在这个样式表中输入 reset.css, global.css, flash.css (如果需要) 和 structure.css 以及间歇使用的拓扑样式, 这里是一个如何使用这些技术的样例”

1. h2 { }
2. #snapshot_box h2 {
3. padding: 0 0 6px 0;
4. font: bold 14px/14px "Verdana", sans-serif; }
5. #main_side h2 {
6. color: #444;
7. font: bold 14px/14px "Verdana", sans-serif; }
8. .sidetagselection h2 {
9. color: #fff;
10. font: bold 14px/14px "Verdana", sans-serif; }

• 使用标注组织样式表. “把你的样式表分成不同的区域, 例如: 全局(文件体, 段落, 列表等), 页头, 页尾,页面结构,  文字风格, 导航条, 表单, 标注, 扩展,等. [5 Tips for Organizing Your CSS(组织化CSS的5的窍门)]

1. /* -----------------------------------*/
2. /* ---------->>> GLOBAL <<<-----------*/
3. /* -----------------------------------*/

• 用一个内容表来组织样式表. 在你的CSS文件头, 画一个内容表, 例如, 你可以勾画出CSS控制的不同区域, 用醒目的分割来划分他们.  [5 Steps to CSS Heaven(5步跨进CSS天国)]
• 用字母次序表规划样式表. “我不知道怎么想到这个主意的, 反正用了几个月, 发现找到这些样式很容易.(译者注: 对于中文用户, 除非每个样式的名称很准确,并能被大家理解, 否则可用性会很差.)” [Christian Montoya]

1. body {
2. background:#fdfdfd;
3. color:#333;
4. font-size:1em;
5. line-height:1.4;
6. margin:0;
7. padding:0;
8. }

• 把代码分成不同的块.. “很多人直觉上都会这么做, 只要变成习惯, 经年累月的实践, 这应该是最好的办法. 例如:: /* Structure */, /* Typography */ etc.” [CSS Tips and Tricks(CSS窍门和魔法)]
• 钩子, 线, 和铅坠Hook, line, and sinker. 一旦你的CSS文档已经分成了不同的区块, 你就应该思考, 如何让这些小节点上的钩子结构化, 这将给你节省大量的时间, 并让文档更有说服力.” [Ryan Parr]
• 把样式表分成不同的块. “我通常把自己的样式表分成三个块. 第一部分是元素直白定义, 变换文体, 页头风格, 重置表单的间距, 一些链接的风格, 等等. 接下来, 我会定义一些类, 例如提示框, 警告框,  等等, 我倾向于先定义主容器, 然后定义这个主容器中的元素, 这样扫一眼,就可以看到文档的规划结构, 对于哪些没有约束的容器, 我一般也要给他们一个名字." [Jonathan Snook]

1.3. Workflow: 控项编号, 类, 同类项, 属性 Handling IDs, Classes, Selectors, Properties

• 让容器最小化. “结构化灌装文档. 新手会使用很多像表格一样的单元去构建一个文档. 而用结构化的要素构建文档才是最有效的. 要做到这点, 必须开始之前统盘考虑所有要素, 争取用通用的结构获得相同的效果, 而不是不断定义哪些小巧的DIV单元. ” [Ryan Parr]
• 属性最小化. “善用CSS. 这个大原则可以派生很多小原则: 如果没有一个点来增加属性, 就不要增加, 如果你不确定该属性的用途, 就不要增加, 如果相同的属性被赋予很多地方, 争取在一个地方定义它.” [CSSing]
• 同类项最小化. “避免不必要的同类项, 同类项越少, 问题就越容易处理.” [Jonathan Snook]
• CSS 修复点(hack)最小化. “除非是公认的或文档化的缺陷, 尽量不要使用修复点. 我常常看到的情况是, 修复点本身变成了问题. 最好找到问题的根源, 从根本上解决或避免, 而不是滥用修复点.[10 Quick Tips for an easier CSS life(10个让CSS更简单的窍门)]
• 使用CSS常量开发. “所谓常量 – 就是在很多地方使用的固定数值. 在CSS文档前面创建这些常量的说明, 颜色对照表, 利用替换的方式, 可以减少修订中的错误.” [Rachel Andrew]

1. # /*
2. # Dark grey (text): #333333
3. # Dark Blue (headings, links) #000066
4. # Mid Blue (header) #333399
5. # Light blue (top navigation) #CCCCFF
6. # Mid grey: #666666
7. # */