SMACSS

Scalable & Modular Architecture for CSS

Scalable & Modular Architecture for CSS

將結構分類

Categorization

命名規則

Naming rules

CSS 與 HTML 分離

Decoupling CSS from HTML

1. Base

CSS Reset

CSS Normalize

在 Base 類別裡不應使用 !important

code:css

/* Base */

html {

}

body,

form {

padding: 0;

margin: 0;

}

a {

text-decoration: none;

}

h1,

h2,

h3 {

margin: 1em 0;

}

2. Layout

Header

Sidebar

Content

code:css

/* Layout */

# header {

width: 960px;

margin: 0 auto;

}

.l-article {

...;

}

.l-grid {

...;

}

.l-grid > li {

...;

}

3. Module

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

定義 Module 時，應避免使用 id 或標記名稱做選擇器

code:html

<div class="fld">

<span>Folder Name</span>

<span> ( 32 items ) </span>

</div>

<div class="fld">

<span class="fld-name">Folder Name</span>

<span class="fld-items"> ( 32 items ) </span>

</div>

<style>

/* The Folder Module */

.fld > span {

padding-left: 20px;

background: url (icon.png);

}

</style>

4. State

與 Layout, Module 搭配

表示 Layout 或 Module 的狀態變化

由 class 定義

code:css

/* State */

.is-hidden {

display: none;

}

.is-error {

font-weight: 700;

}

.is-tab-active {

border-bottom-color: transparent;

}

5. Theme

定義網站主視覺

類似 Layout，但影響網站整體視覺的變化