CSS設計模式

基於命名

2009

2010

2011

2014

2014

2015

樣式原子化

2016

2017

2. 無法使用WAI-ARIA表現的則使用自訂資料屬性

code:html

<button

type="button"

class="button"

data-level="primary"

aria-pressed="true"

Button

</button>

code:css

.button {

padding: .4em;

}

}

}

更改動態樣式的寫法

改為使用CSS自訂屬性

code:html

<div

class="tooltip"

aria-hidden="false"

style="--top: 120px; --left: 40px"

...</div>

code:css

.tooltip {

--top: 0;

--left: 0;

position: absolute;

top: var(--top);

left: var(--left);

}

避免優先度混淆

明示變數的影響範圍

相關連結