命名BEM子块

我正在使用BEM方法来编写html + css。有了这个语法：命名BEM子块

块：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>

来源

2014-03-28 jeremyhoover

我认为标志，主标题和手机配合其在BEM网站给出的的block定义：

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

你得到的是一个复合块（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”块留下一个左边距。而不是创建一个修改器一样的：

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

这是更好地遵循OOCSS second principle - 单独的容器和内容 - 而离开岗位到容器：

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

来源

2014-03-30 20:33:57 katranci

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

其中三个使用修饰符如'.logo - site_header'。如果可以，请根据修饰符带来的样式差异选择修饰符名称。 “.site_header_logo”和“.site_header__logo”都暗示紧密耦合，这与BEM块的独立性质相反。 – katranci

谢谢！我现在正在更好地掌握BEM。 – jeremyhoover

-2

是的，你可以在类名中去掉了很多。例如：

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 ... 
}

来源

2014-03-28 21:16:13 Matt

谢谢马特，但那不是我的意思。您提供的CSS输出不是遵循BEM命名方法。我觉得很难说清楚，我在实践中没有找到实例来看待。我想基于包含在另一个块中的块来引用块，但我不想在我的示例中使用过长的命名结构。一种选择是在第二级块上使用修饰符。 – jeremyhoover

不是BEM语法。 –

你也可能对BEM's FAQ看看。

什么是另一个元素内的元素的类名？ .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>

来源

2015-08-25 18:47:35

回答

相关问题