国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

關于css命名的一點思考，探討一下css命名空間的可行性

lk20150415 / 809人閱讀

摘要：畢竟這是張鑫旭七年前的文章。命名法的意思就是塊元素修飾符是由團隊提出的一種前端命名方法論。但此法沒有經(jīng)過大型項目的考驗，希望大神們來探討一下可行性。

本文主要是探討傳統(tǒng)項目中的css命名，vue、react等單頁應用都可以使用css-module來解決這個問題

作為一名初級前端，免不了要切圖(寫css、html靜態(tài)部分)，寫css最頭痛的就是給class命名了，詞匯有限，本人又比較懶，想類名比布局還費勁。在網(wǎng)上找了一通，css規(guī)范到是有比較統(tǒng)一的，接受度較高的。但css命名似乎沒有什么比較完美的方案。

張鑫旭大神的精簡法

BEM命名法 - 大漠老師科普BEM

簡潔法

張鑫旭大神的簡潔法是這樣的：

.fr {
    float: left;
}

.tc {
    text-align: center;
}

.pb8 {
    padding-bottom: 8px;
}

簡潔法重用率高，性能好，但是這么一堆class，有點寫行內(nèi)式樣的感覺了，維護起來太難受了。畢竟這是張鑫旭七年前的文章。

BEM命名法 
BEM的意思就是塊（block）、元素（element）、修飾符（modifier）,是由Yandex團隊提出的一種前端命名方法論。這種巧妙的命名方法讓你的CSS類對其他開發(fā)者來說更加透明而且更有意義。BEM命名約定更加嚴格，而且包含更多的信息，它們用于一個團隊開發(fā)一個耗時的大項目。 ————摘自大漠老師BEM科普

BEM應該算是比較科學比較系統(tǒng)的命名法了，每個class都BEM來一套，自然不會混亂。但是這冗長的類名寫起來，真讓人手軟。雖然用scss的&選擇器可以省不少事，不過html里的冗長類名還是免不了，pug等html模板也救不了我們啊。

于是我在想有沒有一種既科學又簡潔的css命名法呢，于是我自創(chuàng)了一種命名空間法，在自己項目里用的倒挺開心。但此法沒有經(jīng)過大型項目的考驗，希望大神們來探討一下可行性。

命名空間法 基本思想

此法配合scss使用更佳哦，思想就是在最外層使用獨特的模塊命名，在內(nèi)層使用簡單的類名，禁止在最外層使用簡單的類名，不同的模塊之中，可以任意使用簡單的類名，并不影響其他模塊。

舉個例子：

.m-header {
    .left {
        background: red;
        height: 10px;
    }

    .right {
        background: yellow;
        height: 10px;
    }
}

.m-body {
    .left {
        background: blue;
        height: 10px;
    }

    .right {
        background: green;
        height: 10px;
    }
}

結(jié)果是這樣的：

不了解scss的同學可以看一下編譯后的css：

.m-header .left {
  background: red;
  height: 10px; }
.m-header .right {
  background: yellow;
  height: 10px; }

.m-body .left {
  background: blue;
  height: 10px; }
.m-body .right {
  background: green;
  height: 10px; }

兩個模塊(m-header和m-body，模塊推薦以m-為前綴)中的.left和.right互不影響，只要我們在最外層定義一個獨特的類名，如同命名空間，并且不在最外層使用簡單類名，防止沖突。那么我們就可以再模塊內(nèi)部隨意使用各種類名，當然下個模塊內(nèi)可以再用一次，媽媽再也不擔心我詞匯量不足了，想不出名字了。

.top, .bottom, .left, .right上上下下左右左右baba一套又一套。為了規(guī)范推薦使用更加語義化的類名，當然不必帶上長長的前綴。

公用式樣

一個項目里可能會有很多公共式樣，其實只要我們遵循一點規(guī)范便不會發(fā)生沖突。比如公共式樣我們統(tǒng)一帶上"p-"前綴。其它地方你就別用"p-"做前綴了。scss里的mixin、function、$variable我們也可以用起來，提高效率。

.p-btn {
    font-size: 14px;
}

.p-bg-green {
    background: green;
}
　嵌套過深的問題

很多css規(guī)范里都規(guī)定嵌套不能超過四層，下面這個例子里我們已經(jīng)嵌套6層了。在scss里我們不能直接使用@at-root這會將簡單類名暴露到最外層。使用&也不能避免嵌套過深。

這時我們需要使用@at-root 后面寫上模塊名空格即可防止嵌套過深，并避免式樣污染了。嵌套特別深的情況下推薦啟用子模塊。(這里可能存在漏洞，不知道大神們有沒有更優(yōu)雅的方案)

.m-header {
    .a {
        background: #000;
        .b {
            background: #111;
            .c {
                background: #222;
                @at-root .m-header .d {
                    background: #333;
                    .e {
                        background: #444;
                    }
                }
            }
        }
    }
}

