BEM，级联样式和Classitis？

Question

我正在尝试返回 Web 的前端编码。上一次尝试写 CSS 是在 10 年前，那时候有一种病叫classitis。我对 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

最近有什么能说明分类、分词、非语义元素以及任何鼓励呈现和内容合并的东西是好事吗？

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

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

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

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

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