html - OO CSS/CSS 组件

Question

我想知道，哪种方式是真正面向目标的 CSS，您可以在其中以干净的方式真正快速地重用组件。

场景一：

HTML：

<button class="button button-submit">Submit</button>

CSS：

.button {
  /* basic styles */
}
.button-submit {
  /* special styles for submit button */
}

场景二：

HTML

<button class="button submit">Submit</button>

CSS

.button {
  /* basic styles */
}
.button.submit {
  /* special styles */
}

我只看到两个负面方面，每个场景都有一个。

在场景 1 中，您最终可能会拥有非常长的类名。
在场景 2 中，如果您将 .submit 定义为它自己的元素/组件，那么您最终会遇到老问题，即您无法重用代码片段以在任何地方保持不变。

score 2 · Accepted Answer

场景 1 可能是更面向对象的一种，但与所有技术和方法一样，我会使用最适合您需求的一种，并且您会喜欢写作。

目前我正在从头开始重建一个电子商务平台，并且在研究时想采用类似的方法。由于您提到的类名很长，我最终忽略了与您的第一个示例类似的方式。

这一切背后的想法是让编写代码更容易、更快、更可重用。一旦这些因素中的一个在试图满足另一个因素时受到太大影响，那么首先尝试它们的整个想法就会失效。

请注意，这是一个纯粹的主观答案，每个人都不同。

关于我用来帮助做出决定的各种方法和实践的一些好文章：

希望这可以帮助！

score 0 · Accepted Answer

CSS 不是 OOP，但是您可以使用允许您以 DRY 方式编写 CSS 的框架。

2 回答 2