簡述BEM, OOCSS，AMCSS，SMACSS，SUITCSS，ITCSS

本文介紹的如下幾種都是對CSS模塊化的各類實現，你可能工做中使用不到，甚至部分有些被淘汰。可是但願你看到這些詞的時候不會一臉懵逼！！！

BEM

本人的上篇文章有詳細的介紹：2020年你還沒用BEM？
這裏再也不贅述

OOCSS

Object Oriented CSS 面向對象的CSS
OOCSS主要提倡兩種規範

• 結構和樣式分開（定義一個元素的時候，將自己的結構和對元素外觀的樣式分開，加強css的複用性）

<div class="header bg"></div>
.header{
  width: 500px;
  height: 100px;
}
.bg{
  background: #f00;
}
複製代碼

• 容器和內容分開（最好不要直接使用標籤名定義樣式，減小對html的依賴）

<div class="container">
  <h2 class="list"></h2>
  <h2 class="list"></h2>
  <h2 class="list"></h2>
</div>

// 錯誤定義
.container h2{ ... }
// 正肯定義
.list{ ... }
複製代碼

AMCSS

Attribute Modules for CSS CSS的屬性模塊
AM是一種使用HTML 屬性及其值而非樣式元素的類的技術。這樣，每一個屬性均可以有效地聲明一個單獨的命名空間來封裝樣式信息，從而使HTML和CSS更具可讀性和可維護性。

簡單來講就是經過css屬性選擇器來模塊化CSS

優點：
屬性值得靈活性，至關於經過屬性值來增長命名空間，減小全局名稱空間，以便更好的將css模塊化

<div am-blockName>
    <div am-blockname-chilElement></div>
    <p am-tritName="one two">hello</p>
  </div>
複製代碼

[am-blockName] {
    width: 500px;
  }

  [am-blockname-chilElement] {
    height: 50px;
  }

  [am-tritName~="one"] {
    font-size: 30px;
  }
複製代碼

SMACSS

Scalable and Modular Architecture for CSS 可擴展和模塊化的css架構
SMACSS主要是介紹遵循SMACSS的基本規則和命名規則，按照SMACSS的規則，書寫規範的CSS

五種類別

• Base
• Layout
• Module
• State
• Theme

使用類別主要是將重複的操做簡化，減小代碼量，簡化維護，並提升用戶體驗的一致性

1. 基本規則（Base）

• css重置，設置css重置樣式表

2. 佈局規則（Layout）

• 將頁面分爲主要部分和次要部分，主要部分位於主要部分之間，所以佈局樣式分爲主要樣式和次要樣式
• 主要部分使用id選擇器，含有佈局樣式的話能夠這麼寫（.l-fixed #header）

3. 模塊規則（Module）

• 模塊是頁面中更離散的組件，能夠是導航欄、對話框等等，模塊位於lauout組件或其餘組件內部
• 每一個模塊都應設計爲做爲獨立組件存在。這樣，頁面將更加靈活。若是操做正確，則能夠輕鬆地將模塊移動到佈局的不一樣部分，而不會中斷。
• 請避免使用ID和元素選擇器，而僅使用類名

4. 狀態規則（State）

• 狀態是增長和覆蓋全部其餘樣式，例如打開關閉、正確和錯誤
• 可使用!important
• 例如：is-、has-

5. 主題規則（Theme）

• 主題定義了顏色和圖像，使您的應用程序或站點具備外觀。將主題分紅本身的樣式集，能夠輕鬆地爲其餘主題從新定義這些樣式。

SUITCSS

SUIT CSS是一種專一於爲基於組件的開發改善CSS創做體驗的方法
基於組件的系統容許將鬆散耦合的獨立單元實現和組合爲定義明確的複合對象。組件已封裝，但可以經過接口/事件進行互操做

命名約定：

工具 class
語法：u-[sm-|md-|lg-] utilityName使用駝峯式命名

<div class="u-cf">
  <a class="u-floatLeft" href="{{url}}">
    <img class="u-block" src="{{src}}" alt="">
  </a>
  <p class="u-sizeFill u-textBreak">
    …
  </p>
</div>
複製代碼

組件 （負責組件特定樣式的css）
語法：[-][-descendentName][--modifierName]

• namespace(命名空間 可選）

.twt-Button { / * … * / }
.twt-Tabs { / * … * / }
複製代碼

• ComponentName（組件名稱） 使用駝峯式寫法

<article class="MyComponent"></article>
複製代碼

• descendentName（組件子節點名稱） 使用駝峯式寫法

<article class="Tweet">
  <div class="Tweet-bodyText"></div>
</article>
複製代碼

• modifierName（修飾符名稱） 用於描述組件修飾符，使用駝峯式寫法

<button class="Button Button--default"></button>
複製代碼

變量
語法：--ComponentName[-descendant|--modifier][-onState]-(cssProperty|variableName)

:root {
   ---ComponentName-backgroundColor 
  --ComponentName-descendant-backgroundColor 
  --ComponentName--modifier-backgroundColor 
  --ComponentName-onHover-backgroundColor 
  --ComponentName-descendant-onHover-backgroundColor 
}
複製代碼

這裏只是簡單介紹，如需深刻了解能夠自行查看官網

ITCSS

nverted Triangle CSS 倒三角CSS
可擴展和可維護的CSS架構

ITCSS的主要原則之一是將CSS代碼庫分爲幾個部分（稱爲layer），這些部分採用倒三角形的形式：

• Settings –與預處理器一塊兒使用，幷包含字體，顏色定義等。
• Tools–全局使用的mixin和功能。重要的是不要在前2層中輸出任何CSS。
• Generic –重置或規範化樣式，框大小定義等。這是生成實際CSS的第一層。
• Elements –HTML元素（例如H1，A等）的樣式。這些帶有瀏覽器的默認樣式，所以咱們能夠在此處從新定義它們
• Objects –定義未裝飾設計模式的基於類的選擇器，例如OOCSS已知的媒體對象
• Components –特定的UI組件。這是咱們大部分工做的地方，咱們的UI組件一般由對象和組件組成
• Utilities –工具程序類可以覆蓋三角形中以前發生的樣式
• 這裏只是簡單介紹，如需深刻了解能夠自行查看官網

到此爲止，以上就是介紹的所有內容，若有不正確之處。還望在評論中指出，謝謝

關注我：前端Jsoning