我试图围绕BEM命名约定.我被困在这里.我可能会误解某些东西,让我们看看.
我有侧边栏导航和内容导航.
<div class="sidebar">
<ul class="sidebar__nav">
<li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
<li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
</ul>
</div>
<div class="content">
<ul class="content__nav">
<li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
<li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
</ul>
</div>
现在我遇到问题,如果我设置.nav__item样式,它们会出现在我的两个导航中,并且不应该具有相同的样式.我应该在这里做一些嵌套,还是我命名我的块和元素错了？
在CSS中嵌套示例:
.content__nav .nav__item { background: Red; }
或者我应该这样命名:
<li class="content__nav__item"><a href="#" class="content__nav__link">LINK</a></li>
你能帮我吗？
在BEM,据我所知,使用修改器,两个破折号是有道理的,这样就可以在区分修改my-block-my-modifier与my-block--my-modifier.
但为什么用block__element而不是block_element？
我正在使用BEM方法编写html + css.使用以下语法:
当我在另一个区块内有一个区块时,我感到困惑.例如,在标题中,我希望标题是我可以引用的块,导航和徽标是块.我想引用那些导航和徽标块作为site_header中的内容.但是,我该怎么写呢？像block_name__sub_block_name这样的链接块似乎很长.
有没有人有他们写这个例子的典型方式？
<div class="site_header__logo">
<a class="site_header__logo__link">
<img class="site_header__logo__image">
</a>
</div>
<nav class="site_header__main_nav">
<ul>
<li class="site_header__main_nav__item">
<a class="site_header__main_nav__link">Home</a>
</li>
<li class="site_header__main_nav__item">
<a class="site_header__main_nav__link">About Us</a>
</li>
<li class="site_header__main_nav__item">
<a class="site_header__main_nav__link">Contact Us</a>
</li>
</ul>
</nav>
<div class="site_header__phone">
<p class="site_header__phone__number">
555.555.5555
</p>
</div>
注意:我使用在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> …给定以下BEM树结构,其中存在五个嵌套级别:
collection-main__features-top__story__byline__author
根据BEM的命名约定,其中一个元素是一个块的一部分,并且在它所属的块之外没有任何意义,命名author该类的正确方法是什么？
由于一个author在语义绑在byline和story背景,但毫无意义下features-top和collection-main块,什么是最好的BEM的名字吗？
collection-main__author
features-top__author
story__author (best?)
story__byline__author
byline__author
如果features引入新块会发生什么？
collection-main__features-top__story__byline__author (target)
collection-main__features-bottom__story__byline__author
features-top__story__author
story--features-top__author (best?)
最后,如果collection添加了另一个块并且我们想要在列表中设置第二个author元素的样式,会发生什么？
collection-main__features-top__story__byline__author
collection-main__features-bottom__story__byline__author (target)
collection-sub__features-top__story__byline__author
collection-sub__features-bottom__story__byline__author
我们会这样做吗？
story--collection-main--features-bottom__author
必须有更好的选择.
假设我有一个带样式的复选框(想想材料设计,有一点可以实现所需的复选框样式).哪个块负责修改父依赖子块？
示例组件 - 复选框
所以我有以下内容:
<div class="Checkbox">
<label class="Checkbox__label">
<input class="Checkbox__input" type="checkbox" checked=true />
<span class="Checkbox__icon glyphicon glyphicon-ok"></span>
<span class="Checkbox__text">{label}</span>
</label>
</div>
我为块中的每个元素设置了基本复选框的样式.在应用程序的上下文中,复选框块可以存在于许多其他块中(具有自己的BEM结构).
其他块的示例
当在"紧凑面板"中说时,该复选框具有略微不同的外观:
<div class="Panel Panel--compact">
<p>Disclaimer.. [text]</p>
<Checkbox label="I Agree" />
</div>
选项一 - 家长"知道"关于孩子
那么..应该Compact Panel"了解"各种儿童积木,并对其进行造型,以便:
// Checkbox.scss
.Checkbox {
margin: 15px;
// .. other
}
// Panel.scss
.Panel {
&.Panel--compact {
margin: 0;
padding: 2px;
}
&.Panel--compact .Checkbox {
margin: 0;
padding: 1px;
}
}
选项二 - 孩子"知道"父母
或者,面板没有意识,复选框检查父范围.
// Checkbox.scss
.Checkbox { …我在编写CSS时已经开始使用BEM方法,并且很少有我努力找到做特定事情的最佳方法.
我想在这里举一个简单的小组例子.
让我们说我正在使用BEM风格编写面板组件CSS.所以我的CSS可能如下所示:
.panel {}
.panel__titlebar {}
.panel__content { display: none; }
面板可以是无铬的或带铬的.所以我为面板定义了另一个修饰符类:
.panel--with-chrome {
border: 4px solid black;
border-radius: 4px;
}
现在假设,面板可以处于全屏/最大化状态,铬和标题栏也会消失.不是为面板和标题栏定义修改器,而是在父级(例如面板 - 全屏)上定义修改器是明智的,并且其余元素应相应地改变.所以现在我的CSS成了:
.panel--fullscreen {
/* something has to be done here */
}
.panel--fullscreen .panel__titlebar { display: none; }
要在全屏模式下删除镶边,我可以:
切换面板 - JS中的chrome类以及面板 - 全屏类
覆盖面板内的chrome CSS - 全屏类.
首先是不好的,因为理想情况下我只想在JS中切换一个类(.panel - 全屏)来切换全屏模式.
第二个是糟糕的,因为我将不得不覆盖以前的CSS,这是一个不好的做法.
那么最好的方法是什么呢？感谢您的评论.
谢谢
所以我对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并更改推荐小部件上的类 - 它是轻便的,因为它需要开发人员的手动干预; 而在编辑器可以拖动它之前,样式是自动的.
我错过了什么吗？似乎没有可靠的现实世界的例子吗？
SASS + BEM在大多数时候都是天堂般的匹配,但是我的共同努力是理解如何在使用SASS父选择器的元素上最好地定义BEM修饰符来影响它的子元素.
我使用BEM样式语法在SASS中定义了以下组件:
.card {
background-color: #FFF;
&__value {
font-size: 2em;
color: #000;
}
}
这很有效,因为SASS的父选择器.它保持相关代码的组织和自包含.
但是当我需要添加一个使用父选择器改变子元素的修饰符时,这个想法很快就会崩溃:
.card {
padding: 2em;
&__value {
font-size: 1.5em;
color: #000;
}
&--big {
padding: 2.5em;
&__value { // Is this going to work?
font-size: 3em;
}
}
}
不.它产生了这个:
.card {
padding: 2em;
}
.card__value {
font-size: 1.5em;
color: #000;
}
.card--big {
padding: 2.5em;
}
.card--big__value { // Wrong
font-size: 3em;
}
以某种方式获取此选择器会更有意义:
.card--big .card__value {
font-size: 3em;
}
这样做的原因是,您可以简单地将修饰符添加到顶级元素,并使其影响任何或所有子元素.
我尝试了几种方法: …
我知道在使用BEM时,类名不应该直接反映HTML结构,但是如何命名包装元素呢？请忽略我的特定语法(靠近SUIT); 它仍然遵循BEM,只是采用不同的方式来区分元素.
例如:
<div class="?">
<footer class="PageFooter">
<h4 class="PageFooter-brand>…</h4>
<ul class="PageFooter-contactDetails">…</ul>
</footer>
<div>
我现在将这个包装器在这个实例中分类为PageFooterWrapper,但是这感觉很笨,因为包装器不是独立的 - 它纯粹存在于PageFooter.显然,为所有内容添加前缀PageFooter-是荒谬的,所以只留下将包装作为以下内容的一部分PageFooter:PageFooter-wrapper.这让我感到不安,因为有一个隐含的建议应用于此.
那么包装器的类应该是什么？