組件庫使用BEM

yangrd 發布于2019-08-29 15:18 / 2288人閱讀

摘要：的優勢最近在開發一個組件庫，選擇了作為的組織形式，主要考慮了以下三個方面的優勢邏輯分層，容易理解。基于的組織形式，基本與組件的組織形式吻合。反過來，通過標記的命名，可以直觀地理解組件的功能和依賴關系。

bem的優勢

最近在開發一個組件庫，選擇了BEM作為css的組織形式，主要考慮了以下三個方面的優勢：

邏輯分層，容易理解。BEM基于block、element、modify的組織形式，基本與組件的組織形式吻合。只要遵循了BEM的命名方式，對于開發和修改組件，哪些元素和狀態已經存在，都可以直觀的看出來。反過來，通過html標記的BEM命名，可以直觀地理解組件的功能和依賴關系。

強約束，便于團隊協作。只要定義好了大的框架和命名，那么團隊其他成員基于BEM的規范進行開發，理解成本降低，而且基本不存在樣式沖突的問題。

預編譯器支持

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

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

編譯后：

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

云服務器 GPU云服務器組件庫 HeyUI組件庫 vuejs組件使用 BEM

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113225.html

CSS規范--BEM入門

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

li21 2019-08-29 12:49 評論0 收藏0
從零開始搭建Vue組件庫——VV-UI

摘要：各個大廠也相繼宣布開源。但是也會存在一些問題，比如每個公司可能需要的業務組件不盡相同，或者我們想自己開發一套屬于自己的組件庫，來增強對組件的可控性。前言：前端組件化是當今熱議的話題之一，也是我們在開發單頁應用經常會碰到的一個問題，現在我們有了功能非常完善的Element-UI。各個大廠也相繼宣布開源XXX-UI。但是也會存在一些問題，比如每個公司可能需要的業務組件不盡相同，或者我們...

BothEyes1993 2019-08-21 17:35 評論0 收藏0
從零開始搭建Vue組件庫——VV-UI

摘要：各個大廠也相繼宣布開源。但是也會存在一些問題，比如每個公司可能需要的業務組件不盡相同，或者我們想自己開發一套屬于自己的組件庫，來增強對組件的可控性。前言：前端組件化是當今熱議的話題之一，也是我們在開發單頁應用經常會碰到的一個問題，現在我們有了功能非常完善的Element-UI。各個大廠也相繼宣布開源XXX-UI。但是也會存在一些問題，比如每個公司可能需要的業務組件不盡相同，或者我們...

wthee 2019-08-01 17:59 評論0 收藏0
一篇關于BEM命名規范

摘要：是一個很有用的方法可以創建復用組件和前端代碼有三個特性易用性，使用只需要使用的命名規范就可以。的簡介是一個強大而簡單的命名規范，使得代碼更容易讓人理解，容易和他人協作，容易擴展，更加強壯和明確，最重要的是嚴謹性。一直以來自己對命名都是比較混亂的，并沒有一個比較好的格式來命名，最近自己碰巧學習到了BEM命名規范，我想談談自己的理解以供自己來學習，同時也可以和各位大佬一起學習。 BEM...

ThreeWords 2019-08-29 17:17 評論0 收藏0