命名 BEM 子块 [重复]

Posted 2023-02-23

【中文标题】命名 BEM 子块 [重复]

【英文标题】：naming BEM sub blocks [duplicate]

【发布时间】：2014-05-08 12:46:27

【问题描述】：

我正在使用 BEM 方法来编写 html + css。使用这种语法：

方块：方块名称 元素：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>

【参考方案1】：

我认为徽标、主标题和电话符合 block 的定义，在 BEM 网站上给出如下：

块是一个独立的实体，是应用程序的“构建块”。块可以是简单的也可以是复合的（包含其他块）。

您所拥有的是复合块 (site_header) 中的三个简单块（徽标、main_nav 和电话）。它实际上与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>

如果您认为“logo”作为一个名称过于笼统，并且不能代表项目中的其他类型的徽标，请随意给它一个不同的名称，例如“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”块留出左边距。而不是创建如下修饰符：

.logo--push_20 
    margin-left: 20px;

最好关注OOCSS second principle - 分离容器和内容 - 把工作交给容器：

.site_header .logo 
    margin-left: 20px;

【讨论】：

.site_header .logo 是我正在寻找的。但这将如何转化为 BEM 样式？是否可以使用修饰符，如 .logo--site_header 或它自己的名称 .site_header_logo，还是应该像 .site_header__logo 一样链接？

在这三个中使用.logo--site_header 之类的修饰符。如果可以，请根据修饰符带来的风格差异选择修饰符名称。 .site_header_logo 和 .site_header__logo 都建议紧耦合，这违背了 BEM 块的独立性。

谢谢！我现在对 BEM 有了更好的了解。

没问题。我很高兴能帮上忙:)

第一个例子中的 ul 呢？它不也是一个容器吗？你会怎么命名它？ （根据 BEM）

【参考方案2】：

你也可以看看BEM's FAQ。

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

如果我的块结构复杂且元素嵌套，我该怎么办？像 block__elem1__elem2__elem3 这样的 CSS 类看起来很吓人。 根据边界元法，块结构应该是扁平的；您不需要反映块的嵌套 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>

【参考方案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 ...

`

【讨论】：

谢谢马特，但这不是我的意思。您提供的 CSS 输出未遵循 BEM 命名方法。我发现很难说清楚，而且我还没有在实践中找到可以查看的示例。我想基于包含在另一个块中来引用块，但我不想在我的示例中使用过长的命名结构。一种选择是在二级方块上使用修饰符。