BEM和SMACSS：來自那裡的開發人員的建議-css教學-PHP中文網

<span><span>.block</span> {}
</span><span><span>.block__element</span> {}
</span><span><span>.block--modifier</span> {}
</span><span><span>.block__element--modifier</span> {}</span>

登入後複製

>在bem.info網站上還有其他用於BEM的建築原則和工具，但是，當開發人員討論BEM時，它們通常主要集中在上面的命名慣例上，並且在下面的大多數討論中都是如此。 🎜>

什麼是smacss？

Smacss是喬納森·斯諾克（Jonathan Snook）的CSS框架。在SMACSS網站上，他說這更像是“樣式指南”，而不是剛性CSS框架。它重點介紹其規則的五個類別：

基礎用於HTML，Body，A，A：Hover等默認值。這包括您的CSS重置，通常會在其自己的基本CSS文件中或在您的主要CSS開始時。

>佈局將頁面劃分為帶有標頭，頁腳和文章等元素的部分。通常，開發人員通過將課程前綴l - 。

前綴來顯示佈局元素

>模塊是設計中可重複使用的模塊化元素。 SMACSS文檔將模塊視為您的大多數元素，因此不需要您前綴它們，但是如果您選擇的話，您可以這樣做。

> 狀態用於每個元素可能的變化（例如，活動性，無效，擴展，隱藏）。這些以is-的前綴為前綴。活躍，不活躍，膨脹，被隱藏或通過偽級，例如：懸停和：焦點或媒體查詢。

主題類似於狀態，但定義了模塊和佈局的外觀。它更適用於在整個過程中看起來不同的共享元素的較大站點。您將在每個頁面或每個部分中添加主題變體。

> Smacss中的子元素（例如，“元素”是bem中的“元素”）的父件帶有儀表板的前綴。例如菜單和菜單項目。

> SMACSS指出，這全都取決於開發人員的偏好，並且不像BEM那樣規定。 SMACSS僅提供基本準則。只要您可以記錄您的方法，以便其他開發人員可以遵循自己的命名約定，並以您首選的方式進行排列。

的指導來自那些使用BEM

的人的指導

>它適用於所有項目，大小項目來自英國加的夫的前端開發人員Hamish Taplin認為BEM適合大小項目，它提供了很多優勢：

“ BEM被吹捧為大型項目，但我根本不相信。如果您喜歡編寫乾淨，可維護並且不與特異性問題作鬥爭的代碼，那麼BEM適合您。有人說它產生的HTML醜陋或多餘，但我認為它很漂亮。我可以閱讀一些HTML，並確切地了解正在發生的事情以及元素相互關聯。太好了。”

它避免嵌套

來自澳大利亞悉尼的前端開發商Alec Raeside “ BEM是構建UI的好方法。描述性（有時長的）類名稱非常適合立即理解此類/選擇器在UI體系結構中的位置。這也意味著您很少需要嵌套選擇器，這是與Sass Codebase的常見崩潰。通常，當我與BEM嵌套時，當我想通過HTML標籤名稱定位元素時，或在組件樣式重疊時贏得特殊性戰鬥。

它可以幫助您重新發現類的力量

hamish taplin演唱了BEM和麵向對象的原則的讚美。他對“語義”標記的概念提出了有趣的想法：

“ BEM的優勢很明顯。在採用BEM和OOCS原則之前，我一直是（錯誤）被稱為“語義”標記的倡導者。我認為，許多開發人員（包括我）在很大程度上誤解了這實際上的含義，並且一直在忽略他們以“語義”不夠“語義”為幌子的階級力量。搜索引擎和屏幕閱讀器不在乎您使用的類或用於網格的一些額外的DIV。 Twitter工程師尼古拉斯·加拉格爾（Nicholas Gallagher）用他的博客文章“關於HTML語義和前端體系結構”完全釘牢了這一點，當時他說：班級名稱不能是“非大風”。無論使用什麼名稱：它們具有意義，它們都有目的。班級名稱語義可能與HTML元素不同。'

使在較大站點上工作的工作更加容易

> 許多開發人員都提到的一個巨大的BEM優勢是其以更清潔的方式處理開發和實施大型和模塊化項目的能力。儘管BEM不僅適用於大型站點，但它在這個領域似乎確實具有很大的優勢。哈米甚（Hamish）討論了他的經歷，甚至有一篇有關它的博客文章：

