CSS 是什麼

階層式樣式表（英語：Cascading Style Sheets，縮寫：CSS；又稱串樣式列表、級聯樣式表、串接樣式表、階層式樣式表）是一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言，由W3C定義和維護。

CSS不僅可以靜態地修飾網頁，還可以配合各種手稿語言動態地對網頁各元素進行格式化。CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支援幾乎所有的字型字號樣式，擁有對網頁對象和模型樣式編輯的能力。

維基百科

簡單來說，CSS 是用來裝飾網站內容的工具，從名稱帶有樣式表這三個字我們就可以得知，要用程式語言這四個字套在它身上有點勉強，並且功能是較為單純的，但透過多年來的使用 CSS 也多了不少的延伸可以作使用，基本上分為四大類：

1. CSS 預處理器(CSS Preprocessors)
   代表技術：Sass、Scss、Less
   主要功能：透過擴展 CSS 產生許多幫助開發的功能，像是自訂樣式變數、樣式函式、並且可以使用判斷式或是迴圈生產類別，以及可以透過階層的寫法讓關注點集中，不再像是早期的 CSS 只能一行一行看 Code
2. CSS 後處理器(CSS Postprocessors)
   代表技術：PostCSS
   主要功能：PostCSS 主要用途為透過編譯工具(Webpack、Gulp、Vite)來對 CSS 進行後制，像是 autoprefixer 可以自動添加瀏覽器前綴，postcss-mixins 可以定義和重用 CSS 片段，類似 Sass mixin 功能，如今許多知名的 PostCSS 套件都被 CSS 預處理器或是 CSS-in-JS 給綁在一起了。
3. JavaScript in CSS(CSS-in-JS)
   代表技術：React
   主要功能：以 React 為例，透過在 JavaScript 中撰寫 Class 並且綁定在元件上，此時編譯器會將此 Class 的樣式塞到 style 當中，與 Vue 的內聯樣式綁定 v-bind:style 不同，Vue 的內聯樣式僅會出現在該 DOM 的行內樣式當中，並不會生成一個額外的 Class
4. Utility First
   代表技術：Tailwind CSS、UnoCSS
   主要功能：透過 JavaScript 來管理和生成 CSS 樣式，常被用於整合在現代化前端框架中，可以直接將 CSS 設定寫在 class 中，像是class:mr-10，這段在 tailwind 即為 margin-right: 2.5rem(0.25*10) 這種非常直觀的寫法

如今原生的 CSS 也提供了不少的新功能，像是 CSS variable 可以在 :root 設定變數，直接在 CSS 內直接取用，並且由於 CSS 可以在 run time 裡面偵測設定，因此可以透過 JavaScript 更改此變數的值直接更換樣式，對於一些想要自訂網站樣式的使用者非常的方便。