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

Question

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

无论如何,只是想了解分组类,ID等的最佳实践,以及这种方式的行业标准方法是什么.

Answer 1

CSS框架

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

此外,您还需要进行自动性能优化(源文件的连接,缩小和压缩),因此请查看:

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

许多大型站点在类名上使用某种前缀来将样式类与脚本类分开.例如:

<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;
}

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

它可能不像熟悉的旧的use-semantic-classes-for-everything方法那样简洁或看起来熟悉,但它会创建风格和行为属性的完美分离,一旦你拥有50.000行HTML,你会欣赏它们你需要改造设计.