CSS启动新项目时的最佳实践

Question

我想知道在开始处理大型项目的CSS时，最好的方法是什么？因为我在大多数大型项目（如wordpress）上看到他们将所有共享相同属性的类聚集在一起，但是，你怎么能事先知道它们是否匹配，或者是编程后的微工作？

无论如何，只是想了解分组类，ID等的最佳实践，以及采用这种方式的行业标准方法。

Answer 1

CSS框架

对于大型项目，您可能需要在“常规”CSS之上添加额外功能，例如嵌套，继承和mixins。其中任何一个都应该完成工作：

• SASS
• xCSS
• LESS
• OOCSS

性能优化

此外，您还需要进行自动性能优化（源文件的连接，缩小和压缩），所以请看一下：

• Minify

或任何适合您的开发平台。

命名

许多大型网站在类名上使用某种前缀来将样式类与脚本类分开。 E.g：

<div class="navigation dynHomepageNav">(...)</div>

dyn*类在脚本中用作选择器，而navigation类用于样式。好处是你可以让编码人员在不触及设计的情况下重构脚本，设计师可以更改模板而不必担心破坏功能。

但是，使用现代Javascript框架和HTML5，您可以做得更好;对ID和类使用语义命名，使用这些ID和类应用样式，并为所有脚本挂钩使用data-*属性。例如：

<section class="navigation" data-hook="homepageNav">(...)</div>

您将使用类标识符设置样式：

.navigation {
  border: 1px dotted #9c9;
  padding: 12px;
}

使用数据挂钩的脚本（使用James Padolsey's data selector attribute for jQuery）：

$('section:data(hook="homepageNav")').fadeIn();

它可能不像熟悉的旧用法 - 语义类一样熟悉，但它会创造出风格和行为属性的完美分离，一旦你有50.000就会欣赏它。 HTML行，你需要改进设计。