“我涉足了一些小型項目並掌握了它- 起初很難，因為這與我多年來工作的方式背道而馳，但好處變得顯而易見。然後，我們開始了一個本質上很大且非常模塊化的項目- 我的健康技能。這是我與另一位開發人員（Paul Goodfield，也一直在使用BEM）一起工作的第一個Bluegg項目- 我做了前端和後端保羅。好處是很明顯的，保羅可以準確地理解我的標記在做什麼，並圍繞它編寫他的Laravel模板。如果他需要填補一些空白，那麼BEM的可預測性質意味著他可以像我一樣寫出HTML，整個過程變得更加順利。我在博客文章“建立我的健康技能”中寫了這一點。 Alec Raeside還通過BEM命名的模塊化性質發現了大型項目的好處。他說：

“ BEM非常適合大型項目。 CSS是複雜的，大型項目可能會掉落，而在其他地方可能會造成意想不到的後果的地方。例如，將所有

bem方法封裝了您的代碼以進行重複使用

Harry Roberts是英國的前端建築師，設計師和開發人員Harry Roberts，他為BEM和授權清潔CSS領域的想法做出了巨大的貢獻，他指出，BEM方法使重新使用組件變得更加容易通過其封裝跨越網站：

“ BEM方法論非常適合您的組件可能需要從一個代碼庫轉移到另一個代碼庫的項目；它們需要完全封裝，以便您只需將一大塊的HTML，CSS，JS移動到另一個項目，而您不必與任何依賴關係。讓我們想像您在一家擁有五個不同站點的公司工作，他們都需要在首頁上使用相同的輪播。您會在BEM方法中寫下那旋轉木馬，以便您可以一塊拾起並四處移動。

的框架合作良好來自悉尼的前端開發人員Josh Hunt發現它與其他組成部分相似的框架的效果很好：

“ BEM對於具有許多獨立的小部件或組件（例如Web應用程序）的網站非常好。促進HTML組件（Angular，React，聚合物/Web組件）的框架也使應用BEM方法更容易。

快速交付原型

喬什·亨特（Josh Hunt）發現，命名慣例可以幫助您三思而後行，然後使事情變得過於復雜：

>“我發現這有點醜陋，它迫使您在寫非常長的班級名稱時要三思而後行。”

確保您計劃！

hamish taplin還為開始一個新項目的人提供了這些建議：

>喬什（Josh）警告要使用bem時要對項目過於限制：

“不要感到被BEM限制，也不要覺得您被迫遵循一些奇怪的模式。我被哈里·羅伯茨（Harry Roberts）吸引了這兩條推文：

喬什（Josh）解釋說：“ BEM不應該是一個項目的目標，在開發和應用有用的地方時，應該記住的是您要記住的事情。不要太過試圖堅持一些理論上的“標準”。與BEM並存的輔助類別（例如.pull-Right或.text-Center）非常酷。您可能擁有的地方，也會做得同樣（也許更好）。

如果您猶豫了 Hamish並沒有立即躍入Bem。花了一些時間，有影響力的演講和換工作，使他重新評估並讓BEM重新思考他的課程。但是他很高興自己做到了。

