html - 面向对象的 CSS/CSS 组件

<分区>

想要改进这个问题？ 更新问题，以便 editing this post 可以用事实和引用来回答它.

关闭 8 年前。

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

场景 1:

HTML:

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

CSS:

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

场景 2:

HTML

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

CSS

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

我只看到两个消极方面，每个场景一个。

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

最佳答案

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

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

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

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

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

希望这对您有所帮助!

关于html - 面向对象的 CSS/CSS 组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24804274/