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築巢的命名慣例 - 孫子元素

回答

相關問題