CSS設計模式

基於命名
2009
2010
2011
2014
2014
2015
樣式原子化
2016
2017

適合原生CSS，或是CSS Modules、Vue、BEM的人
反而可能不適合如 styled-components 的CSS in JS
更改BEM裡Modifier的寫法
1. 盡可能使用WAI-ARIA屬性
2. 無法使用WAI-ARIA表現的則使用自訂資料屬性
<button
type="button"
class="button"
data-level="primary"
aria-pressed="true"
>
Button
</button>
.button {
color: #333;
background-color: #f0f0f0;
border: #999 1px solid;
padding: .4em;
&[data-level="primary"] {
background-color: #fcc;
}
&[aria-pressed="true"] {
box-shadow: 2px 2px 4px #999 inset;
}
}
更改動態樣式的寫法
改為使用CSS自訂屬性
<div
class="tooltip"
aria-hidden="false"
style="--top: 120px; --left: 40px"
>...</div>
.tooltip {
--top: 0;
--left: 0;
position: absolute;
top: var(--top);
left: var(--left);
}
避免優先度混淆
明示變數的影響範圍

相關連結



Related