剛學網頁的開發者:
隨著 Node.js & 2010年的 npm 出現，各種工具遍地開花!
今天來盤點一下 CSS 相關名詞
我們都知道前端有三劍客: HTML CSS JavaScript
HTML -> 骨架
CSS -> 皮膚
JavaScript -> 肌肉
中文叫做: 階層式樣式表
根據維基百科記載，初始版本時間: 17 December, 1996
(一查才發現年紀比我大!)
習慣上會放在 <head> 標籤，其實放在任何地方都可以(包括 html 外面)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background: #fff;
color: #777;
}
h1 {
font-weight: bold;
font-style: italic;
font-family: sans-serif;
color: green;
}
</style>
</head>
<body>
<h1>123</h1>
</body>
</html>
當網頁越寫越多行時，會抽出去共用
<link rel="stylesheet" href="./css/xxx.css" />
當網頁越長越大，原生 CSS 語法維護起來越來越困難
因此開發者們開始做出新的工具
功能大致有: 支援變數、巢狀、Mixin、選擇器繼承
中文翻譯叫做: 語法上很讚的樣式表(?
根據維基百科記載，初始版本時間: November 28, 2006
特色是縮排寫法
table.hl
margin: 2em 0
td.ln
text-align: right
li
font:
family: serif
weight: bold
size: 1.3em
/**會變成*/
table.hl {
margin: 2em 0;
}
table.hl td.ln {
text-align: right;
}
li {
font-family: serif;
font-weight: bold;
font-size: 1.3em;
}
中文翻譯叫做: 更精簡的樣式表(?
根據維基百科記載，初始版本時間: 2009
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
/**會變成*/
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}
中文翻譯叫做: 野蠻的樣式表(?
是Sass的分身，也就是支援2種不同的寫法
沒有查到明確的時間，只有查出是至少10年前
table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}
li {
font: {
family: serif;
weight: bold;
size: 1.3em;
}
}
/**會變成*/
table.hl {
margin: 2em 0;
}
table.hl td.ln {
text-align: right;
}
li {
font-family: serif;
font-weight: bold;
font-size: 1.3em;
}
上面這些被稱為 CSS 預處理器，因為瀏覽器看不懂，寫好後需要程式做轉換成 CSS
100秒 介紹影片:
是一個用工具，專門轉換 CSS (用 JavaScript 寫的)
可以把它當成一個工具箱，工具箱可以裝各種不同工具，十字起子，鐵鎚，鋸子
根據不同需求去使用不同模組(套件)
最常聽到的是 Autoprefixer，可以加入各種瀏覽器的前綴
:fullscreen {
}
/**會變成*/
:-webkit-full-screen {
}
:-ms-fullscreen {
}
:fullscreen {
}
100秒 介紹影片:
不知道大家在手刻 CSS 的時候是依照功能呢? 還是遵守單一職責原則，依照 CSS 功能寫好後在 class 引用
說這麼多其實就是 className很短 對決 className很長
Tailwind 是屬於 className很短 這一派的，不像Boostrap幫忙刻好元件，一切都依照使用者自己去組合而成(堆積木)。筆者覺得很適合用在共用 components 的時候，管好自己就好，不會影響到其他人
Huli前輩有整理一篇 淺談 Atomic CSS 的發展背景與 Tailwind CSS
相信看完會很有收穫的
相信每個工具都有存在的意義，不同的人事時地物都會造就不同的結果，身為開發者只能與時俱地盡量去了解常見的名詞&工具的用法，未來在面對不同專案需求與合作夥伴時才有更多選擇和討論的空間
覆蓋一張瀏覽器圖，結束這一天
來源
css预处理器和后处理器
https://juejin.cn/post/7104419003329675277
Day 09-[番外]繽紛世界(CSS / Autoprefixer / SCSS with Parcel)
https://ithelp.ithome.com.tw/articles/10201770
【五分鐘學前端】Webpack、PostCSS、Babel、Sass到底是什麼？
https://yixuntseng-bruce.medium.com/%E4%BA%94%E5%88%86%E9%90%98%E5%AD%B8%E5%89%8D%E7%AB%AF-webpack-postcss-babel-sass%E5%88%B0%E5%BA%95%E6%98%AF%E4%BB%80%E9%BA%BC-21820404fdd3
在 VUE SFC (vue-cli) 規劃 Tailwind CSS 架構
https://muki.tw/tech/javascript/tailwind-css-in-vue/
一篇前端討論區抱怨文讓大家 Tailwind 功力更上一層(附上 Bootstrap 比較)
https://blog.user.today/new-way-to-learn-tailwind-css/
iThome鐵人賽
看影片追技術