# 第 1 章 開始之前 - 行前準備！準備工具跟理解框架的區別！
###### tags: `Bootstrap 5 開發秘技｜極速開發電商網站 UI`

# 第一單元

## 環境準備/安裝步驟
1. 安裝[Node.js](https://nodejs.org/en/)
2. 安裝[Chrome](https://www.google.com/chrome/?brand=BNSD&gclid=Cj0KCQjw0emHBhC1ARIsAL1QGNeTL4kcnAWJoKZ9bH3uoSo1BECoUu2BkoeMeE3442Cl4oB5rrAzzWkaAjpGEALw_wcB&gclsrc=aw.ds)
3. 安裝[vscode](https://code.visualstudio.com/)
4. 一坨vscode插件（下方）
5. 一顆快樂的心

## 一坨vscode插件們

- Name: HTML Snippets
Id: abusaidm.html-snippets
Description: Full HTML tags including HTML5 Snippets
Version: 0.2.1
Publisher: Mohamed Abusaid
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets

- Name: HTML CSS Support
Id: ecmel.vscode-html-css
Description: CSS Intellisense for HTML
Version: 1.10.2
Publisher: ecmel
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css

- Name: JavaScript (ES6) code snippets
Id: xabikos.javascriptsnippets
Description: Code snippets for JavaScript in ES6 syntax
Version: 1.8.0
Publisher: charalampos karypidis
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

- Name: Live Server
Id: ritwickdey.liveserver
Description: Launch a development local Server with live reload feature for static & dynamic pages
Version: 5.6.1
Publisher: Ritwick Dey
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

* Name: Material Icon Theme（加入介面icon方便辨識檔案）
https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

# 第二單元

## TailwindCSS vs Bootstrap5

| 特性 | TailwindCSS | Bootstrap5 |
| -------- | -------- | -------- |
| 類型 | Utility | Component |
| 內建組件 | 無 | 有 |
| IE支援 | 2.0以後不支援 | 不支援 |
| 客製化 | 方便 | 還好 |
| 痛點 | webpack整合等等 | 客製化 |

## 命名問題？

- 語義化命名

profile-title > p .....
profile-desc 

- 工具型命名

align-center text-sm

## 我自己的經驗
在接案公司、Yahoo、17、幣安、TikTok使用過CSS框架嗎？

## 該如何選擇？

- 專案迭代速度快，不需要維護，對CSS開發要求不高，例如：接案等等 -> BS5
- 專案需要長期維護，CSS客製化要求高，例如：公司本身的產品等等 -> TailwindCSS