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

資訊專(zhuān)欄INFORMATION COLUMN

組件庫(kù)使用BEM

yangrd / 2299人閱讀

摘要：的優(yōu)勢(shì)最近在開(kāi)發(fā)一個(gè)組件庫(kù)，選擇了作為的組織形式，主要考慮了以下三個(gè)方面的優(yōu)勢(shì)邏輯分層，容易理解?；诘慕M織形式，基本與組件的組織形式吻合。反過(guò)來(lái)，通過(guò)標(biāo)記的命名，可以直觀地理解組件的功能和依賴關(guān)系。

bem的優(yōu)勢(shì)

最近在開(kāi)發(fā)一個(gè)組件庫(kù)，選擇了BEM作為css的組織形式，主要考慮了以下三個(gè)方面的優(yōu)勢(shì)：

邏輯分層，容易理解。BEM基于block、element、modify的組織形式，基本與組件的組織形式吻合。只要遵循了BEM的命名方式，對(duì)于開(kāi)發(fā)和修改組件，哪些元素和狀態(tài)已經(jīng)存在，都可以直觀的看出來(lái)。反過(guò)來(lái)，通過(guò)html標(biāo)記的BEM命名，可以直觀地理解組件的功能和依賴關(guān)系。

強(qiáng)約束，便于團(tuán)隊(duì)協(xié)作。只要定義好了大的框架和命名，那么團(tuán)隊(duì)其他成員基于BEM的規(guī)范進(jìn)行開(kāi)發(fā)，理解成本降低，而且基本不存在樣式?jīng)_突的問(wèn)題。

預(yù)編譯器支持

目前常用的css預(yù)編譯器，如sass、less、stylus，基本對(duì)BEM的支持都很好，舉個(gè)例子(語(yǔ)法差異暫時(shí)忽略)：

.block {
    &__element {
    }
    &--modifier {
    }
}

編譯后：

.block {
}
.block__element {
}
.block--modifier {
}

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

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

相關(guān)文章

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

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

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

  • 從零開(kāi)始搭建Vue組件庫(kù)——VV-UI

    摘要：各個(gè)大廠也相繼宣布開(kāi)源。但是也會(huì)存在一些問(wèn)題，比如每個(gè)公司可能需要的業(yè)務(wù)組件不盡相同，或者我們想自己開(kāi)發(fā)一套屬于自己的組件庫(kù)，來(lái)增強(qiáng)對(duì)組件的可控性。 前言： 前端組件化是當(dāng)今熱議的話題之一，也是我們?cè)陂_(kāi)發(fā)單頁(yè)應(yīng)用經(jīng)常會(huì)碰到的一個(gè)問(wèn)題，現(xiàn)在我們有了功能非常完善的Element-UI。各個(gè)大廠也相繼宣布開(kāi)源XXX-UI。但是也會(huì)存在一些問(wèn)題，比如每個(gè)公司可能需要的業(yè)務(wù)組件不盡相同，或者我們...

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

  • 從零開(kāi)始搭建Vue組件庫(kù)——VV-UI

    摘要：各個(gè)大廠也相繼宣布開(kāi)源。但是也會(huì)存在一些問(wèn)題，比如每個(gè)公司可能需要的業(yè)務(wù)組件不盡相同，或者我們想自己開(kāi)發(fā)一套屬于自己的組件庫(kù)，來(lái)增強(qiáng)對(duì)組件的可控性。 前言： 前端組件化是當(dāng)今熱議的話題之一，也是我們?cè)陂_(kāi)發(fā)單頁(yè)應(yīng)用經(jīng)常會(huì)碰到的一個(gè)問(wèn)題，現(xiàn)在我們有了功能非常完善的Element-UI。各個(gè)大廠也相繼宣布開(kāi)源XXX-UI。但是也會(huì)存在一些問(wèn)題，比如每個(gè)公司可能需要的業(yè)務(wù)組件不盡相同，或者我們...

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

  • 一篇關(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

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

0條評(píng)論

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