亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

CSS的組件化方案：OOCSS + BEM

kgbook / 2414人閱讀

摘要：由于缺少命名空間，所有的都是全局的，所以大團(tuán)隊(duì)項(xiàng)目如果沒(méi)有良好的命名規(guī)范，會(huì)容易失控。所以盡量避免標(biāo)簽定義樣式。全稱相對(duì)于前種方案，命名比較冗長(zhǎng)，但這正是保證類(lèi)名不會(huì)重復(fù)的途徑，是的核心思想。

CSS由于缺少命名空間，所有的class都是全局的，所以大團(tuán)隊(duì)項(xiàng)目如果沒(méi)有良好的命名規(guī)范，會(huì)容易失控。

舉例實(shí)現(xiàn)以下效果：

通過(guò) class + tag 
  .pageButtons {
            display: flex;
            justify-content: center;
        }

        .pageButtons button{
            width: 80px;
            height: 30px;
            margin: 5px;
            border-radius: 4px;
            border: none;
            font-size:13px;
            cursor: pointer;
            outline: none;
        }

        .primary-button {
            color: white;
            background-color: rgba(200,0,0,.9);
            transition: background-color 1s,font-weight 1s;
        }

        .primary-button:hover {
            font-weight: 700;
            background-color: rgba(255,0,0,1);
        }

想象下，把此頁(yè)面（或者做成組件）嵌入到另外一個(gè)頁(yè)面，而它也以button 標(biāo)簽定義了button的樣式，會(huì)造成非我們期望的button樣式。所以盡量避免標(biāo)簽定義樣式。還有一個(gè)問(wèn)題是，.primary-button看似是一個(gè)普通的類(lèi)，也有可能在別的地方定義，所以維護(hù)會(huì)比較困難。

通過(guò) OOCSS + BEM實(shí)現(xiàn)

OOCSS就是通過(guò)選擇符重用CSS類(lèi)。BEM全稱Block-name__element--modifier.

        .pageButtons {
            display: flex;
            justify-content: center;
        }

        .pageButtons__prev,
        .pageButtons__next,
        .pageButtons__next--primary {
            width: 80px;
            height: 30px;
            margin: 5px;
            border-radius: 4px;
            border: none;
            font-size:13px;
            cursor: pointer;
            outline: none;
        }

        .pageButtons__next--primary {
            color: white;
            background-color: rgba(200,0,0,.9);
            transition: background-color 1s,font-weight 1s;
        }

        .pageButtons__next--primary:hover {
            font-weight: 700;
            background-color: rgba(255,0,0,1);
        }

相對(duì)于前種方案，BEM命名比較冗長(zhǎng)，但這正是保證CSS類(lèi)名不會(huì)重復(fù)的途徑，是BEM的核心思想。

通過(guò)OOSCSS

如果用SASS寫(xiě)：

%button {
  width: 80px;
  height: 30px;
  margin: 5px;
  border-radius: 4px;
  border: none;
  font-size:13px;
  cursor: pointer;
  outline: none;
}

%primaryState {
  color: white;
  background-color: rgba(200,0,0,.9);
  transition: background-color 1s,font-weight 1s;
}

%hoverState {
  font-weight: 700;
  background-color: rgba(255,0,0,1);
}

.pageButtons {
  display: flex;
  justify-content: center;

  &__prev,
  &__next,
  &__next--primary {
    @extend %button;
  }

  &__next--primary {
    @extend %primaryState;
  }

  &__next--primary:hover {
    @extend %hoverState;
  }
}

這里稍提下%placeHolder 和 @mixin，如果不用傳人參數(shù)，用%placeHoder,這樣可以以選擇符重用類(lèi)，相對(duì)于@mixin復(fù)制代碼，減少了代碼體積。

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

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

相關(guān)文章

  • CSS的組件化方案：OOCSS + BEM

    摘要：由于缺少命名空間，所有的都是全局的，所以大團(tuán)隊(duì)項(xiàng)目如果沒(méi)有良好的命名規(guī)范，會(huì)容易失控。所以盡量避免標(biāo)簽定義樣式。全稱相對(duì)于前種方案，命名比較冗長(zhǎng)，但這正是保證類(lèi)名不會(huì)重復(fù)的途徑，是的核心思想。 CSS由于缺少命名空間，所有的class都是全局的，所以大團(tuán)隊(duì)項(xiàng)目如果沒(méi)有良好的命名規(guī)范，會(huì)容易失控。 舉例實(shí)現(xiàn)以下效果：showImg(https://segmentfault.com/img...

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

  • CSS方法論（一）

    摘要：由于年提出，這基于她在雅虎的工作。但是這很難做到解決的問(wèn)題樣式全局性造成的樣式?jīng)_突問(wèn)題多人協(xié)作的命名問(wèn)題解決層疊問(wèn)題，使的優(yōu)先級(jí)保持相對(duì)扁平的模塊化，使更具有復(fù)用的能力于年由提出，當(dāng)時(shí)他在雅虎工作。 編寫(xiě)CSS會(huì)遇到什么問(wèn)題？ 其實(shí)CSS很好寫(xiě)，只要知道css語(yǔ)法，你就可以寫(xiě)出來(lái)，通過(guò)各種學(xué)習(xí)，你也可以做出一個(gè)很美麗的頁(yè)面。對(duì)能熟練編寫(xiě)網(wǎng)頁(yè)的人來(lái)說(shuō)，可以很簡(jiǎn)單的將設(shè)計(jì)圖變成網(wǎng)頁(yè)。但是在...

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

  • [譯]聊一聊CSS方法論

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

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

  • [譯]聊一聊CSS方法論

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

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

  • 用更合理的方式寫(xiě) CSS

    摘要：和出于以下原因，我們鼓勵(lì)使用和的某種組合可以幫助我們理清和之間清晰且嚴(yán)謹(jǐn)?shù)年P(guān)系?？梢詭椭覀儎?chuàng)建出可擴(kuò)展的樣式表。參考資料的的，也就是，是一種用于和類(lèi)名的命名約定。 OOCSS 和 BEM 出于以下原因，我們鼓勵(lì)使用 OOCSS 和 BEM 的某種組合： 可以幫助我們理清 CSS 和 HTML 之間清晰且嚴(yán)謹(jǐn)?shù)年P(guān)系。 可以幫助我們創(chuàng)建出可重用、易裝配的組件。 可以減少嵌套，降低特定性...

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

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

0條評(píng)論

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