聊一聊BEM設計模式在Vue組件開發中的應用

阿羅發布于2019-08-29 12:30 / 1602人閱讀

摘要：聊一聊設計模式在組件開發中的應用回想一下在你的前端生涯中是否遇到過以下問題在寫的時候經常會在命名時絞盡腦汁在團隊多人開發中出現命名沖突在進行組件化開發時如何規范書寫什么是是團隊提出的一種的命名方式，通過這種命名方式可以很好地解決上面遇到的問

聊一聊BEM設計模式在Vue組件開發中的應用

回想一下在你的前端生涯中是否遇到過以下問題
1.在寫css的時候經常會在命名class時絞盡腦汁
2.在團隊多人開發中出現css命名沖突
3.在進行組件化開發時如何規范書寫css

什么是BEM

BEM是Yandex團隊提出的一種css的命名方式，通過這種命名方式可以很好地解決上面遇到的問題，提高css的開發效率和可讀性

進入BEM的世界

B: 表示塊，可以抽象成一個組件

E: 表示元素，組件下的一個元素，多個元素形成一個組件

M:表示修飾符，可以用來表示元素的狀態，比如激活狀態，顏色，大小

BEM這貨究竟張啥樣呢，顏值高不高，請看下面的代碼

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

看完后你的內心會不會在想,臥槽，這貨居然這么丑，名字還這么長，丑拒...

__和--連接符這是什么鬼

__主要用來表示塊(B)和元素(E)間的連接

--用來表示塊或者元素與狀態的連接

比如我們要做寫一個button的組件，可以這么來

    
    /* 有一個叫button的組件 */
    .button {
         dispaly: inline-block;
         pading: 10px;
     } 

    /* btn組件下面有一個顯示圖標的元素 */
    .button__icont {
          font-size: 12px;
     }
    
    /* btn組件有好多顏色可以選擇  */
    .button--primary {
        background: blue;
    }

    .button--success {
        background: green;
     }

    .button--warning {
        background: red;
     }

在Vue中結合Stylus預編譯器使用BEM規范

云服務器 GPU云服務器聊一聊來聊一聊聊一聊去抖聊一聊java內存

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

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

聊一聊BEM設計模式在Vue組件開發中的應用

摘要：聊一聊設計模式在組件開發中的應用回想一下在你的前端生涯中是否遇到過以下問題在寫的時候經常會在命名時絞盡腦汁在團隊多人開發中出現命名沖突在進行組件化開發時如何規范書寫什么是是團隊提出的一種的命名方式，通過這種命名方式可以很好地解決上面遇到的問聊一聊BEM設計模式在Vue組件開發中的應用回想一下在你的前端生涯中是否遇到過以下問題1.在寫css的時候經常會在命名class時絞盡腦汁2.在...

LinkedME2016 2019-08-20 16:05 評論0 收藏0
[譯]聊一聊CSS方法論

摘要：這個方法論在內容和容器之間有著明顯的區分。這是通過把命名為表示其角色的類名。通過使用這種扁平的命名方式避免了多后代的選擇器。原文鏈接：A Look at Some CSS methodologies CSS在大型，復雜，快速迭代的系統中難以管理的程度是出了名的。其中一個原因是CSS缺少內置的作用域管理機制。在CSS中，所有的一切都是全局的，這意味著任何你所做的改變都有可能層疊或者改...

CoffeX 2019-08-28 18:20 評論0 收藏0
[譯]聊一聊CSS方法論

摘要：這個方法論在內容和容器之間有著明顯的區分。這是通過把命名為表示其角色的類名。通過使用這種扁平的命名方式避免了多后代的選擇器。原文鏈接：A Look at Some CSS methodologies CSS在大型，復雜，快速迭代的系統中難以管理的程度是出了名的。其中一個原因是CSS缺少內置的作用域管理機制。在CSS中，所有的一切都是全局的，這意味著任何你所做的改變都有可能層疊或者改...

cfanr 2019-08-01 14:53 評論0 收藏0
聊一聊Vue組件模版，你知道它有幾種定義方式嗎？

摘要：活動結束單文件組件使用構建工具創建項目，綜合來看單文件組件應該是最好的定義組件的方式，而且不會帶來額外的模版語法的學習成本。前端組件化開發已經是一個老生常談的話題了，組件化讓我們的開發效率以及維護成本帶來了質的提升。當然因為現在的系統越來越復雜龐大，所以開發與維護成本就變得必須要考慮的問題，因此滋生出了目前的三大前端框架 Vue、Angular、React。那今天我們就來看看 V...

instein 2019-08-26 10:35 評論0 收藏0
7月份前端資源分享

摘要：更多資源請文章轉自月份前端資源分享的作用數組元素隨機化排序算法實現學習筆記數組隨機排序個變態題解析上個變態題解析下中的數字前端開發筆記本過目不忘正則表達式聊一聊前端存儲那些事兒一鍵分享到各種寫給剛入門的前端工程師的前后端交互指南物聯網世界的更多資源請Star：https://github.com/maidishike... 文章轉自：https://github.com/jsfr...

pingan8787 2019-08-20 17:53 評論0 收藏0