CSS的組件化方案：OOCSS + BEM

kgbook 發布于2019-08-01 17:22 / 2375人閱讀

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

CSS由于缺少命名空間，所有的class都是全局的，所以大團隊項目如果沒有良好的命名規范，會容易失控。

舉例實現以下效果：

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

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

通過 OOCSS + BEM實現

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類名不會重復的途徑，是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，如果不用傳人參數，用%placeHoder,這樣可以以選擇符重用類，相對于@mixin復制代碼，減少了代碼體積。

GPU云服務器云服務器 OOCSS BEM linux的組件服務器的組件

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

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

CSS的組件化方案：OOCSS + BEM

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

GHOST_349178 2019-08-29 13:06 評論0 收藏0
CSS方法論（一）

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

haoguo 2019-08-29 17:01 評論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
用更合理的方式寫 CSS

摘要：和出于以下原因，我們鼓勵使用和的某種組合可以幫助我們理清和之間清晰且嚴謹的關系。可以幫助我們創建出可擴展的樣式表。參考資料的的，也就是，是一種用于和類名的命名約定。 OOCSS 和 BEM 出于以下原因，我們鼓勵使用 OOCSS 和 BEM 的某種組合：可以幫助我們理清 CSS 和 HTML 之間清晰且嚴謹的關系。可以幫助我們創建出可重用、易裝配的組件。可以減少嵌套，降低特定性...

CntChen 2019-08-30 15:52 評論0 收藏0