原文链接：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; }
这个定义命名，无论你重构多少次，它都是非常合适的，美丽的东西永远是美丽的。
03.07高效率网页设计的十大军规
原文出处：http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
版权声明：本文版权归原作者所有 译文仅供国内读者参考
决定一个网站成败有时候并不是样式设计，而是可用性和易用性。对于一个页面的访问者来说，他所做的只是点击然后决定下一步要做的事情，因此以用户为中心的设计思路已经成为了业界定义成功设计的事实标准。当然，如果没有任何提供给用户的功能，这个标准也不复存在了。
我们不打算深入探讨关于可用性的实践细节（比如搜索框应该放置在页面的什么位置）因为已经有相当多的文章就此做了深入的阐述，我们将重点介绍一些核心法则、启示，合理的使用这些法则，能使你的网站更加成熟，展示的内容更容易让用户理解。
请注意：
你可能对这两篇我们之前的文章感兴趣 10 Usability Nightmares 和 30 Usability Issues 。
我们会在后续的文章中继续讨论关于可用性的问题，您可以订阅我们的网站 subscribe to our RSS-feed 。
为了能够正确的使用这些法则，首先我们需要知道用户是如何和页面进行交互的，用户是如何思考的以及用户的常见行为是怎样的。
用户如何思考？
基本上，一个网站的用户习惯和一个商店的顾客用户习惯没什么区别。用户快速地浏览每个新页面，从页面文字中找出第一个使他们感兴趣的或者和他们正在寻找的东西类似的链接并点击。因此，事实上页面的大部分内容，用户根本没有注意过。 用户总是在那些看上去可能的链接中寻找他们感兴趣并能点击的链接，然后点击。如果内容不是他们想要的，他们会立刻点击“后退”按钮并继续搜寻他们想要的内容。
用户偏好质量和可靠性 如果一个页面提供给用户以高质量的内容，用户将能够接受页面上的广告和站点的设计。这就是为什么有些站点内容质量很高，但是设计的很糟糕，依然有着很高的流量的原因。内容远比支持它的设计来的重要。切记。
用户并不会细读，他们是浏览 分析一个站点，用户始终在寻找一些锚记（译注 fixed point 内容节点）来作为页面内容的导航员。
（图1 图上的热点标示了用户的阅读集中在句子的前半部分）
网站用户是急切并强烈要求迅速满足需求的 非常简单的法则：如果一个站点不能满足用户的期望，那这个网站的设计师就是不称职，这个公司也将失去很多挣钱的机会。认知负载越高，直观导向越少，用户越是会放弃该站点来选择另一个网站来代替。
用户并不会做最佳的选择 用户不会为了搜索他们想要的东西而去寻找最快速的方法。他们不会从上至下的一段段看下去来寻找他们想要的东西。取而代之的是能够满足他们需求的第一个选择。当他们看到第一个看上去能够满足他们需求的链接，他们就会在第一时间点击。所以，从全部内容中找出最优的链接耗时太多，也太累，寻找满足需求的看上去更有效率。[video]
(图2 图3 这两幅图片展示了线性阅读在网页浏览中是不适用的)
用户跟从的是他们的直觉 大多数情况下，用户不会认真去看设计师提供的内容，根据Steve Krug(Don’t make me think 作者)的说法，主要原因是用户根本不在乎这些。
用户希望拥有对浏览器的控制 用户希望能够控制他们的浏览器，并且信赖从始至终提供一直内容展现形式的网站。比如，他们不希望自动弹出的窗口，和随时能够通过“后退”按钮回到他们先前浏览过的网页，所以，一个非常重要的准则就是“不要在新窗口打开网页”。（译注：这点上，中国的用户的操作习惯恰恰相反，比如谷歌就不得不改成在新窗口打开，另外，在web标准中<a>标记的target属性是被废弃的，也是基于这个原因。）
1. 别让我思考
根据Krug的可用性第一军规，网页必须是清晰且自说明的。当你开始创建一个站点是，你的首要职责就是让网站摆脱“问号”—— 用户的决定应该是在赞成，反对以及替代者中自觉地做出的选择。 如果一个站点的导航和站点架构不够直观，那这个网站中的“问号”将会越来越多，并且会让用户很难理解这个网站如何工作和如何才能够A点到B点（即功能的导向很模糊）。一个拥有适当的可视化导向线索和很容易理解的链接的网站结构，将能有效的帮助用户找到达到他们目标的路径。
让我们来看一个例子 Beyondis.co.uk 的口号是”beyond channels, beyond products, beyond distribution”。 这是什么意思呢？因为用户多数情况下采用“F”-pattern 来浏览一个网页，这3句话将是用户在这个页面上第一眼看到的内容。尽管该设计本身非常的简洁而且直观，但是这个页面的主题是什么，用户必须去网页中寻找答案。这是一个完全没有必要的“问号”。对于设计师来说，必须让这样的问号数量为0。将左右页面的内容互换一下，将大大提高可用性。
ExpressionEngine 这个网站使用了和Beyondis类似的页面结构，但是避免了前者存在的“问号”。而且，网站的标语本身具备了功能性，用户可以直接在这里尝试提供的服务和下载试用版本。 通过让用户很容易就能理解系统提供的内容，将有效降低用户的认知负载。当你有过一次成功经历后，你可以和用户沟通，看看系统给用户提供了什么，是什么让他们受益。如果用户不能在你的网站找到他们想要的内容，他们是不会使用你的网站的。