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

資訊專欄INFORMATION COLUMN

CSS的組件化方案：OOCSS + BEM

GHOST_349178 / 1370人閱讀

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

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

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

通過 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);
        }

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

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

OOCSS就是通過選擇符重用CSS類。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);
        }

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

通過OOSCSS

如果用SASS寫：

%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,這樣可以以選擇符重用類，相對于@mixin復(fù)制代碼，減少了代碼體積。

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

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

相關(guān)文章

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

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

    kgbook 評論0 收藏0

  • CSS方法論（一）

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

    haoguo 評論0 收藏0

  • [譯]聊一聊CSS方法論

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

    CoffeX 評論0 收藏0

  • [譯]聊一聊CSS方法論

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

    cfanr 評論0 收藏0

  • 用更合理的方式寫 CSS

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

    CntChen 評論0 收藏0

發(fā)表評論

0條評論

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