編譯成css：

.m-header .a {
    background: #000;
}

.m-header .a .b {
    background: #111;
}

.m-header .a .b .c {
    background: #222;
}

.m-header .d {
    background: #333;
}

.m-header .d .e {
    background: #444;
}
使用子代選擇器讓命名更隨意

如果你不用兼容老掉牙的ie6，對于一些只在子代中生效的式樣(大多如此)，帶上子代選擇器吧。多敲一個>，優(yōu)點是css渲染效率更高，命名可以更佳隨意，你甚至可以這樣，雖然不推薦。

.m-header {
    > .a {
        height: 40px;
        background: red;
        > .a {
            height: 20px;
            background: green;
        }
    }
}

式樣并沒有沖突：

總結(jié)一下命名空間法規(guī)范

最外層css模塊m-為前綴，并且類名獨一無二。

模塊內(nèi)元素式樣通過后代或子代選擇器約束，只作用與此模塊，使用簡潔的語義化命名。

公共式樣使用p-為前綴。

禁止在最外層使用簡單的類名，可增加特定前綴，防止污染模塊內(nèi)式樣。

此方法與很多編程語言的命名空間有著異曲同工之妙，大家應該看到了私有變量和全局變量的味道。在下經(jīng)驗尚淺，不知道此法有沒有大的漏洞，歡迎大家理性討論，指出問題或加以完善。

補充

自己用了一段時間，如果不是非常復雜的項目(如評論區(qū)大神所說的動態(tài)css和動態(tài)dom)問題不大。有幾點感覺需要改進一下：
第一，為了避免嵌套過深和便于復用維護，模塊內(nèi)部不要使用嵌套了，用scss寫到第二級就好
第二，父子選擇器還是不要用了，因為dom父子關系經(jīng)常會變動，模塊內(nèi)部css命名推薦用唯一的。

這種方法的確有很多人在用，比如網(wǎng)易的CSS規(guī)范 - 命名規(guī)則，我發(fā)誓之前沒有看過 :)逃了

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/112012.html

相關文章

  • 關于css命名的一點思考，探討一下css命名空間的可行性

    摘要：畢竟這是張鑫旭七年前的文章。命名法的意思就是塊元素修飾符是由團隊提出的一種前端命名方法論。但此法沒有經(jīng)過大型項目的考驗，希望大神們來探討一下可行性。 本文主要是探討傳統(tǒng)項目中的css命名，vue、react等單頁應用都可以使用css-module來解決這個問題 作為一名初級前端，免不了要切圖(寫css、html靜態(tài)部分)，寫css最頭痛的就是給class命名了，詞匯有限，本人又比較懶，...

    crossoverJie 評論0 收藏0

  • (css/js)如何起個好名字

    摘要：就會給起名表示求和函數(shù)，漸漸地知道最好用英語給變量或者是函數(shù)名起名字，盡管有時候英語不好，那就翻翻有道吧。所以有一段時間的命名是很長的兩三個單詞的駝峰法命名。 什么鬼，又不知道怎么命名class了直接進入正文 記得大一學C語言的時候，那個時候根本沒把這當回事吧。所謂的混沌階段變量名，函數(shù)名，隨意吧，那個時候?qū)懞唵蔚豤程序，就好像寫著玩，就算復雜點得也不過一二百行，所以變量名什么的，可能...

    Rainie 評論0 收藏0

  • 通用 CSS 筆記、建議與指導

    摘要：如下區(qū)塊標題前綴可以讓我們使用命令查找標題名時將搜索范圍限制在區(qū)塊標題中。 在參與規(guī)模龐大、歷時漫長且參與人數(shù)眾多的項目時，所有開發(fā)者遵守如下規(guī)則極為重要： 保持 CSS 易于維護 保持代碼清晰易懂 保持 CSS 的可拓展性 為了實現(xiàn)這一目標，我們要采用諸多方法。 本文檔第一部分將探討語法、格式以及分析 CSS 結(jié)構(gòu)；第二部分將圍繞方法論、思維框架以及編寫與規(guī)劃 CSS 的看法...

    lushan 評論0 收藏0

  • 思考 CSS 架構(gòu)

    摘要：思考一個好的架構(gòu)一個好的架構(gòu)是具有良好的可擴展性。定義手風琴的展開或收起，鏈接的有效或無效，元素的隱藏或顯示。的命名規(guī)范命名組件的方式是非常流行特別有幫助的規(guī)范。目前該領域最豐富的思想領袖之一。 你有沒有在一個逐漸膨脹的 CSS 項目中感到混亂呢？保持樣式風格統(tǒng)一和 HTML 的影響是比較困難的：盡管修改一個較小的問題，都可能創(chuàng)建更多丑陋的 hack，也可能 CSS 的小改變會影響 J...

    yvonne 評論0 收藏0

發(fā)表評論

0條評論

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