命名BEM子块

Question

我正在使用BEM方法编写html + css.使用以下语法:

• 块:block_name
  • 元素:block_name__element_name
  • 修饰符:block_name__element_name - 修饰符

当我在另一个区块内有一个区块时,我感到困惑.例如,在标题中,我希望标题是我可以引用的块,导航和徽标是块.我想引用那些导航和徽标块作为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>

Answer 1

我认为徽标,主标题和手机的定义block在BEM网站中给出如下:

块是一个独立的实体,是应用程序的"构建块".块可以是简单块也可以是复合块(包含其他块).

你得到的是一个复合块(site_header)中的三个简单块(logo,main_nav和phone).它实际上与作为BEM方法定义页面上的示例给出的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的第二个原则 - 分离容器和内容 - 并将作业留给容器:

.site_header .logo {
    margin-left: 20px;
}

Answer 2

您还可以查看BEM的常见问题解答.

另一个元素中的元素的类名是什么？.block__elem1__elem2？

如果我的块具有复杂的结构并且其元素是嵌套的,我该怎么办？CSS类就像block__elem1__elem2__elem3看起来吓人.根据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>