OOCSS (Object-oriented CSS)

Bootstrap的作法

.mt-1 {
  margin-top: 1rem;
}

.mt-2 {
  margin-top: 1.5rem;
}

.text-blue {
  color: #00f;
}

.text-shadow {
  box-shadow: 2px 2px 5px black;
}

規劃、做好OOCSS，達到不需要再碰CSS，參考設計者的文件添加class，就能做出有style的網頁。 顯而易見的缺點是會很呆板，所以即使使用Bootstrap、Semantic UI之類的工具，稍微寫點個性化CSS是個不錯的選擇。 當然如果只是想快速做個樣式，到他們的官網copy範例改一改就好。

SMACSS (Scalable and Modular Architecture for CSS)

  • 基本結構

  1. Base 放 Reset CSS 和 一開始設計網頁時規定好的基礎樣式設定(字體設定、連結hover設定…)

  2. Layout 放出現頻率很高的區塊的CSS，如Header、Footer，還有一些常用區塊，如簡單呈現會員資料(頭像+名字+會員等級…)

  3. Module 寫好模組階層，建議用class，方便平行使用。

<div class="fly">
  <span class="fly-name">Name</span> 
  <span class="fly-age">25 years old</span>
</div>

<article class="fly">
  <p class="fly-name">Name</p> 
  <p class="fly-age">25 years old</p>
</article>

<style>
.fly{...}
.fly .fly-name{}
.fly .fly-age{}
</style>

  1. State 顧名思義的狀態，應用在Layout與Module，如.is-disabled、.is-active，可用JavaScript來操作狀態，比較不共用的部分也可以直接寫在Module裡。

  2. Theme 區別出主題，常用在切換多國語言樣式、網站主題風格，如

/* Layout CSS -> _layout.scss */
#comment {
  border: 1px solid;
}

/* 樣式CSS -> theme-default.scss */
#comment {
    border-color: black;
}

BEM (Block Element Modifier)

用規定的命名方式，一眼看出這個CSS在做什麼

.block{} /* 區塊 (Block) */
.block__element{} /* 元素 (Element) */
.block--modifier{} /* 修飾符（Modifier） */

網站分很多區塊，以導覽列(nav)為例，nav是一個區塊(.nav{})，裡面的清單是元素(.nav__list{})，滑鼠放在元素上時的表現(.nav–focus{})。

MVCSS

連結裡有翻譯過的說明，簡單說，它融合了前三種設計模式、參考了幾種CSS framework，需要比較多時間熟悉。

其他想說的話

細節直接去官網看吧，這裡只是大略介紹。

不管怎麼說，這些只是設計模式、風格，不是規定，所以不是必須要用，但是你也看到了，照著一定程度的規範寫，可讀性比較高，以防三個月後回頭看自己寫的都看不懂。

命名可以語意話一點(#about)，不要隨便取(#aaa)。

建議以功能命名(.primary-border)，而不是視覺效果命名(.blue-border)。

除非必要，不要把CSS Selector寫得太死(nav ul li.first span)，這樣只要HTML結構稍微有點不一樣就會失效，簡單的寫個大方向就好(nav .first)。