BEM太多班了？

我一直在關注BEM方法論，我不確定自己是否正確，因爲我有時會遇到很多類。我想保持我的代碼模塊化和可重用，所以我開始使用mixins和佔位符。但在某些情況下，我將結束與這樣的代碼：BEM太多班了？

有代碼的可重用我有例如以下SCSS：

類特定SCSS文件：

.l-page-width { 
    display: inline-block; 

    &_background_white { 
    @extend %background_white; 
    } 

    &_padding_bot-top { 
    @extend %padding_bot-top; 
    } 

    &_center_absolute { 
    @extend %center_absolute; 
    } 
}

佔位符：

%background { 
    &_white { 
    background: $white; 
    } 
} 

%padding { 
    &_bot-top { 
    padding-bottom: span(.35); 
    padding-top: span(.35); 
    } 
} 

%center { 
    &_absolute { 
    bottom: 0; 
    left: 0; 
    margin: auto; 
    overflow: auto; 
    position: absolute; 
    right: 0; 
    top: 0; 
    } 
}

HTML

<div class="l-page-width l-page-width_background_white l-page-width_padding_bot-top l-page-width_center_absolute"> 

<div class="c-quote c-quote_padding_lr"> 
      <h1 class="c-quote__title c-quote__title_outline_black"> 
       Title Here 
      </h1> 
      <p class="c-quote__content"> 
       content text here 
      </p> 
     </div> 
</div>

我已經再次讀取BEM信息網站，並與上前，現在更有道理：

<div class="l-page-width"> 
    <div class="l-page-width__c-quote c-quote"> 
     <h1 class="c-quote__title c-quote__title_outline_black"> 
      Title Here 
     </h1> 
     <p class="c-quote__content"> 
      content text here 
     </p> 
    </div> 
</div>

SCSS：

.l-page-width__c-quote { 
    @extend %background_white; 
    @extend %padding_bot-top; 
    @extend %padding_lr; 
    @extend %align_center; 
}

我

來源

2016-10-22 HendrikEng

擁有所有這些視圖特定的類，你肯定是錯的。請看看https://en.bem.info/methodology/quick-start/ – tadatuta

我會再讀一遍..但我有點困惑什麼將是特定視圖特定屬性的最佳方法，因爲我不想和不應該在Block – HendrikEng

@tadatuta中指定他們，謝謝你的幫助。我再次改變了代碼後，再次想到它可以快速檢查是否更好？非常感謝 – HendrikEng

不要試圖讓你的代碼變得複雜，不要試圖使用噸或助手，mixin等等。嘗試編寫簡單且充足的代碼。
l-page-width__c-quote c-quote - 這個選擇器說什麼關於元素。我甚至無法想象它是什麼。不要試圖以這種方式命名類，它們描述元素的外觀。完美的班級名稱是：news,news__title,news__date等等。
不要使用您的自定義前綴 - 除了你不知道它們是什麼意思。
編寫相同的代碼兩次沒有任何錯誤。更糟糕的是，當你需要修改由相同mixin或佔位符組成的兩個塊之一或試圖理解爲什麼某些元素具有這種外觀時。

我沒有打電話放棄mixins或佔位符。我們只需要謹慎地使用它們。

來源

2016-10-24 06:22:13 3rdthemagical

BEM太多班了？

回答

相關問題