BEM筑巢的命名惯例 - 孙子元素

我有follwing HTMLBEM筑巢的命名惯例 - 孙子元素

<div class="listing listing--with-margin"> 
    @foreach($recipients as $recipent) 
     <span class="listing__item">{{ $recipent }} <input type="checkbox"></span> 
     <span class="listing__item">{{ $recipent }} <input type="checkbox"></span> 
    @endforeach

应的复选框类是

<input type="checkbox" class="listing__input">

或

<input type="checkbox" class="listing__item listing__input">

我认为选择1，允许我写的是在更少的嵌套的sass中更清洁。

来源

2017-08-30 LeBlaireau

第一个。第二种选择会给'span'和'input'类'listing__item' - 我认为你不想要？ – sol

绝对是第一个。第二个变体称为'mixin'，这里不适用 –

如果你看看BEM documentation中的Naming页面，在底部你会看到一个带有表单块的示例部分。

在此示例中，您将找到<form>元素，并带有一对<input /> s。

每个<input>都有其自己的元件任一类或.form__input.form__submit的，从块.form类继承两者。他们不会继承超过一个类。

但是，你会注意到他们有多个修饰符类，这是可以接受的。

来源

2017-08-30 10:48:07

''不使用结尾斜杠。 – Rob

@Rob根据[this]（https://stackoverflow.com/a/7854998/8375199）回答，'input'是一个void元素，结束斜杠是可选的。但是，为了最佳实践，我已经删除了答案中的斜线。 –

是的，关闭的斜杠什么都不做，意味着什么，没有为元素本身指定，并且浏览器被指示忽略它。所以它没有价值，毫无意义。 – Rob

BEM筑巢的命名惯例 - 孙子元素

回答

相关问题