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

資訊專欄INFORMATION COLUMN

聊一聊BEM設(shè)計模式在Vue組件開發(fā)中的應(yīng)用

阿羅 / 1608人閱讀

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

聊一聊BEM設(shè)計模式在Vue組件開發(fā)中的應(yīng)用

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

什么是BEM

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

進(jìn)入BEM的世界

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

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

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

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

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

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

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

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

--用來表示塊或者元素與狀態(tài)的連接

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

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

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

    .button--success {
        background: green;
     }

    .button--warning {
        background: red;
     }
    
    

        藍(lán)色按鈕
    


   

        綠色按鈕
    


   

        紅色按鈕
在Vue中結(jié)合Stylus預(yù)編譯器使用BEM規(guī)范

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

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

相關(guān)文章

  • 聊一聊BEM設(shè)計模式在Vue組件開發(fā)中的應(yīng)用

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

    LinkedME2016 評論0 收藏0

  • [譯]聊一聊CSS方法論

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

    CoffeX 評論0 收藏0

  • [譯]聊一聊CSS方法論

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

    cfanr 評論0 收藏0

  • 聊一聊Vue組件模版，你知道它有幾種定義方式嗎？

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

    instein 評論0 收藏0

  • 7月份前端資源分享

    摘要：更多資源請文章轉(zhuǎn)自月份前端資源分享的作用數(shù)組元素隨機(jī)化排序算法實現(xiàn)學(xué)習(xí)筆記數(shù)組隨機(jī)排序個變態(tài)題解析上個變態(tài)題解析下中的數(shù)字前端開發(fā)筆記本過目不忘正則表達(dá)式聊一聊前端存儲那些事兒一鍵分享到各種寫給剛?cè)腴T的前端工程師的前后端交互指南物聯(lián)網(wǎng)世界的 更多資源請Star：https://github.com/maidishike... 文章轉(zhuǎn)自：https://github.com/jsfr...

    pingan8787 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<