技術問答
技術文章
iT 徵才
Tag
聊天室
2024 鐵人賽
登入/註冊
問答
文章
Tag
邦友
鐵人賽
搜尋
2022 iThome 鐵人賽
DAY
1
0
自我挑戰組
【Tailwind】你聽過尾巴風嗎 ? CSS 框架 tailwind 的新手入門指南
系列 第
1
篇
Day 1:寫CSS寫好好的,一定要用框架嗎?框架是什麼?【CSS框架入門】
14th鐵人賽
linlaose
團隊
死線衝鋒 Deadline Squad
2022-09-16 18:54:04
1639 瀏覽
分享至
一、前言
什麼是 CSS 框架?
這是筆者在剛開始聽到"CSS 框架"時產生的疑問,從剛接觸 CSS 到使用 SCSS 的期間也覺得這樣子的開發方式滿順的,那到底為什麼大家都在講 CSS 框架呢?於是心理產生第二個疑問。
用框架的目的是什麼?
在查詢框架是什麼的過程中,最先得知的反而是使用框架的理由,由於大家遵循著 DRY (Don't Repeat Yourself) 的開發方式,藉由這種精神自然而然的會重視著專案的開發速度,框架就孕育而生。所以「框架」的目的就是"加快"開發者的開發速度,而 CSS 框架就是為了讓使用者在撰寫 CSS 樣式時加快開發速度。
二、CSS 框架
CSS 框架運作概念
現在知道 CSS 框架的目的是加快開發速度了,那實際上是以哪種方式進行的呢?先以原先的純寫 CSS 講起。
以一碗滷肉飯便當來舉例:
純寫 CSS
我們必須自己決定要吃什麼菜 (樣式),並自己把菜買回來,食材處理並料理 (樣式撰寫)之後,再將這些菜色與滷肉飯結合成滷肉飯便當 (加上樣式的產物)。
預處理器 (SASS、SCSS)
我們必須自己決定要吃什麼菜,並買菜回來,但在處理食材的方式已經進步,所以整體料理的速度上加快了,最後同樣將菜色與滷肉飯結合成滷肉飯便當。
CSS 框架
雖然我們一樣要吃滷肉飯便當,但這次決定直接去跟店家買現成的滷肉飯便當來吃,而這中間我們省去了決定菜色與處理食材,直接拿到的是現成的滷肉飯便當;這就是 CSS 框架的運作概念,並且這個方式最大化的體現 DRY 的開發模式。
大方向的觀念以這種方式理解,後面的章節會再做補充,希望這種舉例方式能夠幫助大家快速地理解 CSS 框架在開發過程中的角色。
CSS 框架種類
有哪些 CSS 框架是目前流行常用的呢?
上圖來自於
State of CSS 2021
,可以從圖面上看到,在最終 2021 年的統計上,前兩名為『Bootstrap』和『Tailwind』,而兩位就是下一篇文章的主角,讓我們在下一篇文章繼續了解兩者的差異性吧!
留言
追蹤
檢舉
下一篇
Day 2:我知道框架了,那我應該用哪一個?【Bootstrap和Tailwind的差異】
系列文
【Tailwind】你聽過尾巴風嗎 ? CSS 框架 tailwind 的新手入門指南
共
30
篇
目錄
RSS系列文
訂閱系列文
11
人訂閱
26
Day 26:建立登入格式【Tailwind – 實作元件(三)】
27
Day 27:建立表單【Tailwind – 實作元件(四)】
28
Day 28:建立卡片【Tailwind – 實作元件(五)】
29
Day 29:checkbox、radio 小妙用【Tailwind – accent-color】
30
Day 30:最佳化以及小技能【Tailwind – minify & Just-In-Time mode】
完整目錄
直播研討會
{{ item.subject }}
{{ item.channelVendor }}
{{ item.webinarstarted }}
|
{{ formatDate(item.duration) }}
直播中
立即報名
尚未有邦友留言
立即登入留言
iThome鐵人賽
參賽組數
83
組
團體組數
1
組
累計文章數
48
篇
最後報名日
9/15
看影片追技術
看更多
{{ item.subject }}
{{ item.channelVendor }}
|
{{ formatDate(item.duration) }}
直播中
熱門tag
看更多
15th鐵人賽
13th鐵人賽
14th鐵人賽
12th鐵人賽
11th鐵人賽
鐵人賽
2019鐵人賽
2018鐵人賽
javascript
2017鐵人賽
python
windows
php
c#
windows server
linux
css
react
程式設計
vue.js
熱門問題
Line電腦版 不支援 win7
安裝方式都一樣,有沒有好的備份方式
更換Switch後的問題
請問該如何評估一間公司需要哪些IT人員跟薪資範圍、每年預算?
視窗錄影超出螢幕的部分
VMware ESXi 8執行shutdown後設備會自行開機
MSSQL 算年資問題請教
Chrome extension 如何做到 screenshot 功能
有趣的Docker問題
想詢問郵件伺服器的備援方式
熱門回答
安裝方式都一樣,有沒有好的備份方式
Line電腦版 不支援 win7
MSSQL 算年資問題請教
Chrome extension 如何做到 screenshot 功能
請問發問的文章可以刪除嗎?
熱門文章
資工考研錯題筆記(交成央科)
演算法筆記(Ch1~6)
Linux common commands (常用指令)暨Ubantu設定
TWQR Code產生器,一堆的無標示的QR Code你敢不敢掃描,要加LOGO
[ 猩猩也會用 ] Mermaid 常用筆記
IT邦幫忙
×
標記使用者
輸入對方的帳號或暱稱
Loading
找不到結果。
標記
{{ result.label }}
{{ result.account }}