可參考以下：

1
2
3
4
5
6
7
8
9

#header, #article, #footer {
  width: 960px;
  margin: auto;
}

#article {
  border: solid #CCC;
  border-width: 1px 0 0;
}

有違於其他 SMACSS 中的規則，在 Layout 規則中的主要佈局樣式是可以使用 id 將其宣告的，當然這僅限於畫面中不重複的對象，通常為 HTML5 帶有語意化的那些標籤，如果你想要在特定情況更改其佈局樣式，可以與次要佈局樣式搭配做使用，如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#article {
  float: left;
}

#sidebar {
  float: right;
}

.l-flipped #article {
  float: right;
}

.l-flipped #sidebar {
  float: left;
}

藉由 CSS 疊層的特性，可讓對象應用到更高層的佈局樣式，用以覆蓋其預設樣式，這邊要注意，所謂的主要佈局樣式以及次要佈局樣式就只是名稱上的定義，請不要把思維限制在只能使用主要佈局樣式，也就是通通使用 id 選擇器撰寫其佈局樣式，大部分情況次要佈局樣式要來的比主要佈局樣式有用太多了，你可以參考接下來的這個範例：

1




    

2
3
4
5
6
7
8

<div id="featured">
  <h2>Featured</h2>
  <ul>
    <li><a href="…">…</a></li>
    <li><a href="…">…</a></li>
    …
  </ul>
</div>

如果不考慮 SMACSS 中的次要佈局樣式寫法，我們可能會傾向於在 featured 周圍的 div 添加 id，然後從那裡進行樣式設置：

1
2
3
4
5
6
7
8
9
10
11

div#featured ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

div#featured li {
  float: left;
  height: 100px;
  margin-left: 10px;
}

這樣撰寫等同於把對象給完全綁死了，這邊指 #featured 只能套用在 div 標籤上，且由於使用了 id 選擇器，代表同個頁面中只能存在單個套用對象，是不是有點熟悉？這不就是當時 OOCSS 在解決的問題嗎？在 SMACSS 我們可以使用次要佈局樣式改善這個問題：

1
2
3
4
5
6
7
8
9
10

.l-grid {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.l-grid > li {
  display: inline-block;
  margin: 0 0 10px 10px;
}

其實 SMACSS 中的次要佈局樣式道理就如同 OOCSS 的容器與內容分離，目的都是將其依賴性降到最低，從上面範例來看， l-grid 目前已可應用於任何容器以創建浮動樣式的佈局了，同時我們也將選擇器修改為 > 子對象選擇器避免有例外的樣式套用到對象，還有將高度給拿掉讓對象能夠自適應，關於次要佈局樣式的實作，你就把它當成在 OOCSS 的基礎下加上其命名限制中的 -l 前綴就可以了。

可參考以下：

1
2
3
4

<div class="card">
  <div>Card Header</div>
  <div>Card Footer</div>
</div>

如果遇到以上情境，我們通常會選擇偷懶的方式撰寫樣式：

1
2
3

.card > span {
  padding-left: 20px;
}

這樣的問題在於 .card 底下第一層 div 都被綁死了，如果我們今天要針對不同 div 撰寫效果，勢必要做些調整，在 SMACSS 中的 Module 建議通通使用 class 選擇器撰寫樣式：

1
2
3
4
5
6
7

.card-header {
  padding-left: 20px;
}

.card-footer {
  padding-left: 20px;
}

這樣子的做法解決了 div 被綁死的情況，同時也增加了不少可讀性，作者有強調盡量不要使用 div 、 span 這種大眾化的元素選擇器，使用 class 選擇器強調語意化及可重用性才是正解，繼續來看下個範例：

1
2
3
4
5
6
7
8
9

.pod {
  width: 100%;
}
.pod input[type='text'] {
  width: 50%;
}
#sidebar .pod input[type='text'] {
  width: 100%;
}

前面我們有提到，基於 Module 的對象應能夠在網頁中的任一位置使用，這時我們撰寫出的樣式可能就會長的像上面這個樣子，若專案越來越複雜，可能會不小心忽略 CSS 的優先權，進而產生樣式互蓋導致跑版的問題，SMACSS 建議更改為下：