“我見過Bem幾次提到過，認為它看起來很有趣，但仍然像我一樣繼續進行，試圖最大程度地減少我寫的標記和課程的數量。有一天，我觀看了哈里·羅伯茨（Harry Roberts）的視頻“破壞了良好的習慣”，並被吹走了。這個傢伙很有目的- 我們實際上解決了什麼問題？
> Hamish繼續說：“當時我正在搬家，從我目前在Bluegg的工作開始，並將其視為嘗試BEM的干淨休息。”
>
>我問哈利（Harry），那位開發人員對“破壞良好習慣”的演講吹散了哈米甚（Hamish），並啟發了喬什（Josh）的推文，如果他有任何特殊的成功故事要分享。他的話回應了“給它去”的心態：
“我從事的每個項目都從BEM命名公約中受益。這並不是立即改變生活的事情，因此很難引用成功的故事本身：通常只是許多部分來創造一個更好的整體。就像方向盤本身並不是很深刻，但這是汽車的重要組成部分。 bem命名是使整個項目變得更好的一件事。
>
“也許我最接近成功的故事，是我介紹我的客戶的時間。他避免了長時間的命名，並引用了經常使用的“但這真是太醜陋！ ”我說服他至少要在一個項目中嘗試一個半天，然後看看他的想法。他喜歡它。幾個小時後，他在這裡提到了下劃線，在這裡進行了雙hyphens。看到人們有那個燈泡時刻總是很高興的。
哈利還為那些不確定的人提出了以下問題：
>
“如果您不確定BEM，請回答以下問題：關於命名事物的嚴格，透明且有意義的方式不喜歡什麼？老實說，使用BEM命名沒有弊端。
我將最終的話放在哈米甚·塔普林（Hamish Taplin）上，後者說：
>
“嘗試一下。 BEM是關於解決問題，因此請查看是否為您做到這一點。我看到它在許多從未嘗試過並希望保留其標記為“語義”的人的論壇或討論中被駁回。我是一樣的，直到我進行比賽，這完全改變了我應該如何寫HTML和CSS的整個前景。如果您想製造出色的產品，則必須準備適應和承認何時錯了。
>使用SMACSS
的人的指導
易於演示和移交
史密斯的開發商克里斯·賴特（Chris Wright）是SMACSS的忠實擁護者，並提供了他的建議。克里斯對SMACSS的主要讚美是易於使用其分類特徵：“一旦我開始利用SMACS如此強大的原因，分類功能，我發現與其他流行的CSS方法相比，它是一種非常可讀和可教學的方法。
“我一直在使用它作為承包商，因為它更容易向人們展示- 這是我的樣式表：帶有L-的課程- 在其前面的佈局中，M-在其前面是模塊的東西，等等。雖然我仍然必須進行交換和解釋，但我必須解釋和文件的數量減少了，因此它也為我節省了更多時間。截至去年，我已經開始在每個項目上使用它。
適合新來者到CSS方法
克里斯特別發現他很難讓其他人與早期版本的BEM和OOCS一起工作，但是SMACSS更容易解釋：
“我發現，向從未遇到過CSS方法論的開發人員解釋要容易得多 - 該方法的價值是什麼以及如何使用它。
>
“我和BEM一起嘗試了一段時間，但總是發現人們會感到困惑。有了OOCS，我發現人們的命名慣例常常到處都是，但通常會明白。 SMACSS提供分類，可幫助您立即看到班級的目的。
易於閱讀
克里斯（Chris）還說，他發現BEM的早期版本有點冗長，但隨著時間的流逝，他更喜歡Smacss。
“從閱讀的角度來看，所有這些下劃線，破折號以及在BEM中的瘋狂長班都傾向於讓我遠離它- 我看到了一些更適合的版本，例如Harry Roberts所做的事情是一個很大的改進關於方法，但我仍然不喜歡我。
可擴展的所有項目
克里斯（Chris）還指出，與較小的站點相比，SMACSS在較大站點上不需要以相同的方式進行遵循，這可以在所有項目中具有靈活性和適用性：>
“我認為可以肯定地說，各種形式的SMACS可以適合所有項目。正如Snook在他的書中所說的那樣- 在一個較小的項目上，您可能不會將主題作為類別（ T-）之類的內容，但是能夠將佈局類與模塊類別從一眼中區分開來是非常有價值的。 >
您可以使用smacss和bem
Hamish Taplin實際上採用了混合方法，使用了他的BEM中的一些SMACSS概念。我發現很多開發人員在兩者之間找到了一個甜蜜的位置，因此可能不是選擇一個的問題：
>
“我確實使用了一些SMACSS概念，但我不認為它們是相互排斥的。我將自己的Sass組織成“基礎”，“佈局”和“模塊”，這些內容廣泛地是SMACSS慣例。我也是在JavaScript中使用“基於州”的課程的忠實擁護者。例如，可以看到或隱藏的模塊可能具有可見的或隱藏的類，或者是由JavaScript控制的。我發現這有助於區分由JavaScript控制的內容，而不是使用BEM式修飾符。我不會反對。
“我要說的是，如果您考慮SMACSS的模塊和狀態規則，則使用一個並不排除另一個。但是除此之外，您還可以根據需要混合和匹配。
>哈里·羅伯茨（Harry Roberts）建議選擇各個地方的最佳位，並使用他自己的方法論，他稱之為“ ITCSS”與BEM，SMACSS和OOCSS的組合。
“我實際上使用了自己的（尚未出版的）ITCSS方法，以及OOCS，BEM和SMACS的smatterings。從任何地方挑選碎屑，而不是盲目地遵循一種痛苦的末端的方法非常重要。我始終使用BEM命名，並將在需要完全封裝的組件上需要在多個代碼庫中共享的項目中使用BEM方法。我會使用OOCS編寫這些組件，然後將這些組件包裝到ITCSS架構中。
“它不會開始並停止使用BEM和SMACSS。 ITCSS旨在涵蓋整個項目； OOCSS是一種既兼容的很棒的小方法。可靠的原則可用於編寫更好的CSS。”

