国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

關(guān)于BEM的反思

xbynet / 3531人閱讀

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

反思BEM

在“學(xué)習(xí)愛(ài)BEM”中,我要表明我對(duì)BEM語(yǔ)法的新感受。 我很高興地報(bào)告說(shuō),經(jīng)過(guò)2年以上,我仍然對(duì)我的選擇感到滿意。

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

怎么處理孫子元素

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

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

如果子元素在下面HTML中還有子元素怎么辦? 邏輯會(huì)說(shuō)你會(huì)用這個(gè)孫子的方法。 我的經(jīng)驗(yàn)告訴我,這導(dǎo)致不必要的長(zhǎng)類名(BEM已經(jīng)有錯(cuò),并且沒(méi)有必要嘗試在CSS中反映HTML的結(jié)構(gòu)。

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

在我看來(lái)更好的是只給你的孫子元素們一個(gè)雙重的下劃線符號(hào)加上用不同的名字。

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

縮短修飾符長(zhǎng)度

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

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

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

BEM是如此強(qiáng)大之處在于重構(gòu)。 當(dāng)您重構(gòu)項(xiàng)目時(shí),您通常會(huì)在代碼庫(kù)的大部分內(nèi)進(jìn)行搜索,還有很多是跨越多文件進(jìn)行搜索。

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

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

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

為什么BEM是如此的偉大?,就在于它提供了一個(gè)清晰的命名空間來(lái)說(shuō)明自身的作用。無(wú)論是手動(dòng)還是編程(即通過(guò)linters)。

結(jié)論

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

每個(gè)人都有自己的編碼風(fēng)格,這根據(jù)你的工作不同而變化,很多BEM / ITCSS規(guī)范沒(méi)有意義。 對(duì)于很多營(yíng)銷網(wǎng)站來(lái)說(shuō),甚至是完全多余的。

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

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

翻譯自O(shè)verthinking BEM

關(guān)注我的公眾號(hào),更多優(yōu)質(zhì)文章定時(shí)推送

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

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/112611.html

相關(guān)文章

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

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

    ThreeWords 評(píng)論0 收藏0
  • CSS規(guī)范--BEM入門

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

    li21 評(píng)論0 收藏0
  • 關(guān)于css命名一點(diǎn)思考,探討一下css命名空間可行性

    摘要:畢竟這是張?chǎng)涡衿吣昵暗奈恼隆Cǖ囊馑季褪菈K元素修飾符是由團(tuán)隊(duì)提出的一種前端命名方法論。但此法沒(méi)有經(jīng)過(guò)大型項(xiàng)目的考驗(yàn),希望大神們來(lái)探討一下可行性。 本文主要是探討傳統(tǒng)項(xiàng)目中的css命名,vue、react等單頁(yè)應(yīng)用都可以使用css-module來(lái)解決這個(gè)問(wèn)題 作為一名初級(jí)前端,免不了要切圖(寫css、html靜態(tài)部分),寫css最頭痛的就是給class命名了,詞匯有限,本人又比較懶,...

    lk20150415 評(píng)論0 收藏0
  • 關(guān)于css命名一點(diǎn)思考,探討一下css命名空間可行性

    摘要:畢竟這是張?chǎng)涡衿吣昵暗奈恼隆Cǖ囊馑季褪菈K元素修飾符是由團(tuán)隊(duì)提出的一種前端命名方法論。但此法沒(méi)有經(jīng)過(guò)大型項(xiàng)目的考驗(yàn),希望大神們來(lái)探討一下可行性。 本文主要是探討傳統(tǒng)項(xiàng)目中的css命名,vue、react等單頁(yè)應(yīng)用都可以使用css-module來(lái)解決這個(gè)問(wèn)題 作為一名初級(jí)前端,免不了要切圖(寫css、html靜態(tài)部分),寫css最頭痛的就是給class命名了,詞匯有限,本人又比較懶,...

    crossoverJie 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<