利用CSS样式表创建美妙绝伦的网站

就是包含一个规定色彩的参考标准。

　　/* COLORS
　　Body Background: #2F2C22
　　Main Text: #B3A576
　　Links: #9C6D25
　　Dark Brown Border: #222019
　　Green Headline: #958944
　　*/

　　你可以把这个参考放在你css文档的最上面去帮助你记住什么颜色在你网站中用过。另外在这里你可以定义不同的部分，马上找到他们（也可以用注释加标）这就是那个例子

　　/* GENERIC
　　HEADER
　　SIDEBAR
　　FORMS
　　TABLES
　　FOOTER
　　*/

　　/* =GENERIC
　　----------------------------------------------------*/

　　04.知道什么时候添加有条件的注释和运用技巧。

　　很多文章写过一些关于问题解决的技巧，有条件的注释是控制ie发布的一个好方法。然后文章又说了其他的一些方面。我同意有条件的注释比在你的css文档里乱丢垃圾要好得多，但是最近我开始慢慢意识到，很多证据表明，这并不是最好的解决办法。

　　想象一下。你想在一个元素中设置它的最低高度，但是ie6浏览器却不执行它，所以你知道你能够使用的高度，也同样会被同样的处理。重新建一个样式表，然后把有条件的注释加入到你的标识中，你所有的需要都是要遵循这个规定？保持最低的高度和高度的规则在一起，选择一个小技巧在同样的css文档里，这样会更好吗？在这种情况下，我觉得用这种方法很难奏效。

　　另外一件需要考虑的事情就是：如果你风格的定位是多样的，过多的css文档和有条件的注释会让你的调试过程异常痛苦。所以，你需要改变一些事情（可能是上述表述中最低高度的值），你不得不打开不止一个文档来做这个修改。在很多情况下，这对你来说可能不是件大事，但是想象，如果你定义了一些事情，在你主要的css文档中，然后还要重新定义三个不同的ie样式表。

　　如果你确定要用有条件的注释，我推荐把注释留一份在你主要的样式表里，让你或者下一位开发者知道这是ie特别规则的存在。这种方法就是当你不得不编辑一个高度或者别的东西的时候。你知道又会有不止一个文档开着。

　　如果你确定要使用技巧，记得更新浏览器能够改变接下来的工作，这次技巧的使用对于后面的版本控制也起不到作用。

　　　 　　05.组织选择及声明

　　要一直一直的保持你的css有规则，有组织性。最好把你的选择符进行归类。

　　• reset styles
　　• typography styles
　　• layout styles (header, content, footer, etc.)
　　• module or widget styles
　　• etc.

　　然后，在每一个组里面，通过dom层组织选择符。

　　• any parent styles (containing elements, working outside-in)
　　• block-level element styles (paragraphs, lists, etc.)
　　• inline element styles (links, abbreviations, etc.)
　　• etc.

　　其次在这里面，根据元素的类型工作：

　　• paragraphs
　　• blockquotes
　　• addresses
　　• lists
　　• forms
　　• tables
　　• etc.

　　最后，把css的声明也按上述进行归类。

　　• positioning (with coordinates) styles
　　• float/clear styles
　　• display/visibility styles
　　• spacing (margin, padding, border) styles
　　• dimensions (width, height) styles
　　• typography-related (line-height, color, etc.) styles
　　• miscellaneous (list-style, cursors, etc.) styles

　　有些人喜欢按照字母顺序来组织。这对我没有任何用处，但是可能会对你有帮助。不管你选择什么样的方法，一定要坚持下去。

　　06.创建一个架构。

　　当你开始创建css样式表的时候，如果你发现你总是不断重复做同一件事情，那就考虑建一个库或者框架结构吧。一个框架就像是网站骨架一样，而且这回节省你建立网站的时间。你可能会在你的框架中发现以下比较典型的样式表：

　　• screen.css - A screen CSS file can either have all your styles you want to be used for on screen, and/or can import additional styles, such as the following:
　　o reset.css - A reset CSS file can be used to “reset” all the default browser styling, which can help make it easier to achieve cross-browser compatibility.
　　o typography.css - A typography CSS file can define your typefaces, sizes, leading, kerning, and possibly even color.
　　o grid.css - A grid CSS file can have your layout structure (and act as the wireframe of your site, by defining the basic header, footer, and column set up).
　　• print.css - A print CSS file would include your styles you want to be used when the page is printed.

　　构建框架其中一个范例就是，由0olav bjørkøy整理的框架蓝图（另外作者还包括杰夫豆和埃里克迈耶）。另外一个很流行的框架就是雅虎的用户界面库。很多开发者都感到这个预建立的框架包含臃肿的标记和css，而且也包含着直接的类名称。

　　注意：当我还在起草这篇文章的时候，Jeff Croft已经发布了怎能不爱上css框架的书。在书的注释中他提到的，别人告诉他我强烈反对框架的存在，我不确定这种评论从哪里来的，但是我要声明，事实根本不是那样子，相反我非常喜欢框架。为取得最佳效果，我还是建议你创建自己的框架结构，它能更好的为您或您的工作服务。

　　07.确保样式表的可读性和优化性之间的平衡。

　　风格格式化因人而异。有的开发者首先创建能够具有可读性的样式表风格，然后在文档还没有完全建好的同时就进行优化（去除评论，位，标签，运输效益等）。这是我想要推荐的一个好技术。然而，如果你不知道在什么情况下去做这些事，就尝试去找一种可以平衡样式表可读性跟优化性的一种风格。Steve Smith在这里有一个很好的建议就可以提