如果您渴望在ITCSS上找到更多信息，Harry可以觀看一個視頻。有關固體CSS原則的更多信息，Harry還提供了這兩篇文章：>

適用於CSS
的單一責任原則
應用於CSS
>的開放/封閉原理

如果您還沒有這樣做，請閱讀SMACSS指南

哈里·羅伯茨（Harry Roberts）強烈建議閱讀《 SMACSS指南：
》
“只需閱讀。 SMACSS是過去幾年中出現的前端閱讀中最好的一部分之一，很難不同意它提出的邏輯。
>關於BEM和SMACSS
的恐怖故事
>我試圖從開發人員那裡獲得一些恐怖的故事和警告 - 我們可以在他們進入學習過程中從他們的失誤中吸取教訓。這是他們的想法。

> alec raeside on Bem

“這是一條學習曲線，在概念上並不難理解，但是要改變您編寫正常CSS/SASS的習慣需要一段時間。不要以純粹基於組件的方式思考很容易。我一年四季都在寫BEM，仍然覺得我正在學習和升級寫作方式。有時，與非BEM CS相比，您必須使用BEM編寫更多的CSS，以實現令人討厭的事情，但最好具有一致性。
“ BEM本身不足以構建UI的最佳方式，我們將BEM，移動第一CSS，適當使用SASS和嚴格的編碼標準結合在一起。我們還沒有完美，但越來越好。我們最近還開始使用SCSS-lint來幫助執行我們的編碼標準，並在較小程度上使用我們的BEM使用情況。
> Chris Wright on Smacss

“我的大多數恐怖故事不是恐怖的故事，而是痛苦的地方。我一直在遇到真正的機構，這些機構確實是笨重的，他們想繼續使用更多的OOCSS方法，這很好（OOCS也很好） - 但是試圖說服某人使用具有特定框架的方法，以稍微稍微調整不使用該框架的項目的方法是一個相當徒勞的論點。因此，在這種情況下，我不得不留下它。我想說的是，Smacss的最大弱點實際上，它比BEM或OOCS的採用程度不大- 似乎很少有人聽說過。
“我自己的實施個人故事並沒有真正堅持該方法論。陷入“所有事物”的陷阱非常容易，而忘記了建議的類別正是這樣，這是一個建議。最難的部分是了解每個類別中的符合條件。全球使用的主按鈕是否稱為.m-btn-primary？還是它生活在模塊中的東西？當您首次開始使用方法論時，並且在SMACSS的情況下顯然可以定義佈局，模塊和主題，這可能會令人困惑。我遇到了一些情況，我必須停下來思考某物的屬於位置，但這對我來說也很積極，關鍵是我們想要更有條理的課程，人們可以輕鬆閱讀和理解。
>喬什·亨特（Josh Hunt）bem

“第一次使用BEM通常會成為一場噩夢。我的第一次創建.classes__about__five__ levels__ -deep。 BEM不應該是DOM結構對類名稱的一對一映射。

“我發現很難將BEM應用到時，當您純粹需要用於樣式的額外元素時，例如.wrapper或.inner。擁有.Article__inner並不是真正的（內部不是文章的要素）。有時，您可以使用自己選擇的單詞（div.Article__Media img.article__img）發揮創造力，但是其他時候，“打破” bem and go go and article-wrapper或.article in。
> hamish taplin on Bem

“我認為BEM的最大挑戰是抽象固有的- 有時很難抬頭。它需要一定程度的計劃來發現可以抽象的模式，並且有時您第一次沒有發現東西時最終需要重構。這在開發中很常見，計劃和經驗可能會有所幫助。
>
>“另一個引人注目的點是，它需要對標記的完全控制 - 如果您在環境（例如.net）中工作可能很困難，而這並非總是可能的。
哈里·羅伯茨（Harry Roberts）在bem
上
>“由於Bem命名只是Goodidea™，因此很少聽到任何恐怖故事。我能想到的最接近的是在今年年初與我的一個非常出色的客戶一起。他們是一支非常勤奮的團隊，他們已經進行了大量的研究並閱讀了更好的CSS架構，他們讓我參加了一個星期的培訓，試圖熨燙任何粗糙的地方。最粗糙的地方之一是實施BEM命名。不幸的是，他們讀了一篇文章（出於不再存在的利益，我不會在這裡鏈接），該文章就BEM命名提供了一些非常非常糟糕的建議。從根本上說明了有缺陷的信息，這完全是錯誤的。客戶遵循了這封信的建議，這使他們陷入了一些真正的麻煩。事情比以往任何時候都更加糾結和互連- 這是Bem命名的目的！但是，這就是我知道的唯一事件。
鮑勃·唐德溫克爾（Bob Donderwinkel）
“好吧，我不會完全稱其為恐怖故事；）但是我製作了一個叫做Kabem的小腳手架工具。我在那裡犯的錯誤是使用帶有多個元素的BEM CSS類名稱（例如Block__Element_Element）。主要是因為這有助於基於這些CSS類名來生成一個嵌套的文件夾結構。從本質上講，我正在捕獲CSS類名稱中的HTML結構，但這實際上使BEM變得更加僵硬，這是不需要的。
>“另一個小陷阱是嵌套bem css選擇器，就像sass或更少的情況下，實際上在不需要的情況下添加了CSS特異性。 BEM可以用作單班名稱，因此也許是要記住的。
結論

