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

    属性駆動スタイリング

    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>

    参考