iT邦幫忙

DAY 42
2

Sass3.3 & CSS設計模式系列 第 43

Sass教學 (42) - SMACSS - 結構規劃與其它補充

以下文章同步於Github

Minimizing the Depth(最小化深度)
有的時候我們設計模組時常會因為需求變動而新增元素,
一個區塊內可能就會新增一些元素,像是li、p、h2等等, 就會寫這樣的程式碼:

.pod{
    border: 1px solid #333;
}
.pod > ul {
    color: blue
    margin-bottom: 5px;
}
.pod > li {
    background: #000
    margin-bottom: 5px;
}
.pod > h3 {
    margin-bottom: 5px
}

你可以看到上面在.pod的子元素margin-bottom都是相同的,
所以就可以改寫成這樣:

.pod{
    border: 1px solid #333;
}
//程式碼合併
.pod > ul,.pod >li,.pod > h3{
    margin-bottom: 5px;
}
.pod > ul {
    color: blue
}
.pod > li {
    background: #000
}

這樣子程式碼確實簡短許多,
但會有一個潛在問題是又有許多元素新增進來時,
class命名也會變得臃腫:

.pod > ul,.pod >li,.pod > h3,.pod > div,.pod > span,.pod > em,.pod > nav{
    margin-bottom: 5px;
}

SMACSS建議你可以這樣子寫:

//CSS程式碼
.pod{
    border: 1px solid #333;
}
.pod-body {
    margin-bottom: 5px;
}
//HTML程式碼
<div class="pod">
    <h2 class="pod-body">標題</h2>
    <ul>
        <li></li>
        <li></li>
    </ul>
</div>

這樣的寫法是將功能給抽象命名出來,
有用到這個功能就直接在HTML TAG加上class,
這樣便能省掉不少CSS空間,樣式結構上也變得較為彈性。

HTML5 與 SMACSS
SMACSS不會因為你使用了HTML5 TAG導致排版上容易出問題,
因為SMACSS主要設計核心為:

  1. 提升CSS語意化並套用至HTML與內容中 2. 減少特定HTML結構
    HTML5新增了不少的HTML TAG(nav、article、nav),
    目的是為了讓網頁能夠更聚焦地描述內容,
    舉個例子來說一個網站有很多的li清單,
    但像是chrome、yahoo搜尋引擎不曉得你哪個清單才是最重要的內容, 所以這時就可以使用nav來進行告知動作:

依上面的code,假設.nav-primary是水平列選單,
.nav-secondary是垂直列選單,
你直覺上可能就會想要這樣子寫:

nav.nav-primary li { 
    display: inline-block; 
}

nav.nav-secondary li {
    display: block;
}

但上面這樣的寫法會把特定的HTML元素綁死,
今天如果因為商業策略上並不打算把那裡的選單區塊從nav改為div時,
這樣子你就必須HTML與CSS都必須改,
所以SMACSS建議這樣子寫:

.l-inline li { 
    display: inline-block;
}

.l-stacked li {
    display: block;
}

l是layout的前綴,
同樣也是使用抽象命名的觀念,
這樣寫就能靈活套用在各HTML TAG上。

從上面例子你可以看出SMACSS希望CSS能保持簡單,
避免選擇器變得過於複雜,且在HTML上是可以理解的。

最後總結兩個SMACSS結論:

  1. 提升網頁語意化
  2. 減少對HTML TAG的依賴(例:nav.nav-primary)

參考SMACSS設計Sass @import 結構
下面這個結構是SMACSS所推薦的:

@import
   "site-settings",
   "mixins",
   "base",
   "states",
   "layout/grid",
   "module/btn",
   "module/bookmarks",
   "module/callout";

site-setting的部份是基礎變數設定,
接續下來是mixins、base、states,
Grid的設定時常會建立在Layout上,
所以會有一個Grid的檔案統一管理,
再來Module就放你的獨立化的模組。

另外我們再看其中一種以SMACSS為基礎設計的結構

scss/
|- _base/
|  |- _config.scss
|  |- _presets.scss
|  |- _headings.scss
|  |- ...

|- _layouts/
|  |- _l-base.scss
|  |- _l-grid.scss

|- _modules/
|  |- _m-buttons.scss
|  |- _m-tabs.scss

|- _states/
|  |- _s-buttons.scss
|  |- _s-tabs.scss
|- application.scss

stylesheets/
|- application.css

與前者的差異性是檔案多了前綴,
在搜尋上變得更加容易,

SMACSS對於SASS初學者來說算是一個蠻不錯的學習門檻,
你可以先學SMACSS再來去試著納入其他設計模式,
並努力朝著讓自己HTML、CSS越來越乾淨維護為出發點一起努力嘍!


上一篇
Sass教學 (41) - Sass開發經驗分享
下一篇
Sass教學(43) - Sass Style Guide(樣式指南) - Sass、Github、Codepen
系列文
Sass3.3 & CSS設計模式46

1 則留言

熊熊想起你
iT邦新手 4 級 ‧ 2014-10-28 16:28:12
【**此則訊息已被站方移除**】

我要留言

立即登入留言