摘要:反思在學(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
摘要:是一個(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...
摘要:一開始,公司推出的,包括了規(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命名...
摘要:畢竟這是張?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命名了,詞匯有限,本人又比較懶,...
摘要:畢竟這是張?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命名了,詞匯有限,本人又比較懶,...
閱讀 1176·2021-10-11 10:59
閱讀 1963·2021-09-29 09:44
閱讀 853·2021-09-01 10:32
閱讀 1424·2019-08-30 14:21
閱讀 1870·2019-08-29 15:39
閱讀 2973·2019-08-29 13:45
閱讀 3532·2019-08-29 13:27
閱讀 2006·2019-08-29 12:27