成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

關(guān)于BEM的反思

xbynet / 3545人閱讀

摘要：反思在學(xué)習(xí)愛中，我要表明我對語法的新感受?？s短修飾符長度在中，修飾符類用兩個連接符表示。在中，它可能是這樣的在的指南中，有一個關(guān)于修飾符的部分。對于很多營銷網(wǎng)站來說，甚至是完全多余的。我贊揚對外公開它們的內(nèi)部規(guī)范。

反思BEM

在“學(xué)習(xí)愛BEM”中，我要表明我對BEM語法的新感受。 我很高興地報告說，經(jīng)過2年以上，我仍然對我的選擇感到滿意。

當(dāng)我們在項目中選擇代碼風(fēng)格時，我們使用BEM和ITCSS的組合。 前幾天我遇到了Spatie的指南網(wǎng)站。 在CSS部分，我發(fā)現(xiàn)了幾個讓我想到的部分。

怎么處理孫子元素

第一個是“孫子”的概念，它不是“標(biāo)準(zhǔn)BEM”的一部分（如果有這樣的話）：

.component                      /* Component */   
.component__element             /* Child */
.component__element__element    /* Grandchild */

如果子元素在下面HTML中還有子元素怎么辦？ 邏輯會說你會用這個孫子的方法。 我的經(jīng)驗告訴我，這導(dǎo)致不必要的長類名（BEM已經(jīng)有錯，并且沒有必要嘗試在CSS中反映HTML的結(jié)構(gòu)。

解決這個問題花了我很長一段時間。 在CSS中反映HTML的底層結(jié)構(gòu)似乎是一個干凈的想法。 一旦你開始應(yīng)用它，雖然你會發(fā)現(xiàn)這導(dǎo)致代碼太長; 當(dāng)你想改變你的HTML結(jié)構(gòu)時，你需要重命名很多。

在我看來更好的是只給你的孫子元素們一個雙重的下劃線符號加上用不同的名字。

如果你發(fā)現(xiàn)你的結(jié)構(gòu)太深，你可能需要定義一個新的組件。

縮短修飾符長度

在BEM中，修飾符類用兩個連接符表示。 例如，我們有一個帶有基類c-button的按鈕。 定義一個大按鈕，它是常規(guī)按鈕的變體，使用c-button--large修飾。在html中，它可能是這樣的

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

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

BEM是如此強大之處在于重構(gòu)。 當(dāng)您重構(gòu)項目時，您通常會在代碼庫的大部分內(nèi)進行搜索，還有很多是跨越多文件進行搜索。

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

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

如果你寫這樣的代碼，你就是在為自己創(chuàng)造了一個難以在將來重構(gòu)的代碼。 當(dāng)然，現(xiàn)在可能會更容易輸入。但是最終你會發(fā)現(xiàn)自己的麻煩會更大。

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

結(jié)論

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

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

我贊揚Spatie對外公開它們的內(nèi)部規(guī)范。 更多的公司應(yīng)該這樣做，包括我們！

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

翻譯自O(shè)verthinking BEM

關(guān)注我的公眾號，更多優(yōu)質(zhì)文章定時推送

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112611.html

相關(guān)文章

  • 一篇關(guān)于BEM命名規(guī)范

    摘要：是一個很有用的方法可以創(chuàng)建復(fù)用組件和前端代碼有三個特性易用性，使用只需要使用的命名規(guī)范就可以。的簡介是一個強大而簡單的命名規(guī)范，使得代碼更容易讓人理解，容易和他人協(xié)作，容易擴展，更加強壯和明確，最重要的是嚴(yán)謹(jǐn)性。 一直以來自己對命名都是比較混亂的，并沒有一個比較好的格式來命名，最近自己碰巧學(xué)習(xí)到了BEM命名規(guī)范，我想談?wù)勛约旱睦斫庖怨┳约簛韺W(xué)習(xí)，同時也可以和各位大佬一起學(xué)習(xí)。 BEM...

    ThreeWords 評論0 收藏0

  • CSS規(guī)范--BEM入門

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

    li21 評論0 收藏0

  • 關(guān)于css命名的一點思考，探討一下css命名空間的可行性

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

    lk20150415 評論0 收藏0

  • 關(guān)于css命名的一點思考，探討一下css命名空間的可行性

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

    crossoverJie 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<