Sass基礎學習No.10-SMACSS、OOCSS及BEM做好前置作業免麻煩

發表於 更新於 分類於 ，

SMACSS設計模式

SMACSS官網

SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process.

SMACSS有3條原則:

  • Categorizing CSS Rules(為css分類) 。
  • Naming Rules(命名規則) 。
  • Minimizing the Depth of Applicability(最小化適配深度)。

並以下列五種分類作為區分：Base、Layout、Module、State、Theme。

Base

Base styles include setting heading sizes, default link styles, default font styles, and body backgrounds. There should be no need to use !important in a Base style.

就是網站的全域設定，可以將CSS Reset放在裡面，當然也可以分開放。

可以參考Pure CSS的Base設計。

Layout

Some sites may have a need for a more generalized layout framework.

在製作多頁網頁時，常常會出現首頁、購物車、登入頁等等的表頭表尾或其他地方完全是一模一樣的，這時候就是將這些相同的的頁面樣式放在同一個Sass裡(如_layout.sass)，而其他不同的部分再去建新的不同的Sass檔放這些不一樣的部分的樣式，像是_index.sass、_cart.sass之類的。

Module

Each Module should be designed to exist as a standalone component. In doing so, the page will be more flexible. If done right, Modules can easily be moved to different parts of the layout without breaking.When defining the rule set for a module, avoid using IDs and element selectors, sticking only to class names

頁面上可以單獨存在並且可以重複使用的元件。

這些元件應該避免使用ID名稱或元素名稱，建議子模組以原模組加上dash(-)作為名稱，如.media為原模組(元件的基本樣式)，.media-body 為子模組作為 .media 的內容基本樣式。

寫法可以參考Bootstrap的元件。

State

A state is something that augments and overrides all other styles. For example, an accordion section may be in a collapsed or expanded state. A message may be in a success or error state.States are generally applied to the same element as a layout rule or applied to the same element as a base module class.

表示layout或module的狀態，以class命名並以is-作為開頭，像是按鈕可以分為當前按鈕跟不可用，就是以.is-active 或 .is-disabled 表示，有些導覽會以分頁(Tab)的形式呈現，也可以.is-tab-active 或 .is-tab-disabled表示狀態。

Theme

感覺跟Layout很類似，所以就不介紹了。詳細解釋可以參考Theme Rules。

OOCSS設計模式

OOCSS(Object Oriented CSS)兩大原則：

  • Separate structure and skin(分離結構和主題)：將元素的基本結構跟其他樣式分離，如 .btn為基本結構、.btn-danger為按鈕的顏色樣式而.btn-sm為按鈕的大小樣式，這樣一來這些樣式變成可以自己選擇是否要添加。
  • Separate container and content(分離容器和內容)：將網頁基本架構跟元件做拆分，元件就是可以隨時搬出來使用，而不論位處在哪個區塊，像是格線系統、導覽之類的，可以在網頁任何地方使用。

詳細可以參考Bootstrap的寫法。

Kuro Hsu漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例或深入解讀CSS的OOCSS和SMACSS以及BEM對於設計模式的解釋有更詳細的介紹

BEM設計模式

之前就有寫過BEM的介紹了，所以這次就偷懶把之前寫的放上來了。

Michelle的了解一下BEM是什麼?