一直以來本人較偏好的 CSS 命名都是依照 rscss 的原則，可是即便如此，還是常常會遇到難以命名的問題，這篇試著把問題梳理，並提出一些可能的解法。

rscss

先簡單介紹一下 rscss 的命名原則，在 rscss 我們把網頁拆各部位解成一塊塊的元件（component），例如 header 元件，而元件可以再容納子元件，例如 header 元件內有 brand、navigation、search 三個子元件，它們也可以有各自的子元件，一直到最後的小單位稱為元素（element），像是導覽區內的單一的連結，或是搜尋區的文字框等等，但 rscss 的元素並非一定相當於 HTML 的 tag，例如前面的導覽區的一個連結，在 rscss 的概念是元素，但在 HTML 結構上它可能是數個 tag 組合起來的：

<a><i></i>link text</a>

總而言之 rscss 或其它的 CSS 命名原則，大多是以頁面的結構邏輯來解構與命名，而非以 HTML 碼結構來命名。

當然 rscss 很棒，但它只是原則性的指南，現實上有些狀況需要自行排除，下面談現實上會遇到某些難以命名的情況。

這塊怎麼取名？container 還是 wrapper 還是 block 還是其它？

對於組件，rscss 的命名原則是兩個單字，中間以連字號串連，例如 .left-sidebar 或 .search-block；而對於元素，則只用一個單字命名，這樣的命名原則很直觀的區分了組件與元素結構上的層級，但若是父子皆為組件的情況，又會再次遇到命名的問題。舉例來說，對於元件，最常用的也就是那三個單字—container、wrapper、block，例如這樣的 HTML 結構：

<body>
  <main class="main-container">
    <section class="list-wrapper">
      <ul class="list-block">
       <li>xxx</li>
      </ul>
    </section>
  </main>
</body>

以上面的例子來說，如果走到第四層，就立馬會遇到「單字不夠用」的問題，下面提出一些個人的解法。

可能的解法

  1. 加入 section 之類的描述「區塊」的字，讓可巢狀的層級更多，不過這看起來不是個夠通用的解法。
  2. 對於功能型元件，強迫自己禁止使用 container、wrapper、block、section 之類的單字，而改用更具有描述性、語意性的字代替，譬如說 .navigation-list，而 container、wrapper、block、section 僅限用於排版型元件，或稱為容器型元件，就是只為了切版而存在的元件。

補充

  1. 關於描述「區塊」的單字們—container、wrapper、section、block，誰大誰小應該也是要在專案內被定義的，可參考別人家的文章：
    1. The Best Way to Implement a“Wrapper”in CSS
    2. CSS Language Speak: Container vs Wrapper?
  2. 別的流派的 CSS 命名原則有可能不會遇到前文描述的問題，不過過於畫蛇添足，非我所愛。把事情變複雜沒有比較厲害。

參考資料