關于BEM的反思

xbynet 發布于2019-08-29 13:27 / 3543人閱讀

摘要：反思在學習愛中，我要表明我對語法的新感受。縮短修飾符長度在中，修飾符類用兩個連接符表示。在中，它可能是這樣的在的指南中，有一個關于修飾符的部分。對于很多營銷網站來說，甚至是完全多余的。我贊揚對外公開它們的內部規范。

反思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中，它可能是這樣的

在Spatie的指南中，有一個關于修飾符的部分。基本思想是你用“ - ”編寫修飾符，并且他們有一個責任，即他們應該只修改一件事情。

使用這種做法可以縮短HTML，但我認為這是有問題的。

BEM是如此強大之處在于重構。當您重構項目時，您通常會在代碼庫的大部分內進行搜索，還有很多是跨越多文件進行搜索。

舉個例子：如果你的類命名為c-button--large，如果你想去除它，你可以在項目中包括javascript,html, css中搜索使用到這個字符串的地方。

使用這種方法，你能尋找到什么？一個large字符串？這很有可能在代碼的其他實例中使用，例如圖像引用或不相關的javascript。

如果你寫這樣的代碼，你就是在為自己創造了一個難以在將來重構的代碼。當然，現在可能會更容易輸入。但是最終你會發現自己的麻煩會更大。

為什么BEM是如此的偉大？，就在于它提供了一個清晰的命名空間來說明自身的作用。無論是手動還是編程（即通過linters）。

結論

我認為：我們不需要用很多不必要的條件來是使BEM變的更復雜，這樣會使情況變得更糟糕

每個人都有自己的編碼風格，這根據你的工作不同而變化，很多BEM / ITCSS規范沒有意義。對于很多營銷網站來說，甚至是完全多余的。

我贊揚Spatie對外公開它們的內部規范。更多的公司應該這樣做，包括我們！

我希望這篇文章不被視為直接批評他們的CSS指南，而是作為對我們所做選擇的討論的一種方式。

翻譯自Overthinking BEM

關注我的公眾號，更多優質文章定時推送

GPU云服務器云服務器 BEM 管理工作反思關于樣式的關于文件的讀寫

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/112611.html

一篇關于BEM命名規范

摘要：是一個很有用的方法可以創建復用組件和前端代碼有三個特性易用性，使用只需要使用的命名規范就可以。的簡介是一個強大而簡單的命名規范，使得代碼更容易讓人理解，容易和他人協作，容易擴展，更加強壯和明確，最重要的是嚴謹性。一直以來自己對命名都是比較混亂的，并沒有一個比較好的格式來命名，最近自己碰巧學習到了BEM命名規范，我想談談自己的理解以供自己來學習，同時也可以和各位大佬一起學習。 BEM...

ThreeWords 2019-08-29 17:17 評論0 收藏0
CSS規范--BEM入門

摘要：一開始，公司推出的，包括了規范以及其配套構建工具。代表的不同狀態或不同版本。再來看一個之前用常規方式命名的的例子這些類名真是太不精確了，并不能告訴我們足夠的信息。這段時間在整理前端部分的代碼規范，前面提到的CSS規范里面會涉及到選擇器的命名，就參考BEM的命名規范，內容整理如下，供大家參考，請斧正！如大家有興趣，可移步至CSS編碼規范 BEM是由Yandex公司推出的一套CSS命名...

li21 2019-08-29 12:49 評論0 收藏0
關于css命名的一點思考，探討一下css命名空間的可行性

摘要：畢竟這是張鑫旭七年前的文章。命名法的意思就是塊元素修飾符是由團隊提出的一種前端命名方法論。但此法沒有經過大型項目的考驗，希望大神們來探討一下可行性。本文主要是探討傳統項目中的css命名，vue、react等單頁應用都可以使用css-module來解決這個問題作為一名初級前端，免不了要切圖(寫css、html靜態部分)，寫css最頭痛的就是給class命名了，詞匯有限，本人又比較懶，...

lk20150415 2019-08-29 12:36 評論0 收藏0
關于css命名的一點思考，探討一下css命名空間的可行性

摘要：畢竟這是張鑫旭七年前的文章。命名法的意思就是塊元素修飾符是由團隊提出的一種前端命名方法論。但此法沒有經過大型項目的考驗，希望大神們來探討一下可行性。本文主要是探討傳統項目中的css命名，vue、react等單頁應用都可以使用css-module來解決這個問題作為一名初級前端，免不了要切圖(寫css、html靜態部分)，寫css最頭痛的就是給class命名了，詞匯有限，本人又比較懶，...

crossoverJie 2019-08-01 16:52 評論0 收藏0