[Day3] 论前端框架的好处及重要性～从自己刻到学习共通语言（下篇）

前言

稍微想了一下，我的系列文重点应该会摆在强调使用前端框架的好处及重要性，
前期会建立概念：为何要使用前端框架而不是自己刻 HTML/CSS，
应该不会是教大家如何使用前端框架的入门教学文XD
因为其实关於前端框架(Bootstrap, React,......)的入门教学文已经有很多，
也都很优质，
而且也有看到这次铁人赛有人写前端框架的教学文，
所以如果是要看入门教学文的就可以前往其他地方进行学习了XD
我今天会再花一个篇幅来讨论学习前端框架的好处。

本日正文

余忆童稚时（？）

我还记得我刚学这些我不太懂的框架时，
其实心里一直觉得，
自己刻不是也很好吗？
为什麽非得学框架的写法不可？
但直到现在我觉得框架语言(尤其是 Bootstrap 本身提供的那些 class)真是太方便好用了XD
除了 Bootstrap 没提供的以外，
现在我几乎不太会自己刻 CSS 了XD

不过我觉得学前端框架前，
应该还是得从自己刻过 HTML/CSS 开始学起，
如此才能把基础扎稳，
如果跳过这个就直接学前端框架，
那很多时候还是需要自己刻 CSS 的时候应该会很雾煞煞XD
(这就有点像如果没先学2x2x2=8，
就直接学2的3次方是8，
你可能会不懂然後就硬背吧)

自己刻 v.s. 使用框架

为了让大家更加能感受到自己刻跟使用框架的差别，
今天延续昨天的例子，
来举一些例子吧！

昨天的例子一开始长这样：

[HTML]

<div class="block1">1</div>
<div class="block11">2</div>
<div class="block111">3</div>

[CSS]

.block1 {
  background-color: blue;
  margin-bottom: 10px;
}

.block11 {
  background-color: green;
  margin-bottom: 10px;
}

.block111 {
  background-color: orange;
  margin-bottom: 10px;
}

如果现在设计师跟你说他觉得数字里面太挤了，
应该要弄出一些留白，
传统的方式，
你会到 CSS 里面每个 class 都加上 padding: 10px，
像这样：

.block1 {
  background-color: blue;
  margin-bottom: 10px;
  padding: 10px;
}

.block11 {
  background-color: green;
  margin-bottom: 10px;
  padding: 10px;
}

.block111 {
  background-color: orange;
  margin-bottom: 10px;
  padding: 10px;
}

但是隔天可能你休假，
然後设计师找上你的同事帮忙修改前端，
这次设计师要求第二区块里面的留白要变多一些，
但因为他不是你而你可能也没跟他交接有这件事，
因此他又要先到 HTML 先看第二区块的 class 是 block11，
再到 CSS 档案找到 .block11，
把 padding: 10px 改成 padding: 20px。

可是看完设计师又不满意，
说他觉得左边留白应该都要对齐，
所以你同事又到 CSS 档案把 .block11 的设定，
在下面加上一行 padding-left: 10px，
最後变成这样：

.block1 {
  background-color: blue;
  margin-bottom: 10px;
  padding: 10px;
}

.block11 {
  background-color: green;
  margin-bottom: 10px;
  padding: 20px;
  padding-left: 10px
}

.block111 {
  background-color: orange;
  margin-bottom: 10px;
  padding: 10px;
}

後来隔天你去上班了设计师可能又说要改，
你又得再跟你同事确认一下为什麽他昨天要这样改，
再去 CSS 看他改了什麽，
事後你跟你同事心里都觉得有点烦，
对吧？

改成前端框架整个故事会不一样

前情提要：Bootstrap Spacing 语法教学

在讲述下一段前要先来学习一下 Bootstrap 的 Spacing 语法怎麽用，
详情可参考→ Spacing · Bootstrap v5.0

