如何根据BEM命名概念来格式化html？

我有我的方法来应用BEM命名项目的fooliwng代码。但我猜想有些事情是错误的，因为BEM指出元素不应该存在。那么我如何命名它们？如何根据BEM命名概念来格式化html？

<div class="container"> 
<div class="profile"> 
    <p class="profile__message></p> 
    <div class="profile__item"> 
    <div class="profile__item__el profile__item__el-image"> 
     <a class="thumb"><img></a> 
     <div class="profile__item__el-remove"></div> 
    </div> 
    <span class="profile__item__el profile__item__el-name"></span> 
    <span class="profile__item__el profile__item__el-author"></span> 
    <span class="profile__item__el profile__item__el-date"></span> 
    <div class="profile__item__el-favorite"></div> 
    </div> 
</div> 
</div>

我明白了，我不应该使用一个单独的类“profile__item__el” becuz并非所有元素都是同一类型的，但都是项目元素，我认为应该从他们的类名明显，但它似乎是根据BEM，这是不正确的。

来源

2016-07-05 boooni

我想我可能会去更多的在这个方向，但即使这不是真正的完美：

<div class="container"> 
    <div class="profile"> 
     <p class="profile__message></p> 
     <div class="profile__item"> 
     <div class="profile__attribute profile__image"> 
      <a class="thumb"><img></a> 
      <div class="action--remove"></div> 
     </div> 
     <span class="profile__attribute profile__name"></span> 
     <span class="profile__attribute profile__author"></span> 
     <span class="profile__attribute profile__date"></span> 
     <div class="action--favorite"></div> 
     </div> 
    </div> 
</div>

的“profile__attribute”类的必要性是值得商榷的。如果您打算将样式应用于所有这些各种属性，您只需要它。

我认为你误解了BEM'修饰符'部分的用途。首先，你只使用了一个连字符，但它应该是两个，其次，修饰符更适用于同一事物的不同变体，如果你有一个按钮元素和一个大的和小的变体，那么你可以有按钮 - 放大和按钮 - 小。我会说名称，作者和日期都是单独的元素，而不是相同元素的不同版本。所有人都说，我不确定BEM是否存在明确的对错，其中很大程度上取决于个人以及您可能拥有哪种编码风格指南。

来源

2016-07-05 13:08:37

简短的回答。

每块内只有元素或其他块

所以每一个元素都像块name__elem名类 - 无需额外的类。

每个块 - 集名称空间。

在BEM使用修改器中更改查看blockor元素。

工作原理：HTML + CSS - 见下文

BEM也是技术与自己的模板引擎堆栈。所以你不需要写纯HTML，它是自动编译的。

它的样子（bemjson）：

{ 
    block : 'row', 
    content : [ 
     { 
      elem : 'col', 
      mods : { sw : 4, mw : 2, lw : 2, xlw : 2 }, 
      content : [ 
       { 
        block : 'footer', // it's determine parent of element 
        elem : 'age', // but it's element 
        content : [ 
         { 
          block : 'icon', 
          mods : { type : 'some-icon' } 
         } 
        ] 
       }, 
      ] 
     }, 
    ] 
}

你可以看到包（HTML）输出HTML：

<div class="row"> // block-namespace 
    <div class="row__col row__col_sw_4 row__col_mw_2 row__col_lw_2 row__col_xlw_2"> //elem row__col, then modifiers 
    <div class="footer__age"> // element age with forced block footer 
     <i class="icon icon_type_some-icon"> 
     <svg></svg> 
     </i> 
    </div> 
</div>

CSS看起来像这样（元素基本上都在2 LVL）：

.row // namespace 
{ 
    margin: 0 -7px; 

    &__col // element 
    { 
     padding: 0 7px; 
    } 
    &__col_p_0 // element with modifier 
    { 
     padding: 0px; 
    } 
}

官方网站的文档： https://en.bem.info/methodology/naming-convention/

来源

2016-07-15 06:23:43 Zentro

如何根据BEM命名概念来格式化html？

回答

相关问题