≪ Today I learned. RSS購読
公開日
タグ
CSS
著者
ダーシノ(@bc_rikko)

属性駆動スタイリング

BEMでいうところのModifierをclas に含めず、属性で表現しスタイリングすること。

優先順位

  1. HTMLの属性
  2. ARIA属性
  3. カスタムデータ属性（data-*）
    • ※カスタムデータ属性はJavaScriptで状態を変化させるケースで使い、スタイルには用いない

HTML属性で表現

<!-- BAD -->
<button class="btn__disabled">...</button>

<!-- GOOD -->
<button disabled>...</button>

<style>
.button[disabled] { ... }
</style>

ARIA属性で表現

<!-- BAD -->
<a class="link__active">...</a>
<section class="panel__open"></section>

<!-- GOOD -->
<a aria-current="page">...</a>
<section aria-expanded="true"></section>

<style>
.link[aria-current="page"] { ... }
.panel[aria-expanded="true"] { ... }
</style>

カスタムデータ属性で表現

<!-- BAD -->
<button data-priority="primary">...</button>

<!-- GOOD -->
<header data-compact-mode="true"></header>

<style>
.header { ... }
.header[data-compact-mode="true"] { ... }
</style>

参考