问使用CSS设计网页样式的最佳实践？

EN

编写自己的CSS确实是一门艺术，要掌握它可能需要很长时间。然而，也有一些快速的捷径。基本上，重用现有的模板并稍微修改它们可以在较短的时间内产生结果.有一些免费的工具可以使用CSS - 50个非常有用和功能强大的CSS工具。

因此，从模板开始是web开发人员最简单、最快的方法。有一些很好的免费模板网站，非常方便。此外，还有一个不错的css风格，只需几块钱。这是一个模板网站列表，我喜欢访问时，良好的css样式是必要的。

• 免费css模板
• 风格呼喊
• 35个下载免费CSS模板的优秀网站
• 100免费高质量XHTML/CSS模板
• 免费365 CSS模板

这里有一些学习CSS的好地方。我从我的评论中的W3Tools链接中摘取了这些信息：

• Google: HTML，CSS和从底层开始
• SitePoint
• MDN (Mozilla的开发人员网络)

有几种不同的方法，每种方法都有其优点和缺点，其中大多数都与特定的工作流相关联。

在大型团队中，工作分为“图形设计”、“交互设计”、“切片”、“前端脚本”和“后端编码”，每个工作由不同的人执行，CSS部分是进行切片的人的工作，因为这个人控制HTML和CSS，所以他们可以做他们喜欢的事情。通常，他们使用Dreamweaver这样的工具；这允许WYSIWYG编辑，但由此产生的HTML/CSS通常有点混乱和难以维护--如果流程要求在编写任何代码之前将设计设置为基本的设计:一旦交给编码人员，设计就不会改变，因此在可维护性上花费额外的精力是没有意义的。

然而，通常情况下，团队更小，站点需要更动态和更易于维护。在这种情况下，编写可伸缩和适应性的CSS是很重要的。我所发现的效果相当好的是：

• 从一些“重置”规则开始。您可以使用预先编写的通用重置样式表(google为他们提供了一堆好的样式表)，或者您可以自己编写一些简单的规则。有些人不相信重置样式表；这是一个真正的品味和哲学问题，所以你可能想推翻那些你不喜欢的元素的默认外观。
• 保持HTML语义，也就是说，编写它以反映文档的结构，而不是外观。在没有任何样式表的情况下加载HTML。它不需要看起来像预期的那样，但是它应该以一个逻辑的结构出现。
• 通过编写元素名称匹配的规则(div、dd、input、a、.)创建通用样式并且，在需要时，伪元素/伪类(a:hover，a:visited，.)和属性选择器(需要区分不同类型的输入，例如input[type=text])。在一个通用的HTML片段上尝试它们，例如http://loripsum.net/的输出。这将是您的默认外观；仅凭这些规则，您的大多数站点都应该看起来很好。
• 现在，您有一些站点元素，这些元素看起来不像您想要的那样。对于这些元素，添加类名，在语义上描述元素是什么(或元素的某一方面)。例如<input type="submit" class="default-button"/>、<div class="validation-errors">等。不要使用类名来描述表示属性(<span class="red large">、<div class="float-right">)：这些属性随着时间的推移往往偏离实际的规则，最终导致类float-right被抛向左边或诸如此类的胡言乱语。根据元素的类名设置这些元素的样式。例如，如果您的默认按钮应该更大，则使用.default-button { font-size: larger; } (如果您更喜欢这些按钮，则使用百分比)。
• 不惜一切代价避免内联样式。

在一个正常的浏览器(firefox，或任何基于Webkit的浏览器)上进行开发；一旦您完成了所有的工作，就至少在Firefox、Webkit和Opera上进行测试。它可能会破坏IE；使用条件注释为您必须支持的各种IE版本添加额外的样式表，并添加使其工作所需的任何黑客操作。

就工具而言，您只需要一个文本编辑器和一个浏览器就可以进行测试。Firebug或类似的文档检查器插件是一个很好的帮助(Google / Chromium有一个类似的工具内置在其中)，特别是因为它允许您在浏览器内修改样式--它们不会持久，但是您可以快速地尝试一些东西，看看什么是有效的。

在服务器端，有几种技术允许您使用快捷方式--基本上，它们采用用CSS的超集编写的样式表，添加变量、嵌套规则等内容，并在将其发送到浏览器之前将其转换为常规CSS。cassius和lucius模板语言(用于Haskell)是很好的例子，但是对于许多编程语言都有解决方案。

大多数真正的web开发人员将从头开始编写他们自己的CSS和HTML。工具在测试或调优CSS规则方面可能很有用，但是任何声称为您做这件事的东西都比它更麻烦。

学习正确使用HTML和CSS需要时间，就像学习任何其他技术一样。没有捷径，练习能让你达到目的。

尽管如此，有些WYSIWYG编辑器，如Dreamweaver，支持编辑CSS规则，从而提供了自动完成。当我第一次开始的时候，我发现这非常有用(点击ctrl + space查看所有可能的CSS规则的列表)。