---
# System prepended metadata

title: <center>CSS class的學習與使用程度(迷因化說明)</center>
tags: [轉載, 語法, CSS, 學習, 迷因]

---

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

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

![](https://i.imgur.com/yMwO1Vo.png)

## 靈感出處
- [**六角學院廖洧杰**在臉書台灣前端開發社群的貼文，提出一套五等級的「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