CSS 框架用了什麼設計模式 從把妹角度理解前後端如何和平相處

小編曾介紹過 CSS 的設計模式，這篇就讓小編開箱那些年小編曾體驗過的 CSS 主流框架:

• Tailwind CSS
• PureCSS
• Bootstrap
• animate.css

大家在寫 CSS 的過程，應該都會經歷幾個階段:

1. 都不太會寫，先找個大家常用的套件 => 你寫的網站好 Bootstrap
2. 開始用一些原生的寫法，寫著寫著就變成龐然大物幾千行的程式碼
3. 開始把 CSS 元件化，將常用的 UI 封裝起來，就是常見的幾套框架像是 bootstrap、element ui、Antd 幫我們做的事情
4. 使用 CSS 處理器優化開發者體驗
5. CSS 原子化

就好像女孩子剛學化妝的時候

1. 先看個網美推薦就開始買個套裝組開始塗，可是工具是否用的好，塗上去是否適合都不知道
2. 接下來就開始東買一個西買一個來試用，桌上堆滿了琳瑯滿目的化妝跟保養品
3. 各種產品用過一輪後接著開始知道洗澡前後用什麼、睡前用什麼、起床用什麼、出門用什麼
4. 開始用一些產品取代掉過去使用的
5. 只買自己需要的

Tailwind CSS

可以不改到 style sheet 避免把東西改壞但還是可以修改畫面的方法

Tailwind CSS 把所有可能會用到的樣式都寫成一個 Class，使用 Tailwind CSS，基本可以不用再寫 css，壞處是 html 標籤的 class 會很長。

也許有人會說那這包不就很大且一堆功能沒用到? 所以在打包的時候需要使用 purge css。

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

<figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800">
  <img
    class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto"
    src="/sarah-dayan.jpg"
    alt=""
    width="384"
    height="512"
  />
  <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
    <blockquote>
      <p class="text-lg font-medium">
        “Tailwind CSS is the only framework that I've seen scale on large teams.
        It’s easy to customize, adapts to any design, and the build size is
        tiny.”
      </p>
    </blockquote>
    <figcaption class="font-medium">
      <div class="text-sky-500 dark:text-sky-400">Sarah Dayan</div>
      <div class="text-slate-700 dark:text-slate-500">
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure>

Pure CSS

輕量化、簡單、易用

分成了 6 種模組，每個模組都是獨立的 CSS 檔案，可以依需求載入需要的模組，不需要太多工具就可以直接使用的一套 CSS 框架。

1. base
2. Grids
3. Forms
4. Buttons
5. Tables
6. Menus

可以從原始碼發現結構與樣式分離 (OOCSS)

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

.pure-button {
  /* Structure */
  display: inline-block;
  line-height: normal;
  white-space: nowrap;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* 樣式 */
.pure-button-primary,
.pure-button-selected,
a.pure-button-primary,
a.pure-button-selected {
  background-color: rgb(0, 120, 231);
  color: #fff;
}

原始碼: https://unpkg.com/purecss@2.1.0/build/buttons.css

Bootstrap

Bootstrap 的樣式很難去客製化一個自己新的樣子，頂多依照開發指南去蓋掉一些變數。

如果一個專案，需要快速或者簡單交付，那就不一定要用 Tailwind CSS，用 Bootstrap 真的方便快速。

Bootstrap 也包含 OOCSS 的概念，從以下範例可以看出來什麼是容器與內容分離

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

/* 未分離 */
.col {
  /* 樣式內容 */
}

.col .btn {
  /* 樣式內容 */
}

/* 容器與內容分離 */
.col {
  /* 樣式內容 */
}
.btn {
  /* 樣式內容 */
}

1
2
3

<div class="col">
  <button class="btn">button</button>
</div>

Bootstrap 也有常用的一些 css 屬性部分做 Atomic CSS (原子化樣式) 的設計

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

.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-1 {
  margin-top: 0.25rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

animate.css

推薦 animate.css 也有提供 custom build 的功能。

主要也是原子化樣式 (Atomic CSS) 的概念，以動畫 delay 秒數為例:

animate__delay-2s -> 延遲 2s
animate__delay-3s -> 延遲 3s
animate__delay-4s -> 延遲 4s
animate__delay-5s -> 延遲 5s

1

<div class="animate__animated animate__bounce animate__delay-2s">Example</div>

• ← 上一篇
• 下一篇 →