漂亮样式表在XHTML+CSS网页制作中的应用

这是一篇很久以前的文章了，现在看来，其中的思想很值得大家学习，在jb51.net学习案例的同时，不仿学习一些理论的知识，对您知识的突破会很有帮助。大家加油！

　　自从看了Zeldman先生的力作“Designing with Web Standards”中文版为《网站重构》（第2版）一书，感受颇深，坚定了我用web标准的思想，去开发实践我们的项目。但是仅知道一些什么是web标准以及如何应用到实际项目中，还是远远不够的。必须对web标准中的每个组成部分，逐一学习应用，各个击破，方能发现它们的本质！对于像我这样的web开发设计人员，懂得这个道理，进行针对性的学习与实践，我相信我们一定会收获的更多，同时也算是为web标准在中国的应用做一点贡献！（呵呵，这个可能有些吹牛，但是的确是我们大多数软件从业人员的理想。）

　　现在是web2.0乃至3.0的时代，是XHTML,XML,CSS,ECMAScript和DOM的时代。虽然它们不是最终的技术，但它们组合起来就成为一个解决方案——我们规划建立一个向后兼容的网站的基础，同时也是做符合web标准的网站的必要的技术基础。我们不仅要做到希望获得更多的用户支持与访问，更要建立长久的，漂亮的网站长时间吸引他们的注意力。我相信学会使用CSS来改善我们的网站，是吸引他们注意力的好办法，也是在web2.0时代中时髦的发展趋势。下面我仅就CSS技术谈一下我从中获得到的经验。

　　想成为一名CSS专家，仅仅熟练使用CSS选择符（selectors）是远远不够的。还在于对工作的整体规划，工作流程的掌握以及提高样式表的可维护性和效率。用CSS可以创建出我们想要的美妙绝伦的网站，而写CSS本身就是一种享受。那么我们应该如何创建更具吸引力的样式表？你的样式表应该具有哪些特性呢？通过学习并结合我自己的工作经验，总结出一套制作精美样式表的好方法。

　　一、不要让CSS有过多的标记

　　链接或者导入样式表听起来好像是一种无头绪的工作。我看过很多的网站开发都有着整洁的、组织严密的css文档，但是慢慢的，由于可能达不到在短期内快速更新，或者懒得再去管理，这使得先前创建的精致的样式表变成了垃圾。如果我们工作在需要发布上百条内容的庞大网站上面。因为时间有限，所以你需要通过嵌套或者排列css来进行快速修改或更新。随着时间的推移，这种习惯维持着，直到有一天你被告知这个网站要完全推翻重新设计（但是内容还是一样）而且你只有一周的时间去创建（包括测试）。一般来说，更新样式表还算是一个非常简单的方法，除非你长时间对网站零散的区域做修改，你就不能对网站样式表结构有一个整体的把握。

　　链接或者导入你的样式表不是随意的事情。创建干净整洁的样式表并保持下去，工作就会更开心。注意：如果你试图在每次更新或者添加新内容的时候创建新的样式表，那你肯定是自找麻烦。过多的链接和导入样式表会使消除bug变得异常困难，让样式表很难维持。大一点的网站分别建立不同部分的样式表这是可以理解的。就是小心不要走极端。添加很多的样式表，会增加更多的http请求，可能还会影响到后面的工作。

　　二、语义定义明确易懂

　　除了选择最合适的，最有意义的元素来表述外，还要确定选择class 和id属性值。定义明确可以让维护变得简单，小组里的成员都会看懂。看这个定义：

　　.l10k { color: #369; } ，.left-blue { color: #369; } ，如果是我做的我可能知道是啥意思，但是比人不一定就懂了。即使今天知道它的意思，但是能保证很多年后还知道它的意思吗？最好不要在类属性里面去加入颜色或者长宽的尺寸。更恰当的命名规范：. work-description { color: #369; }

　　三、知道什么时候添加有条件的注释和运用技巧

　　很多文章写过一些关于问题解决的技巧，有条件的注释是控制IE发布的一个好方法。我同意有条件的注释比在你的css文档里乱写要好得多，但是最近我开始慢慢意识到，很多证据表明，这并不是最好的解决办法。想在一个元素中设置它的最低高度，但是IE6浏览器却不执行它，所以你知道自己能够使用的高度，也同样会被同样的处理。重新建一个样式表，然后把有条件的注释加入到你的标识中，你所有的需要都是要遵循这个规定？保持最低的高度和高度的规则在一起，选择一个小技巧在同样的css文档里，这样会更好吗？在这种情况下，我觉得用这种方法很难奏效。