BEM、层叠样式和 Classitis?

BEM, Cascading styles and Classitis?

我正在尝试 return 进行网络前端编码。上次尝试写CSS是10年前,那时候有一种病叫class炎。我对 classitis 的理解可能是错误的,但我认为不要在你的 HTML 文档中乱放太多 CSS classes,并尝试使用级联规则来保持你的 HTML 标记干净利落。

例如,这可能是 classitis

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

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

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

这样,内容和表示之间的分离程度就更高了。

但是,我承认在非常大的web应用上,很容易忘记什么是级联什么,而当其他团队成员加入项目时,他们更容易难以掌握整个前端架构。如果您没有 select 最好的根元素来标记您的 class.

,那么在尝试重构项目时会变得更具挑战性

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

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

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's habit""Nicolas' habit"。是根据内容的语义来命名。

然后皮埃尔来了,我们得给他打扮一下。但是我们的命名阻止了重用。有必要创建一个新的 "Pierre's habit",即使这个与 Albert 的非常相似。

如果服装设计成为我们的业务,那么我们将改变我们的工作方式,使我们更容易重复使用我们的工作。我们将有意避免按内容(穿着的人)命名。我们更喜欢自己给衣服命名。它可以是抽象名称:"Habit 001""Habit 002" 等。为什么不呢?它将是可重复使用的。但是更直观的命名需要更少的记忆力,我们将根据我们看到的命名:"The large and blue habit""The small but wide habit", 等等。所以 Albert 会穿 "the large and blue habit" 而不是 "Albert's habit"。这不是关于混合演示和内容。用于命名包装的语义不再是内容的语义,而是包装的语义。

根据内容语义命名,CSS 代码实际上完全链接并依赖于 HTML 代码。同时,通过包装的命名,CSS 代码成为独立存在的代码,与 HTML 代码分开,这允许 HTML 代码中的不同块更好地重用外观一样