1
2
3
4
5
6
7
8
9
10
11

.pod {
  width: 100%;
}

.pod input[type='text'] {
  width: 50%;
}

.pod-constrained input[type='text'] {
  width: 100%;
}

接著在指定對象添加模組與子模組的 class 名稱：

1

<div class="pod pod-constrained">...</div>

其實他的概念就如同 OOCSS 中的結構與樣式分離，只不過在這稱其為子類化 (Subclassing)，透過將基底樣式抽離出來，往後在不同區域使用模組時，只需添加模組名稱與子類化模組名稱即可達到效果

可參考以下：

1
2
3
4
5
6
7
8
9
10
11

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link is-active" href="#">Link</a>
  </li>
  <li class="nav-item"




    
>
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link is-disabled" href="#">Link</a>
  </li>
</ul>

與前面介紹的子模組樣式不同的地方在於狀態樣式不需繼承於任何對象，他就只是單純的將樣式應用於對象，你可以參考 Bootstrap 中的 .active 或 .disabled 樣式，概念就如同上面的 is-active 與 is-disabled ，為了保證狀態樣式作用於指定對象，在 State 中是允許使用 @important 的。

可參考以下：

1
2
3
4
5
6
7
8
9

// all.css
.mod {
  border: 1px solid;
}

// themeA.css
.mod {
  border-color: blue;
}

這邊要注意，你不需要以獨立的 class 去添加主題樣式，在 Theme 的規則中是建議使用與原先 Layout 或 Module 同樣的樣式名稱，而 themeA.css 這隻檔案務必得在 all.css 之後才載入，這樣就可達到覆蓋樣式的目的，如果網站有很多的主題樣式，也只需要新增像是 themeB.css 的檔案並撰寫如下：

1
2
3

.mod {
  border-color: red;
}

之後改載入 all.css 與 themeB.css 檔案，這樣就能達到更改不同主題顏色的目的。

1
2
3

$('.btn-close').click(function () {
  $(this).parents('.dialog').addClass('is-hidden');
});

這應該蠻好理解的，這邊運用了 State 所定義的樣式來更改父層對象狀態，你可能會想，我是否可以透過 Module 所定義的子類別模組來更改對象狀態呢？如下所示：

1
2
3

$('.btn-close').click(function () {
  $(this).parents('.dialog').addClass('dialog-hidden');
});

除了直接以 class 來操作對象狀態外，也可以利用 data-* 屬性來完成同樣目的，以下範例：

1
2
3
4
5
6
7
8
9
10

.btn[data-state='default'] {
  color: #333;
}
.btn[data-state='pressed'] {
  color: #000;
}
.btn[data-state='disabled'] {
  opacity: 0.5;
  pointer-events: none;
}

1

<button class="btn" data-state="disabled">Disabled</button>

data-* 屬性是 HTML5 新增的語法，我們通常使用它來塞入一些抽象的 Primary Key，在資料庫操作時特別好用，同樣道理，我們也可塞入屬性的關鍵字，你可以參考上面範例，接著使用 JavaScript 將其更改以切換對象狀態：

1
2
3

$('.btn').bind('click', function () {
  $(this).attr('data-state', 'pressed');
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.nav > li {
  float: left;
}

@media screen and (max-width: 400px) {
  .nav > li {
    float: none;
  }
}

.sidebar {
  float: right;
  width: 25%;
}

@media screen and (max-width: 400px) {
  .sidebar {
    float: none;
    width: auto;
  }
}




    

以往我們會習慣把 @media 放在所有程式碼的最下方統一做管理，但在 SMACSS 的建議中，反而是希望把 @media 放在相關的程式碼下方，就像上面範例這樣，當然你可能會想，這樣不是會造成 @media 語句重複被撰寫嗎？比起程式碼大小，網頁中載入的靜態資源，比如圖片，這些才是真正會影響性能的關鍵，不然你看怎麼一般人都喜歡使用 @mixin 搭配 @content 來撰寫 RWD 內容？