开始新元素时的 CSS 最佳实践

Question

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

无论如何，只是想知道对类、id 等进行分组的最佳实践，以及这种方式的行业标准方法是什么。

Answer 1

CSS 框架

对于大型元素，您可能需要在“常规”CSS 之上添加额外功能，例如嵌套、继承和混合。这些中的任何一个都应该完成工作:

• SASS
• xCSS
• LESS
• OOCSS

性能优化

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

• Minify

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

命名

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

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

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

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

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

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

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

以及使用数据 Hook 的脚本(使用 James Padolsey's data selector attribute for jQuery ):

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

它可能不像旧的 use-semantic-classes-for-everything 方法那么简洁或看起来那么熟悉，但它会创建样式和行为属性的巧妙分离，一旦你拥有 50.000，你就会欣赏HTML 行，您需要修改设计。