# <center>CSS class的學習與使用程度(迷因化說明)</center>

###### tags: `迷因` `學習` `CSS` `語法` `轉載`


## 靈感出處
- [**六角學院廖洧杰**在臉書台灣前端開發社群的貼文，提出一套五等級的「CSS class 的命名等級表」](https://www.facebook.com/groups/f2e.tw/permalink/4925715637465762/)
- 個人將此部分文案整理成此哏圖如上
- 備註：這邊預設讀者知道什麼是CSS，以及在HTML使用時須搭配class的名稱以套用屬性

## 簡單說明
- 細節可參考廖的原文，以下為個人簡易註解與感想
- 各等級的特色/優劣：
LV1. 初學或隨便寫CSS易犯的錯誤
- 根本對於HTML與CSS的配合**使用或理解「不及格」(圖示為腦袋萎縮)**
- 其他人甚至開發者本人也**無法搞清楚當時寫的用意！**
LV2. 基本程度的CSS寫法(沒花太多時間)
- 至少在class的命名**有「及格」(圖示為腦袋發亮)**
- 但對於**重複使用性沒有詳細考慮，容易語意衝突或寫法複雜**，最好往下一級修改
LV3. 較完整的純手刻或大量使用CSS
- 單就專案開發使用來說，已經算是**高分的程度了(圖示為腦袋爆出靈光)**
- 能**兼顧到重覆使用與維護的容易性**，也確實需花更多時間調整與溝通
LV4. 使用現成的CSS檔案，以寫class引入為主
- 已經到製作CSS框架的複雜程度，**通常用既有工具即可(圖示為長出身體更完整)**
- **框架等級的class已足以達成大部分的CSS效果**，[不求精確的話甚至不用寫CSS啦(正當偷懶？)](https://medium.com/@writtenByBobYZHuang/%E5%89%8D%E7%AB%AF%E5%88%9D%E9%9A%8E%E8%88%87ui%E5%B7%A5%E7%A8%8B-%E4%B8%80%E7%9B%B4%E5%88%87%E7%89%88%E4%B8%80%E7%9B%B4%E4%B8%8D%E7%88%BD-%E7%9B%B4%E5%88%B0%E6%9C%83%E6%9F%A5bootstrap-e82c8146581b)
- 遇到**無法達成的再額外寫CSS**(不須重複用的部分寫成inline styles屬性即可)
LV5. 選擇最複雜的框架，幾乎不用寫原生CSS了
- 使用大量class精確定義CSS屬性，**反而在HTML堆砌大量程式碼(圖示為超出身心負荷？)**
- **Tailwind做到的程度已超越一般CSS/設計框架**，也因此使用上更為複雜(容量也很可觀)
- 其實**已經接近用class寫inline styles的程度**，[但二者使用性質已有相當差異](https://5xruby.tw/posts/tailwind-css-plugin)
- 使用時**最好搭配前端框架的元件化(component)**，才不會使用時都得加一長串class