【実験記】data属性を使用してスタイリングする方法

こんにちは。エキサイトでデザイナーをしている齋藤です。

今回は、HTMLのdata属性を使用してスタイリングする実験をしてみたので、その方法や所感について記したいと思います。

`data`属性とは？

data属性は、HTMLタグに対して独自の属性を付与できる機能です。

data-に続けて任意の名前を付与することで設定でき、JavaScriptやCSSから参照できます。

data-以下の命名は基本的に自由ですが、以下の通りの制限があります。

大文字小文字にかかわらず、名前を xml で始めてはならない。

名前にコロン (:) を含めてはならない。

名前に大文字を含めてはならない。

<p id="fruit" data-color="red" data-shape="round">Apple</p>

const fruit = document.querySelector("#fruit");

fruit.dataset.color; // "red"
fruit.dataset.shape; // "round"

data属性はCSSからも参照できるので、スタイリングに使用することもできます。

先述の例の場合、特定のdata属性の有無でスタイルを分けたい場合は以下のようなCSSになります。

p {
  &[data-color="red"] { ... };
 
  &[data-shape="round"] { ... };
}

data属性を使用したスタイリング手法は、状態を多く持つような要素（サイト内で汎用的なボタン）と相性が良いかもしれません。例えば、色・サイズ・デザインパターンが指定できるようなボタンを作成するとします。

従来のスタイリングではBEMなどを用いて状態に応じたclassを追加していきます。

<button class="button button--large button--blue button--outlined">...</button>

一方で、classの代わりにdata属性を使用すると以下のようになります。

<button class="button" data-button-size="large" data-button-color="blue" data-button-theme="outlined">...</button>

.button {
  &[data-button-size="large"] { ... };

  &[data-button-color="blue"] { ... };

  &[data-button-theme="outlined"] { ... };
}

class属性を長くせずにスッキリさせることができることが大きな利点でしょうか。

data属性を使用することでclass属性を長くせずにスッキリできる一方で、名称が重複してしまうとスタイルが崩れてしまうのでチームで使用する場合は命名ルールを徹底することが必要かと思われます。

すでにBEMなどのCSS設計を取り入れている場合は、data属性を用いた手法を組み合わせてしまうと混乱を招く可能性もあるため特に注意が必要そうと感じました。

今回は、HTMLのdata属性を使用してスタイリングする実験をしてみたので、その方法や所感についてお話をしました。

実務に落とし込むことは難しそうという結論に至った一方で、スタイリング手法の一選択肢としてdata属性を使用する方法が知れたことは個人的に収穫でした。

data属性が気になっている方の参考となれば幸いです。

ご精読ありがとうございました。