Bootstrap (以下用 BS 簡稱) 第四代版本從 2018 年 1 月發佈至今已經過了一年有餘，作為一個廣為流行的 UI 框架來說，從 BS3 到 BS4 做的改動其實相當大，包含底層的採用 SASS、 Flexbox 、styleshet 模組化，以及表層設計上更加彈性的 UI 元件、更明亮的主題色微調等等。
然而使用 BS4 之後最使我驚艷的部分其實不是上述的這些改動，而是新引入的 utilites class ，讓開發時的舒適度頓時提升了好幾個檔次，實在是居家旅行，殺人滅口，必備良藥。
吹捧了這麼多， utilities class 到底是什麼呢？
基本上 utilities class 包含了一些 functional CSS 和 atomic CSS 的概念，透過把常用的 style (margin, padding, text-align, flex… 等等)抽出來做成獨立的、單一職責的小 class ，這些小 class 通常非常非常小，可能只包含 1 條 css rule，透過組合這些小 class 來做到複雜的 style。
那麼到這裡就會有人提出一個問題：既然這些 class 只有一行，為什麼不用 inline style 就好了呢？
其實這也是 functional CSS 或 atomic CSS 常見的問題。我們可以從幾個面向來看：
- 效能： 用 css class 來寫 stylesheet rule 的渲染效能通常會比 inline-style 來得好，這可能牽涉到瀏覽器的實作。數據可以參考這個連結：https://jsperf.com/classes-vs-inline-styles/4
- 可複用性：將同樣的 style 寫成同一個 class ，就可以快速的通用在所有程式碼中。
- 一致性：同樣是微調 margin，有時候你可能會寫
margin: 4px，有時候可能會寫margin: .25rem，雖然畫面上看起來相同，但是卻不容易被當成一樣的程式碼。更糟的是這樣的 CSS 規則可能被寫在好多不同的 selector 裡，在重構時會造成巨大的困擾。 - 文件/展示分離：我們用 DOM 表示文件的架構，用 CSS 表示文件的樣式，CSS 與 DOM 透過 inline-style 耦合在一起通常不會是一個好主意。舉個例子來說，假設現在我們有個 CMS 系統想做到改變主題色的功能，若所有的 stylesheet 都使用 class selector 撰寫，並且正確的使用變數來儲存色碼，我們可以透過改變變數迅速而簡單的改變整體主題，而使用 inline style 就會變得很痛苦。
基於這些理由，雖然用 inline style 的彈性最好，但是我們通常不把它當作最佳考量，而 functional CSS/atomic CSS 的好處就是在保有的彈性的同時，亦可以統一管理 stylesheet 規則。
介紹完好處與為什麼我們應該使用這樣的設計方式之後，我們終於要進入正題：到底 BS4 引入哪些實用的 utilities class 呢？
首先我個人最愛用的是 m-class和 p-class 。m 和 p 分別是 margin 跟 padding 的縮寫，BS4 中可以使用如 {m|p}({side})(-{breakpoint})-{value} 這樣的命名規則的 class 來快速調整元素的 margin & padding，以下舉幾個簡單的例子：
m-5：元素四周的 margin 是 5級。pt-2：元素的上方(top)的 padding 是 2 級。mx-md-0：元素左右(x軸方向)的 margin 在 medium 以上的裝置是 0。
透過組合方向、breakpoint 和等級就可以簡單調出常用的間距，就不需要額外抽出去寫 stylesheet 了 💯 💯 ，從 1~5 級 BS4 預設是從 .25rem 到 3rem ，基本上足以應付大部分的狀況，可參考：https://getbootstrap.com/docs/4.0/utilities/spacing/
再來是 d-class， d 是 display 的縮寫，顧名思義是用來調整元素的 display 屬性， d-inline-block 代表 display: inline-block ， d-flex 代表 display: flex ，就是如此的簡單！而這些 class 也適用 breakpoint ，所以可以做到如 <div class='d-block d-lg-none'></div> 這樣，在 lg 以下的裝置不顯示的 div 。
然後是 text-class 跟 bg-class ， text-class 包含 alignment、font-weight、wrap 等等，例如 text-left ，代表 text-align: left 的縮寫， font-weight-bold 代表 font-weight: bold 的縮寫，一樣可以套用 breakpoint，更詳細的內容可以參考文件：https://getbootstrap.com/docs/4.0/utilities/text/
而 text 跟 bg 都可以套用主題色，因為一張圖勝過千言萬語，所以我直接天兩張文件的截圖，絕對不是因為我打到這邊已經懶得解釋 😝
說了這麼多，其實也有點難傳達這個 utilities class 的好用之處，不如我們直接看一段範例，了解 BS3 跟 BS4 的想法與寫法差異。
上圖這樣一個陽春的、兩個方塊的畫面，用 BS3 的想法寫可能需要寫：
// css file
.hello {
text-align: center;
background-color: var(--color-primary);
color: var(--color-white);
margin: 1.5rem;
padding: 2rem;
}
.world {
border: 2px solid var(--color-success);
background-color: var(--color-primary);
color: var(--color-success);
margin-top: 1.5rem;
}// document(HTML) file<div class="hello">Hello!</div>
<div> class-"world">World!</div>
用 BS4 utilities class 寫需要寫幾行 css 呢？
<div class="m-3 p-4 bg-primary text-white text-center">
Hello!
</div>
<div class=" mt-3 border border-success text-success text-center">
World!
</div>答案是： 0 行！Σ(*ﾟдﾟﾉ)ﾉ
當然，這樣一來 class 名稱會變得稍嫌冗長，對於不習慣的人可能需要一些陣痛期去適應，但是對於某些只需要改幾行 margin、padding 的元素來說，這些功能就變得相當實用，對於現代 scope CSS 盛行的框架來說，也不必為了區區一兩個元素的的一兩個 style 微調，就得新增一個 css 檔案，整體而言我認為是一個利大於弊的設計方式。
BS4 引進的包含 utilities class 的許多新觀念有效的解決了許多開發上會遇到的痛點，今天介紹的只是冰山一角。其實暸解這些設計上的理念之後，也可以自己實作一些專屬於自己專案的 helper class ，應該有效能減少很多重複、冗餘的程式碼，讓程式碼看起來更加清爽~
喜歡這篇文章的話歡迎左上角給我股個掌或分享喔~ ヽ(●´∀`●)ﾉ