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 代码中的不同块更好地重用外观一样
我正在尝试 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 代码中的不同块更好地重用外观一样