注意:我使用在BEM中称为块的单词Module.同样使用修改后的BEM命名约定,请在答案中使用.
BLOCK__ELEMENT--MODIFIER
假设我有一个.btn看起来像这样的模块:
.btn {
background: red;
text-align: center;
font-family: Arial;
i {
width:15px;
height:15px;
}
}
我需要创建.popup-dialog一个.btn内部的模块:
.popup-dialog {
...
.btn {
position: absolute;
top: 10px;
right: 10px;
}
}
在您的回答中,请确定正确的解决方案,并分析以下方法:(请注意,下面的所有示例都是基于或修改上述CSS)
[覆盖.btn里面的原始类.popup-dialog]
CSS:
.popup-dialog {
...
.btn { // override the original .btn class
position: absolute;
top: 10px;
right: 10px;
}
}
加价:
<div class="popup-dialog">
...
<button class="btn"><i class="close-ico"></i> …所以我对OOCSS有疑问.它应该更便携,但与我通常做的事情相比,我发现它不那么容易.
我的例子:
我有一个小部件见证.在主要内容正文(具有白色背景)中,证词具有黑色字体.但是在页脚(具有蓝色背景)中,证词需要白色字体.
在OOCSS之前,我会做这样的事情:
#main-content .testominial {
color: #000000;
}
#footer .testominial {
color: #FFFFFF;
}
使用这种"旧"方法,我可以将我的小部件从内容区域拖到页脚,颜色可以简单地工作 - 我不需要更改我的小部件的CSS或DOM类.
使用新的OOCSS/BEM,我不应该将.testimonial类耦合到ID(或位置),而是我应该像这样继承它:
.testominial {
color: #000000;
}
.testominial--footer {
color: #FFFFFF;
}
这样做的问题是,我不能再将我的推荐从内容区域拖到页脚而不进入DOM并更改推荐小部件上的类 - 它是轻便的,因为它需要开发人员的手动干预; 而在编辑器可以拖动它之前,样式是自动的.
我错过了什么吗？似乎没有可靠的现实世界的例子吗？
我正在尝试拾取并理解CSS命名约定背后的原因,例如BEM或SUITCss.在SCSS存在的情况下,我很难理解后代类名的价值.
例如:
<ul class="menu">
<li class="menu__item"></li>
<li class="menu__item"></li>
<li class="menu__item">
<a href="#" class="menu__item_link">link</a>
</li>
</ul>
.menu {
.menu__item {
//styles
.menu__item__link { //styles }
}
//or alternatively this syntax..
&__item { //styles }
}
由于能够在SCSS中嵌套规则,我没有看到令人信服的理由让我在我的代码中包含祖先类名.上面我已经定义了样式,这些样式只能用于"菜单"中的"项目",使用后代类名.但是,嵌套结构已经传达了这个!menu__item的规则只适用于菜单下的项目,为什么我需要在类名中包含它？
为什么不:
<ul class="menu">
<li class="item"></li>
</ul>
.menu {
.item {//styles}
}
我知道后代命名约定更明确,也许更适合未来.然而,我认为它只是在html中更明确.如果我想咨询如何构建这个"菜单"模块,我可以查阅CSS并清楚地看到菜单如何嵌套在里面的项目.
我想一个可能的优点是我可以编写我的css un-nested,就像这样:
.menu { //styles }
.menu__item { //styles }
.menu__item__link { //styles }
然后在任何地方使用"menu__item",它仍然在类名中明确表示这是菜单下项目的样式.但那么为什么要将它定义为菜单的后代呢？(我认为,另一个优点是,如果没有嵌套,则CSS标识符字符串更短)
在我看来,如果一个类名被用作另一个的后代,那么在SCSS中嵌套可以实现这一点,并清楚地呈现该逻辑.为什么这个BEM语法是必要的呢？
我想听听有人解释这种类型的惯例的原因.我想坚持所谓的最佳实践,但我很难盲目地这样做,而不是完全理解一个约定.
这是CSS的许多模块化解决方案.我列出了一些主题,但可能还有更多.您如何选择用于新项目的项目？有比较吗？