CSS 樣式的優先度

date
Aug 6, 2018
slug
css-style-priority
status
Published
tags
CSS
summary
type
Post
💡
2024/04/30 在我重讀了 CSS 的樣式優先度相關的文件後，更 high level 的 CSS 樣式優先度其實首先是由 cascade layer 決定，相同 layer 下同一元素所 apply 的衝突樣式才能使用 specificity 來比較，如果 specificity 相同則是看 scope。 最終如果都相同，才是後面的會是優先度較高的，其實這點很重要，不管是 layer 還是 style rule 都是放後面的優先級較高。

CSS層疊規則

CSS全名叫作Cascading Style Sheets，而Cascading的意思即為層疊，層疊體現於CSS樣式表的規則可被覆蓋多次、反覆添加，至於最後會採用哪個樣式則是由層疊規則決定

為什麼會發生樣式衝突

模組化

notion image
  • 如果寫原生的CSS，一個完整的頁面可能兩三百行跑不掉，所以利用寫多個檔案再 import 進去可以減少 debug 時的負擔，但分成多個檔案便更容易發生樣式衝突了
    • 順帶一提，CSS 的樣式是 global 的，像是開發一些比較複雜的網頁時，即便分成多個 component，分別套用樣式表，但實際上仍會 bundle 成一份 CSS

    樣式表來自各處

    • 作者
      • 大致上能分三種，使用上推薦使用第一種
        • 外部的 CSS，利用<link>引入
        • <style>...</style>
        • inline-style
    • 用戶
      • 用戶自行寫 CSS 套用是瀏覽器上
      • 例如：知名 chrome 插件 Stylish
          • notion image
    • 瀏覽器
      • 根據不同廠商的瀏覽器會有不同的設定

    優先順序

    根據上面三種CSS來源，我們可以簡單排出以下順序(越上面優先度越高)
    • 用戶端 !important 樣式
    • 作者 !important 樣式
    • 作者一般樣式
    • 用戶一般樣式
    • 瀏覽器一般樣式
    至於兩個樣式的來源相同則以特異值 (specificity) 決定
    特異值的計算方式是根據 CSS selector 決定
    • A為 id 的總數
    • B為 class, attributes selector 和 pseudo-class 的總數
    • C為 tag 和 pseudo-element 的總數
    比較的方式是先比 A，如果 A 值相同則比 B，以此類推
    ⚠️
    需注意 inline-style優先度最高，繼承的優先度最低

    解決樣式衝突的新方法 —— JSS

    在 JS 中寫 CSS，但並非 inline-style，而是利用 class 套用 css，但 class 的名稱是有經過一個後綴的處理，讓 CSS 有scope 的感覺，最近接觸 material-ui 時有使用一下，但一些語法的使用上仍不如 scss 般靈活，可能有些語法還需要摸索一下

    © maxam 2023 - 2024