70位专家谈CSS设计

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

• 使用通用命名空间. 一套好的命名体系, 会在修复缺陷时, 节省大量时间. 我建议使用 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(http://www.blog.com.cn/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.
9. 
   

• The selector in the following rule matches all p elements that have a title attribute, regardless of which value it has:

1. p[title] { color:#f00; }

• The selector matches all div elements that have a class attribute with the value error:

1. div[class=error] { color:#f00; }

• Multiple attribute selectors can be used in the same selector. This makes it possible to match against several different attributes for the same element. The following rule would apply to all blockquote elements that have a class attribute whose value is exactly “quote”, and a cite attribute (regardless of its value):

1. blockquote[class=quote][cite] { color:#f00; }

• 使用降阶同类项descendant selectors. “Descendant selectors can help you eliminate many class attributes from your markup and make your CSS selectors much more efficient. ” [Roger Johansson ]

2.3. 技术窍门: 链接样式化

• 如果使用锚点, 你要小心. “如果在你的编码中使用锚点 (<a name="anchor"> ) 你要注意, 他会使用 :hover 和 :active 这些伪类. 为避免这些问题, 你要使用ID 来定义这些锚点,或使用内部约束 slightly more arcane 语法: :link:hover, :link:active ” [Dave Shea ]
• 定义链接关系 “The rel attribute is supposed to indicate a semantic link relationship from one resource to another.

1. a[rel~="nofollow"]::after {
2. content: "\2620";
3. color: #933;
4. font-size: x-small;
5. }
6. a[rel~="tag"]::after {
7. content: url(http://www.technorati.com/favicon.ico);
8. }

• “These make use of the attribute selector for space separated lists of values. Any a element with a relationship containing those values will be matched. Links with the nofollow relationship will be followed by a dark red skull and crossbones (?) and those with the tag relationship will be followed by the Technocrati icon.” [Handy CSS ]
• You can mark external links automatically. Many people make use of the non-standard rel="external" relationship to indicate a link to an external site. However, adding that to each and every link is time consuming and and unnecessary. This style rule will place an north east arrow after any link on your site to an external site. [Handy CSS ]

1. a[href^="http://"]:not([href*="smashingmagazine.com"])::after {
2. content: "\2197";
3. }

• 利用 outline: none; 来去除链接产生的虚点框. 这一点对导航条很有用 remove dotted links

1. a:focus {
2. outline: none;
3. }

2.4. 技术窍门: CSS-技术

• 付给<body> 标记一个 ID. “大多数情况下, 给body 放置一个 ID , 可以逐页控制CSS, 而不必要不断更换模板” [Ryan Parr , Invasion of Body Switchers ]
• 用CSS创建相同高度的列. Equal Height Technique : a method to make all columns appear to be the same height. But without the need for faux column style background images. Faux Columns : with background images.
• 用 CSS做垂直布局. “假设你有一个导航菜单高度是2em. 解决方案: 在CSS中把线高设定成和显示模块一样的高度.在这个案例中,字符可以在显示模块中间浮动. ” [Evolt.org ]
• 使用伪元素 pseudo-elements 和类 classes 创建动态内容. Pseudo-classes and pseudo-elements . Pseudo-classes and pseudo-elements can be used to format elements based on information that is not available in the document tree. For example, there is no element that refers to the first line of a paragraph or the first letter of an element’s text content. You can use :first-child, :hover, :active, :focus, :first-line, :first-letter, :before, :after and more.
• 通过设置 <hr> 分割的更漂亮. “把水平分割线 (<hr>) 用图形代替可以增加页面的美观性. [CSS: Best Practices ]
• 在每个页面使用相同的导航条 (X)HTML-编码. “许多网站都想强化导航条, 但你需要在每个页面优化导航条代码, 我们如何把两者完美的处理好呢?” [Ten More CSS Tricks you may not know ]

1. XHTML:
2. <ul>
3. <li><a href="#" class="home">Home</a></li>
4. <li><a href="#" class="about">About us</a></li>
5. <li><a href="#" class="contact">Contact us</a></li>
6. </ul>

• Insert an id into the <body> tag. The id should be representative of where users are in the site and should change when users move to a different site section.

1. CSS:
2. #home .home, #about .about, #contact .contact
3. {
4. commands for highlighted navigation go here
5. }

• 布局中,使用" margin: 0 auto;" 水平居中. “利用 CSS来水平居中一个元素, 你需要设定这个元素的宽度,和水平间距就可以做到.” [Roger Johansson ]

1. XHTML:
2. <div id="wrap">
3. <!-- Your layout goes here -->
4. </div>

1. CSS:
2. #wrap {
3. width:760px; /* Change this to the width of your layout */
4. margin:0 auto;
5. }

• 给 RSS-feeds附加样式. “用 XSL stylesheet (turn links into clickable links, etc)格式化, CSS让非技术人员更能接受. [Pete Freitag ]

1. <?xml version="1.0" ?>
2. <?xml-stylesheet type="text/css" href="http://you.com/rss.css" ?>
3. ...

• 在老的浏览器中隐藏CSS . “最基本的办法就是利用@import 方法,解决隐藏问题."   [Roger Johansson ]

1. @import "main.css";

• 在块级的元素定义中, 必须声明外间距和内间距Always declare margin and padding in block-level elements. [10 CSS Tips ]
• 要么设定宽度, 要么设定内间距和外间距 “我的一个重要原则是, 如果我设定了宽度,就不必要设定间距, 同理, 如果设定了间距, 就不必要设定宽度. 在盒状显示模块中, 特别你你用百分比处理的情况下, 我才用设定容器宽度, 里面的元素使用间距设定, 这样一切就会变得游刃有余. ” [Jonathan Snook ]
• 避免使用内间距/边框 和固定的宽度同时定义一个元素. “IE5 会让这样的定义出错, 一切变得一团糟. 为修订宽度的错误, 在父对象中设置内间距,取代子元素固定宽度的方法. [CSS Crib Sheet ]
• 提供打印样式.
  

1. <link rel="stylesheet" type="text/css" href="print.css" media="print">
2. or
3. <style type=”text/css” media=”print”> @import url(print.css); </style>

• This ensures that the CSS will only apply to printed output and not affect how the page looks on screen. With your new printed stylesheet you can ensure you have solid black text on a white background and remove extraneous features to maximise readability. More about CSS-based print-Layouts . [20 pro tips ]

2.5. 技术窍门: IE 改进

• 强制 IE 透明化处理 PNG图像. “理论上, PNG 文件支持不同的透明度; 但是. 一个Explorer 6 缺陷让这种方法很难跨浏览器使用” [CSS Tips, Outer-Court.com ]

1. #regular_logo
2. {
3. background:url('test.png'); width:150px; height:55px;
4. }
5. /* \ */
6. * html #regular_logo
7. {
8. background:none;
9. float:left;
10. width:150px;
11. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='scale');
12. }
13. /* */

• 在IE中可以定义最小宽度min-width 和最大宽度 max-width . 你可以用微软的动态表达式解决这个问题. [Ten More CSS Trick you may not know ]

1. #container
2. {
3. min-width: 600px;
4. max-width: 1200px;
5. width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
6. }

• 在IE中使用条件说明 “在IE/WIN中,最安全的方式是使用条件说明 conditional comments . 这比使用修正点更有效. 利用这种方法, 可以让IE 使用自己的样式, ” [Roger Johansson ]

1. <!--[if IE]>
2. <link rel="stylesheet" type="text/css" href="http://www.blog.com.cn/ie.css" />
3. <![endif]-->

Workflow: 获得灵感

• 玩转 CSS. “玩. 用背景图玩. 用浮动玩.” [Play with positive and negative margins . 充分利用继承性和瀑性去玩. [Chric Casciano ]
• 多学习别人的经验 努力学习哪些大网站的经验.
  [20 pro tips ]

参考和推荐内容:

• CSS Tips and Tricks by Roger Johansson
• (The Only) Ten Things To Know About CSS by John Manoogian
• CSS Crib Sheet by Dave Shea
• My Top Ten CSS Tricks [CSS Tutorials] by Trenton Moss
• CSS Tips by Philipp Lenssen
• Top CSS Tips by Jonathan Snook
• Ten CSS tricks — corrected and improved by Tantek Çelik
• Ten More CSS Trick you may now know by Trenton Moss
• CSS techniques I use all the time by Christian Montoya
• CSS Tip Flags by Douglas Bowman
• My 5 CSS Tips by Mike Rundle
• 5 Steps to CSS Heaven by Ping Mag
• Handy CSS by Lachlan Hunt
• Erratic Wisdom: 5 Tips for Organizing Your CSS by Thame Fadial
• 15 CSS Properties You Probably Never Use (but perhaps should) by SeoMoz
• 10 CSS Tips You Might Not Have Known About by Christopher Scott
• A List Apart: Articles: 12 Lessons for Those Afraid of CSS and Standards by Ben Henick
• Tips for a better design review process by D. Keith Robinson
• 20 pro tips - .net magazine by Jason Arber
• CSS Best Practices by Richard K Miller
• 10 Quick Tips for an Easier CSS Life by Paul Ob
• 10 CSS Tips from a Professional CSS Front-End Architect by 72 DPI in the shade team blog
• Web Design References: Cascading Style Sheets by Laura Carlson
• Getting Into Good Coding Habits by Adrian Senior