BEM、层叠样式和 Classitis？

Question

我正在尝试返回到 Web 的前端编码。上一次写 CSS 是在 10 年前，那时候有一种病叫 分类炎 .我对 classitis 的理解可能是错误的，但我认为不要在您的 HTML 文档中放置过多的 CSS 类，并尝试使用级联规则来保持您的 HTML 标记干净简洁。

例如，这可能是分类炎

<ul class="feed">
<li class="item">
<img src="" class="thumbnail"/>
<a href="" class="read-more">Read More</a>
</li>
</ul>

利用CSS中级联规则的优势，我们可以删除除 class="feed"之外的所有类。然后编写CSS规则，例如

.feed li img {/*style*/}
.feed li a {/*style*/}

通过这种方式，内容和呈现之间有更大程度的分离。

但是，我承认，在非常大的 Web 应用程序上，很容易忘记什么级联什么，而当其他团队成员加入项目时，他们更有可能难以掌握整个前端架构。如果您没有选择最佳的根元素来标记您的类，那么在尝试重构项目时，它会变得更具挑战性。

我认为 BEM 非常有用，因为类命名约定清楚地标识了每个块和元素应该做什么。 但这不意味着您要重新引入分类炎，并承认将演示与内容分开是一种无法实现的幻想吗？ 所以这就是我的问题。

备注 - 我看到有些人将 classitis 定义为在块的元素中重复类名(例如，父、子和孙子都提到同一个类)。不确定这是否是当时行业公认的定义，或者 classitis 的定义是否更通用，意味着在您可以使用级联规则时引入 CSS 类/id。

Answer 1

Anything more recent that says whether classitis, divitis, non-semantic elements and anything that encourages the merger of presentation and content is a GOOD thing?

OOCSS 和 BEM 是几年前出现的两种 CSS 方法。他们颠倒了良好的做法。

CSS 代码用于修饰内容块。想象一下，我们必须为 Albert 和 Nicolas 制作两件不同的衣服。天真的方法是将这两件衣服命名为:“Albert's 的习惯”和“Nicolas 的习惯”。它是根据内容的语义命名的。

然后皮埃尔来了，我们必须给他打扮。但是我们的命名阻止了重用。即使这个习惯与阿尔伯特的习惯非常相似，也有必要创造一种新的“皮埃尔的习惯”。

如果服装设计成为我们的业务，那么我们将改变我们的工作方式，让我们更容易重复使用我们的工作。我们将有意避免以内容(穿着者)命名。我们更喜欢给衣服自己命名。它可以是抽象名称:“习惯 001”、“习惯 002”等。为什么不呢？它将是可重复使用的。但是更直观的命名需要更少的内存力，我们会根据我们所看到的来命名:“大而蓝的习惯”、“小而宽的习惯”等。 所以艾伯特会穿“大而蓝的习惯” ”而不是“阿尔伯特的习惯”。这不是关于混合演示和内容。用于命名包装的语义不再是内容的语义，而是包装的语义。

通过内容语义命名，CSS 代码实际上完全链接并依赖于 HTML 代码。而随着包装的命名，CSS 代码变成了一个独立存在的代码，与 HTML 代码分开，这允许 HTML 代码中的不同块更好地重用相同的外观。