前面文章也有提到说我一开始不懂 m-4, pl-2 这种语法的意思，
其实 m 代表的就是 margin，
p 当然就是 padding，
以此类推，ml 代表 margin left，
pb 代表 padding bottom。
还有一个进阶的写法是 mx,my,px,py，
相信你已经猜到是什麽意思了，
x 是左右方向，
y 是上下方向，
所以如果要左右的 margin 都要推，
只要写成 mx 就好，并不需要把 ml, mr 两个都写出来。
(PS. 如果有人对 padding, margin 不清楚的不介意的话可以参考一下我去年写的文章XD →Day8 - 那些有关网页排版的大小事（入门篇）

至於 - 後面的数字当然就代表要推多少空间出来罗，
详细的计算方式有兴趣的可参考这边的说明 → Notation
总之目前 Bootstrap 有提供 0~5 的数字可供使用。

到这边大家应该都有个概念了吧，
那我们继续往下走~~~
(PS. m-4, pl-2 这种 Spacing 的语法是 Bootstrap 很常用到的写法，
应该说几乎不可能不会用到XD)

采用前端框架後为人生带来的转变（？）XD

好的，这边把上面的故事改成前端框架版，
假设现在你们的 code 已经有采用 Bootstrap 这个前端框架，
那麽 HTML 一开始会长这样：
(PS. CSS 的部份目前不需要写任何设定保持空白即可)

<div class="mb-1 bg-primary">1</div>
<div class="mb-1 bg-info">2</div>
<div class="mb-1 bg-warning">3</div>

1. 如果现在设计师跟你说他觉得数字里面太挤了，应该要弄出一些留白

这时候只需要在每个区块加上 p-1 的设定就好，
像这样：

<div class="mb-1 p-1 bg-primary">1</div>
<div class="mb-1 p-1 bg-info">2</div>
<div class="mb-1 p-1 bg-warning">3</div>

是不是有够惬意XD

2. 这次设计师要求第二区块里面的留白要变多一些

这时候在第二个 div 的 class 从 p-1 改成 p-2 就好，
也太容易了吧XD

<div class="mb-1 p-1 bg-primary">1</div>
<div class="mb-1 p-2 bg-info">2</div>
<div class="mb-1 p-1 bg-warning">3</div>

3. 设计师觉得左边留白应该都要对齐

这就更容易了，
在第二个 div 的 class 改成 p-1 py-2 就好XD
(PS. p-1 只有 p 表示 x 方向跟 y 方向都会吃这个设定，
所以这个写法是说大家都先吃 p-1 这个设定，
再用 py-2 单独把上下方向的 padding 放大就好)

<div class="mb-1 p-1 bg-primary">1</div>
<div class="mb-1 p-1 py-2 bg-info">2</div>
<div class="mb-1 p-1 bg-warning">3</div>

而且这样就算是你或你同事只看 HTML 也是一目了然要怎麽改，
就算设计师要求再怎麽多也不怕了XD
就只需要利用 m-?, p-? 这种语法搭配使用，轻轻松松完成要求XD
而且这样你发现其实只花 3 行 HTML 就做到当初自己刻 HTML/CSS 可能要 20 行才办得到的事，
用一张截图给大家感受差别XD

用 Bootstrap 真的只要 3 行就可以完成一样的事情！
也太赞了吧XD

所以真的用过就回不去了XD

(PS1. 至於你可能会有疑问那个 bg-??? 的 class name 又是什麽，
那又是 Bootstrap 提供的好用语法之一了XD
不过你可能也许已经猜到 bg 是 background 的简写，
所以那是背景颜色的设定XD)
(PS2. 不过传统自己刻的方式还是要会啦，
因为 Bootstrap 不是所有样式设定都有提供这种 class 的写法，
如果需要客制还是得自己刻才行，
只是常用的 Spacing, color 等设定就不用很麻烦再一直写了这样)

後记

预计从接下来会介绍我觉得几个 Bootstrap 必学的好用语法XD
(就是我到现在还一直很常用的那些XD)

那今天就到这里先告一段落，
相信大家对於为什麽不自己刻 HTML/CSS，
而是要采用前端框架语法有更深的体悟了吧！
那我们之後的文章再见罗~~~~~~

附上今日 Codepen：
Day3 - 传统版
Day3 - Bootstrap 版

(PS. 对了，要使用 Bootstrap 框架语法记得在 设定 > CSS 加入以下网址：
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css
可参考请昨日文章的截图：