>經過每個人的回答和想法後，很明顯，最好的方法似乎是一種混合動力。閱讀所有內容，讓BEM和SMACS持開放態度，看看您的CSS和工作流程是否有所改善。您無需選擇一種方法；將幾種方法的概念結合在一起，為您和您的團隊有效。如果您需要幫助，則有很多開發人員願意分享一些想法和建議。
信用

非常感謝以下開發人員，他們友好地放棄了時間來回答我的問題並分享他們的想法和經驗：

Alec Raeside - 網站，Twitter
鮑勃·唐德溫克爾（Bob Donderwinkel） - 網站，Twitter

克里斯·賴特（Chris Wright） - 網站，Twitter
>
> Hamish Taplin - 網站，Twitter
>
哈里·羅伯茨（Harry Roberts） - 網站，Twitter

喬什·亨特（Josh Hunt） - 網站，Twitter
>

>關於BEM和SMACSS
的常見問題
BEM和SMACSS之間的關鍵差異是什麼？

bem（塊，元素，修飾符）和SMACSS（CSS的可擴展和模塊化體系結構）都是組織CSS的方法。 BEM是一項命名約定，使CSS易於閱讀和理解，而SMACSS是為CSS組織提供規則的樣式指南。 BEM專注於站點的視覺表示，而SMACSS專注於結構和佈局。 BEM使用特定的命名約定，而SMACSS將樣式分為五種類型：基礎，佈局，模塊，狀態和主題。
>
> BEM如何改善CSS可伸縮性？通過為您的CSS提供清晰易理解的結構來伸縮。它使用特定的命名約定，該約定使您可以輕鬆地識別不同元素及其父塊之間的關係。這使得管理和擴展大型CSS代碼庫變得更加容易，因為它減少了命名衝突的可能性，並使代碼更易於閱讀和理解。 SMACS提供了一組組織CSS的準則，這可以使您的代碼更有效，更易於維護。它鼓勵您對樣式進行分類，這可以使您的CSS更加模塊化和重複使用。 SMACS還促進了國家規則的使用，這可以使您更容易在CSS中管理動態風格。

可以將BEM和SMACS一起使用嗎？一起。 BEM可以用作SMACSS框架中的命名約定。這可以提供兩種方法的好處，因為BEM使您的CSS更易於閱讀和理解，而SMACS提供了一種結構化的方法來組織您的CSS。
> BEM如何處理CSS特異性？

BEM通過鼓勵使用類代替ID來進行樣式來處理CSS特異性。這降低了選擇器的特異性，使您的CSS更易於管理和覆蓋。 BEM還勸阻使用嵌套的選擇器，它們可以提高特異性並使您的CSS更難維持。
>
> SMACSS如何處理CSS特異性？

實施BEM？的挑戰是什麼？長而復雜的班級名稱。這可以使您的HTML和CSS更難閱讀和理解。但是，可以通過使用SASS或更少的預處理器來緩解這種情況，這可以幫助管理和簡化您的BEM類。
>
>實現SMACSS的挑戰是什麼？實施SMACS的挑戰是，它需要對CSS及其最佳實踐有很好的了解。它還需要一種紀律處分的方法來編寫和組織您的CSS。但是，一旦您掌握了它，SMACSS可以使您的CSS更加高效，更易於維護。
>
> BEM如何處理基於組件的設計？
BEM非常適合組件基於設計的設計，因為它鼓勵使用塊，可以將其視為單個組件。每個塊都是獨立的，可以在整個網站中重複使用。對於使用基於組件的設計方法的網站，BEM成為一個不錯的選擇。
>
> SMACSS如何處理基於組件的設計？