我正在使用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>
答案 0 :(得分:14)
我认为徽标,主标题和电话符合block
的定义,该定义在BEM网站中给出:
块是一个独立的实体,是应用程序的“构建块”。块可以是简单块也可以是复合块(包含其他块)。
你得到的是一个复合块(site_header)中的三个简单块(logo,main_nav和phone)。它实际上非常类似于BEM methodology definitions page上作为示例给出的HEAD复合块。
所以我会这样写:
<div class="logo">
<a class="logo__link">
<img class="logo__image">
</a>
</div>
<nav class="main_nav">
<ul>
<li class="main_nav__item">
<a class="main_nav__link">Home</a>
</li>
<li class="main_nav__item">
<a class="main_nav__link">About Us</a>
</li>
<li class="main_nav__item">
<a class="main_nav__link">Contact Us</a>
</li>
</ul>
</nav>
<div class="phone">
<p class="phone__number">
555.555.5555
</p>
</div>
如果您认为“徽标”过于通用而无法代表项目中其他类型的徽标,请随意为其命名,例如“company_logo”。
在样式方面,BEM建议使用块修饰符和元素修饰符来表示它们的不同样式。例如,如果您想要以粗体显示电话号码,则可以在CSS中为其创建类修饰符,并将其应用于HTML,如下所示:
.phone__number--bold {
font-weight: bold;
}
<div class="phone">
<p class="phone__number phone__number--bold">
555.555.5555
</p>
</div>
修饰符是其他块中样式块的首选方法。所以不要这样做:
.site_header .phone__number {
font-weight: bold;
}
我认为有一个例外,那就是当你想要将“位置相关的样式”赋予块内部时。假设您要为“徽标”块提供左边距。而不是创建像:
这样的修饰符.logo--push_20 {
margin-left: 20px;
}
最好遵循OOCSS second principle - 单独的容器和内容 - 并将作业留给容器:
.site_header .logo {
margin-left: 20px;
}
答案 1 :(得分:12)
您还可以查看BEM's FAQ。
另一个元素中的元素的类名是什么?
.block__elem1__elem2
?如果我的块具有复杂的结构并且其元素是嵌套的,我该怎么办?像
block__elem1__elem2__elem3
这样的CSS类看起来很吓人。 根据BEM方法,块结构应平整;您不需要反映块的嵌套DOM结构。因此,此案例的类名称为:
.block{}
.block__elem1{}
.block__elem2{}
.block__elem3{}
尽管可以嵌套块的DOM表示:
<div class='block'>
<div class='block__elem1'>
<div class='block__elem2'>
<div class='block__elem3'></div>
</div>
</div>
</div>
除了类看起来更好之外,它还使元素仅依赖于块。因此,在对界面进行更改时,您可以轻松地在块中移动它们。块DOM结构的更改不需要对CSS代码进行相应的更改。
<div class='block'>
<div class='block__elem1'>
<div class='block__elem2'></div>
</div>
<div class='block__elem3'></div>
</div>
答案 2 :(得分:-3)
是的,你可以在类名中删除很多东西。例如:
HTML:
`
<nav class="site_header">
<ul>
<li class="nav_item">
<a class="nav_link">Home</a>
</li>
<li class="nav_item">
<a class="nav_link">About Us</a>
</li>
<li class="nav_item">
<a class="nav_link">Contact Us</a>
</li>
</ul>
</nav>
`
然后在你的CSS中放置:
`
.site_header {
... stuff ...
}
.site_header .nav_item {
... nav_item stuff ...
}
.site_header .nav_link {
... nav_link stuff ...
}
`