原文链接：http://www.thinkvitamin.com/features/design/creating-sexy-stylesheets
版权声明：本文版权归原作者所有 译介仅供国内读者参考
如果你想成为一位CSS专家的话，光背出一堆选择器是不够的，还要能够提高CSS样式表的可读性，开发效率以及维护性。这里，Jina Bolton 将给我们分享一下她关于如何创建性感的CSS样式表的十个技巧。
本文主要内容为：CSS代码编码规范，教你如何写出整洁漂亮性感的css代码，如何清晰的组织你的样式表文件。闲言少叙，直接进入正题，完整文字请查看原文。doubanclaimff3e7764f748141c
1. 不要在HTML文件中使用CSS样式定义
相信对于多数有一定工作经验的设计师来说，使用外部样式表来定义CSS样式是小菜一碟的工作。但我在这里仍然需要再次告诉你这点，因为我看到相当多的站点在最开始的时候，有着非常结构清晰，组织良好的代码。但是随着时间的推移，慢慢地内部定义乃至内联样式开始蔓延到站点的各个角落。也许是因为项目周期十分紧迫，抑或只是因为我们有点偷懒。
想象一下，当这样的坏习惯被我们保持了下来，一段时间后，如果老板希望在不改动网页内容的前提下重新设计网站的样式的话，OH，你将不得不去查找这些自己丢在各个角落的垃圾代码，如果项目碰巧规模又非常之大，那我恐怕只有祝你好运，或者推荐你去找黄健翔了。
千万别给自己找这样的麻烦，创建干净的代码，并始终让他们保持干净，这样你会让生活变得充满快乐。
注意：请小心使用过多的外部样式表，如果每次更改你都创建一个新的样式表，这不会给你带来任何好处。过多的样式表会让你将来的调试和更新工作变得更加复杂，当然我理解你希望将样式分组管理的初衷，后面的内容中我会专门和你一起讨论这个问题。
友情提醒：过多的样式表应用，会带来潜在的性能问题，并且在IE6下，最多只能引入32个外部样式表。
2. “语义学Semantics”不是猜字谜游戏
我要告诉你们，“语义学Semantics”将是你们最好的朋友。在你选择最合适，语义最正确的元素来描述文档内容之外，也请选择语义清晰，合适的词语来定义你的class名称以及元素ID名称。不仅仅是做正确的事，这样做还能让你和你的团队成员的工作变得更加简单。让我们来看一条样式定义：
.l13k { color: #369; }
我相信你乍看到这条定义，你能否知道它是用来干嘛的吗？我想你肯定答不上来。这个名称应该是某个只有作者本人知道的缩写，即使作者现在知道含义，但一个月后，一年以后你还能知道它的含义吗？让我们再来看一条定义：
.left-blue { color: #369; }
这条定义，你可能立刻猜到它是用来干什么的了，页面左边区域，文字颜色为蓝色，表述的非常清楚明确。但是让我们来假设一下，不久的将来，老板希望重新设计样式，这个区域的内容位置将换到右边，文字颜色将换成红色。很显然，这个名称将变得不再合适，甚至变得不正确，现在你有两个选择，一是替换掉每个使用该class的地方，二是继续使用这个让人产生误解的名称。
这样看来，名称不是描述清晰就是好的，我建议你们最好是不要采用诸如颜色或者是高度宽度尺寸等非常具体的细节来命名样式定义，同样的也尽量避免使用具有具体形象的词汇来命名（比如使用 box），这样的做法某种程度上破坏了我们希望将内容和样式分离的初衷。怎样做才是最好的呢，让我们来看一下这个：
.product-description { color: #369; }
这个定义命名，无论你重构多少次，它都是非常合适的，美丽的东西永远是美丽的。
阅读全文…
最新评论