好用的 Bootstrap 4 utilities class

框架来说，从 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 常见的问题。我们可以从几个面向来看

 

1.效能： 用 css class 来写 stylesheet rule 的渲染效能通常会比 inline-style 来得好，这可能牵涉到浏览器的实作。数据可以参考这个连结：https://jsperf.com/classes-vs-inline-styles/4

2.可複用性：将同样的 style 写成同一个 class ，就可以快速的通用在所有代码中。

3.一致性：同样是微调 margin，有时候你可能会写 margin: 4px ，有时候可能会写 margin: .25rem ，虽然画面上看起来相同，但是却不容易被当成一样的程式码。更糟的是这样的 CSS 规则可能被写在好多不同的 selector 裡，在重构时会造成巨大的困扰。

4.文件/展示分离：我们用 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 ，应该有效能减少很多重複、冗馀的程式码，让代码看起来更加清爽~

https://www.w3schools.com/bootstrap4/bootstrap_utilities.asp