模塊組織

任何超過(guò) 1000 行的 CSS 代碼，你都曾經(jīng)歷過(guò)這樣的體驗(yàn)：

1. 這個(gè) class 到底是什么意思呢？
2. 這個(gè) class 在哪里被使用呢？
3. 如果我創(chuàng)建一個(gè) xxoo class，會(huì)造成沖突嗎？

Reasonable System for CSS Stylesheet Structure 的目標(biāo)就是解決以上問(wèn)題，它不是一個(gè)框架，而是通過(guò)規(guī)范，讓你構(gòu)建更健壯和可維護(hù)的 CSS 代碼。

Components（組件）

從 Components 的角度思考，將網(wǎng)站的模塊都作為一個(gè)獨(dú)立的 Components。

Naming components （組件命名）

Components 最少以兩個(gè)單詞命名，通過(guò) - 分離，例如：

• 點(diǎn)贊按鈕 (.like-button)
• 搜索框 (.search-form)
• 文章卡片 (.article-card)

Elements （元素）

Elements 是 Components 中的元素

Naming elements （元素命名）

Elements 的類名應(yīng)盡可能僅有一個(gè)單詞。

 .search-form {
    > .field { /* ... */ }
    > .action { /* ... */ }
  }

On multiple words （多個(gè)單詞）

對(duì)于倘若需要兩個(gè)或以上單詞表達(dá)的 Elements 類名，不應(yīng)使用中劃線和下劃線連接，應(yīng)直接連接。

  .profile-box {
    > .firstname { /* ... */ }
    > .lastname { /* ... */ }
    > .avatar { /* ... */ }
  }

Avoid tag selectors （避免標(biāo)簽選擇器）

任何時(shí)候盡可能使用 classnames。標(biāo)簽選擇器在使用上沒(méi)有問(wèn)題，但是其性能上稍弱，并且表意不明確。

  .article-card {
    > h3    { /* ? avoid */ }
    > .name { /* ? better */ }
  }

Variants （變體）

Components 和 Elements 可能都會(huì)擁有 Variants。

Naming variants （變體命名）

Variants 的 classname 應(yīng)帶有前綴中劃線 -

  .like-button {
    &.-wide { /* ... */ }
    &.-short { /* ... */ }
    &.-disabled { /* ... */ }
  }

Element variants （元素變體）

  .shopping-card {
    > .title { /* ... */ }
    > .title.-small { /* ... */ }
  }

Dash prefixes （中劃線前綴）

為什么使用中劃線作為變體的前綴？

• 它可以避免歧義與 Elements
• CSS class 僅能以單詞和 _ 或 - 開(kāi)頭
• 中劃線比下劃線更容易輸出

Layout （布局）

Avoid positioning properties （避免定位屬性）

Components 應(yīng)該在不同的上下文中都可以復(fù)用，所以應(yīng)避免設(shè)置以下屬性：

• Positioning (position, top, left, right, bottom)
• Floats (float, clear)
• Margins (margin)
• Dimensions (width, height) *

Fixed dimensions （固定尺寸）

頭像和 logos 這些元素應(yīng)該設(shè)置固定尺寸（寬度，高度...）。

Define positioning in parents （在父元素中設(shè)置定位）

倘若你需要為組件設(shè)置定位，應(yīng)將在組件的上下文（父元素）中進(jìn)行處理，比如以下例子中，將 widths和 floats 應(yīng)用在 list component(.article-list) 當(dāng)中，而不是 component(.article-card) 自身。

  .article-list {
    & {
      @include clearfix;
    }

    > .article-card {
      width: 33.3%;
      float: left;
    }
  }

  .article-card {
    & { /* ... */ }
    > .image { /* ... */ }
    > .title { /* ... */ }
    > .category { /* ... */ }
  }

Avoid over-nesting （避免過(guò)分嵌套）

當(dāng)出現(xiàn)多個(gè)嵌套的時(shí)候容易失去控制，應(yīng)保持不超過(guò)一個(gè)嵌套。

  /* ? Avoid: 3 levels of nesting */
  .image-frame {
    > .description {
      /* ... */

      > .icon {
        /* ... */
      }
    }
  }

  /* ? Better: 2 levels */
  .image-frame {
    > .description { /* ... */ }
    > .description > .icon { /* ... */ }
  }

Apprehensions （顧慮）

• 中劃線-是一坨糟糕的玩意：其實(shí)你可以選擇性的使用，只要將 Components, Elements, Variants記在心上即可。
• 我有時(shí)候想不出兩個(gè)單詞唉：有些組件的確使用一個(gè)單詞就能表意，比如 aleter 。但其實(shí)你可以使用后綴，使其意識(shí)更加明確。

比如塊級(jí)元素：

• .aleter-box
• .aleter-card
• .aleter-block

或行內(nèi)級(jí)元素

• .link-button
• .link-span

Terminologies （術(shù)語(yǔ)）

RSCSS 與其他 CSS 模塊組織系統(tǒng)相似的概念

Summary （總結(jié)）

• 以 Components 的角度思考，以兩個(gè)單詞命名（.screenshot-image）
• Components 中的 Elements，以一個(gè)單詞命名（.blog-post .title）
• Variants，以中劃線-作為前綴（.shop-banner.-with-icon）
• Components 可以互相嵌套

• 記住，你可以通過(guò)繼承讓事情變得更簡(jiǎn)單

譯自:Reasonable System for CSS Stylesheet Structure