使用BEM方法和小文件大小

我正在嘗試深入BEM方法。儘管它似乎是所有項目規模的「必備」方法，但我對它感到不滿或者我只是試圖以錯誤的方式使用它？使用BEM方法和小文件大小

使用BEM的CSS被分成這樣的東西。

.block { 
    /* Block code goes here */ 
} 

.block--is-hidden { 
    /* Block modifier code goes here */ 
} 

.block__element { 
    /* Element code goes here */ 
}

這對我來說似乎很不錯，只要你不重用一些代碼。假設我正在使用Bootstrap或任何其他CSS框架/庫。這樣做我只是想使用網格。這就是說我的標記可能看起來像這樣。

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-12"> 
     ... 
    </div> 
    </div> 
</div>

根據BEM，這將是一個不行。相反，所有的網格類都應該封裝在我們相應的塊和元素類中。實現這一目標的一種可能的方法是通過SASS，它是@include。對我來說，這基本上導致冗餘代碼。

所以我現在的問題是。我錯過了什麼嗎？我的意思是，使用BEM而例如將Bootstraps .container代碼加載到我自己的每個塊中的樣式只會導致海量輸出CSS文件。我的方法是否正確？如果是這樣 - 我真的會爲了更好地組織CSS和更好的可讀標記而犧牲最初的加載時間嗎？

來源

2017-07-23 Aer0

定義「大規模CSS輸出」。你說「未來這可能是巨大的」，沒有任何實際的數字來支持你的要求。另外，解析CSS的速度非常快，gzip可以幫助像BEM這樣的安裝程序加載類名稱中的模式，使得內容傳輸幾乎不存在問題。本質上，你要求純粹猜測的輸入，這是任何人都無法準確回答的。 – Garbee

你忘了gzip/deflate。 –

請問您的block必須從容器級別開始嗎？我不確定這是否完全違反了BEM方法，但我個人在html> body> .container級別「開始」我的block。所以：

<html> 
<body> 

    <div class="container"> 
    <div class="cheesecake"> 
     <h1 class="cheesecake__heading"></h1> 
    </div> 
    </div> 

</body> 
</html

隨着SCSS看起來像：

.cheesecake { 
    &__heading {} 
}

等。

來源

2017-07-23 11:59:03

使用BEM方法和小文件大小

回答

相關問題