反思BEM
在“學習愛BEM”中，我要表明我對BEM文法的新感受。 我很高興地報告說，經過2年以上，我仍然對我的選擇感到滿意。
當我們在項目中選擇代碼風格時，我們使用BEM和ITCSS的組合。 前幾天我遇到了Spatie的指南網站。 在CSS部分，我發現了幾個讓我想到的部分。
怎麼處理孫子元素
第一個是“孫子”的概念，它不是“标準BEM”的一部分（如果有這樣的話）：
.component /* Component */
.component__element /* Child */
.component__element__element /* Grandchild */ 複制
如果子元素在下面HTML中還有子元素怎麼辦？ 邏輯會說你會用這個孫子的方法。 我的經驗告訴我，這導緻不必要的長類名（BEM已經有錯，并且沒有必要嘗試在CSS中反映HTML的結構。
解決這個問題花了我很長一段時間。 在CSS中反映HTML的底層結構似乎是一個幹淨的想法。 一旦你開始應用它，雖然你會發現這導緻代碼太長; 當你想改變你的HTML結構時，你需要重命名很多。
在我看來更好的是隻給你的孫子元素們一個雙重的下劃線符号加上用不同的名字。
如果你發現你的結構太深，你可能需要定義一個新的元件。
縮短修飾符長度
在BEM中，修飾符類用兩個連接配接符表示。 例如，我們有一個帶有基類
c-button
的按鈕。 定義一個大按鈕，它是正常按鈕的變體，使用
c-button--large
修飾。在html中，它可能是這樣的
<button class="c-button c-button--large">My button text</button>
在Spatie的指南中，有一個關于修飾符的部分。 基本思想是你用“ - ”編寫修飾符，并且他們有一個責任，即他們應該隻修改一件事情。
使用這種做法可以縮短HTML，但我認為這是有問題的。
BEM是如此強大之處在于重構。 當您重構項目時，您通常會在代碼庫的大部分内進行搜尋，還有很多是跨越多檔案進行搜尋。
舉個例子：如果你的類命名為
c-button--large
，如果你想去除它，你可以在項目中包括javascript,html, css中搜尋使用到這個字元串的地方。
使用這種方法，你能尋找到什麼？ 一個
large
字元串？ 這很有可能在代碼的其他執行個體中使用，例如圖像引用或不相關的javascript。
如果你寫這樣的代碼，你就是在為自己創造了一個難以在将來重構的代碼。 當然，現在可能會更容易輸入。但是最終你會發現自己的麻煩會更大。
為什麼BEM是如此的偉大？，就在于它提供了一個清晰的命名空間來說明自身的作用。無論是手動還是程式設計（即通過linters）。
結論
我認為：我們不需要用很多不必要的條件來是使BEM變的更複雜，這樣會使情況變得更糟糕
每個人都有自己的編碼風格，這根據你的工作不同而變化，很多BEM / ITCSS規範沒有意義。 對于很多營銷網站來說，甚至是完全多餘的。
我贊揚Spatie對外公開它們的内部規範。 更多的公司應該這樣做，包括我們！
我希望這篇文章不被視為直接批評他們的CSS指南，而是作為對我們所做選擇的讨論的一種方式。
翻譯自Overthinking BEM