カスタムデータ属性でCSSフレームワークを作ろう

CSS By シェフ

先日、フルリニューアルしたWordPressテーマ「4536」を公開しました。

このリニューアルではサイトデザインが大幅に変わりましたが、実は内部でも「ある改革」をしていました。

その1つが「CSS設計」です。

Vue.jsのフレームワークである「Vuetify」でのサイト設計がかなり快適で、もう従来のCSS設計が面倒になったんですよね。

「CSSファースト」とでも呼べばいいのでしょうか。

フレームワークと言えば「Bootstrap」が定番ですが、ファイルが重かったり、最適化するために手間がかかったり、いくつか無視できないデメリットもあるので自作した次第です。

自作のフレームワークなのでいくつか自分ルールもあるんですが、今回のキモは「カスタムデータ属性」を使ったこと。

以下、カスタムデータ属性を使ったCSSフレームを自作する方法やメリットについてお話ししたいと思います。



カスタムデータ属性とは?

カスタムデータは「data-〇〇」のような形で使うclassやidと同じ「属性」です。

data-に続く文字列は記号以外なら基本的に何でもOKで、data-colordata-123といった文字列になります。

また、classやidと同じ属性なので、data-color="red"のように値とセットで使うのが基本ですね。

サンプルHTML

<body data-font-size="24px">
 <div data-bg-color="red">
 </div>
</body>

特に難しいことなくお使いいただけるかと思います。

本当にclassやidと同じように使えます。

サンプルCSS

先ほどのHTMLに対してCSSは以下のように記述します。

[data-font-size="24px"] {
 font-size: 24px;
}
[data-bg-color="red"] {
 background-color: red;
}

カスタムデータ属性を使うメリット

なぜカスタムデータ属性を使うのか、なぜclassではダメなのかについての個人的な意見は以下の通りです。

  • JavaScriptで操作しやすい
  • 直感的に扱える
  • メンテナンスが楽
  • 正規表現が簡単

今回はフレームワークについての話なのでその点に触れます。

直感的に扱える

カスタムデータ属性でCSSを設計すると非常に直感的でわかりやすい名前にできます。

例えば、displayには「block」に「inline-block」に「flex」に、様々な値がありますよね。

これをclassで表現すると、以下のようになります。

.display-block {
 display: block;
}
.display-inline-block {
 display: inline-block;
}
.display-flex {
 display: flex;
}

そして、HTMLはこのようになります。

<div class="display-block">
 <div class="display-flex">
 </div>
</div>

これでもいいんですが、カスタムデータ属性の方が「直感的」です。

CSSはこう。

[display="block"] {
 display: block;
}
[display="inline-block"] {
 display: inline-block;
}
[display="flex"] {
 display: flex;
}

HTMLはこう。

<div data-display="block">
 <div data-display="flex">
 </div>
</div>

おそらく、どんなことをしているのか初見でわかるかと思います。

メンテナンスが楽

フレームワークの最も大きなメリットでもありますが、やはり「管理が楽」なんですよね。

displayをblockからflexに変えたい時、CSSを修正するのではなく、data-display="block"data-display="flex"へと、HTML側を修正するので非常に直感的です。

「このCSSどこだっけ?」という時間がないので、開発者フレンドリーだと思いませんか?

正規表現が簡単

WordPressのテーマ開発をしていると、str_replaceやpreg_replaceなどの正規表現を使う場面が多いです。

▼正規表現についてはこちら▼

この正規表現、プログラムの中でも処理が重い部類に入り、カスタムデータ属性を使わずにclassやidを対象にする場合は特に余計に処理が重くなりがちです。

なぜなら、idがあるのかないのか、classがあるのかないのか、などの処理から始まることも多いため、そこで余計なパワーを使うためです。

一方、カスタムデータ属性だと正規表現によるチェックが不要になるため、以下のようにシンプルに文字列を置換することができます。

$content = str_replace( '<a', '<a data-display="block"', $content);

個人的にはこれはけっこう大きなメリットだと思っています。

カスタムデータ属性のフレームワーク【サンプル】

特に難しいことはありませんが、記述が地味に面倒だと思うので以下にサンプルをまとめました。ご活用ください。

※全部のCSSを定義すると不要なものまで含まれて肥大化してしまうため、実際に使ったものだけ記載しています。サイトの構成に応じて追加や削除をしてみてください。

[data-display="none"] {
  display: none;
}

[data-display="block"] {
  display: block;
}

[data-display="inline-block"] {
  display: inline-block;
}

[data-display="table"] {
  display: table;
}

[data-display="flex"] {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
}

[data-overflow="hidden"] {
  overflow: hidden;
}

[data-overflow-y="hidden"] {
  overflow-y: hidden;
}

[data-position="relative"] {
  position: relative;
}

[data-position="absolute"] {
  position: absolute;
}

[data-position="fixed"] {
  position: fixed;
}

[data-text-align="center"] {
  text-align: center;
}

[data-text-align="left"] {
  text-align: left;
}

[data-align-items="center"] {
  -webkit-box-align: center;
  align-items: center;
}

[data-justify-content="center"] {
  -webkit-box-pack: center;
  justify-content: center;
}

[data-justify-content="flex-end"] {
  -webkit-box-pack: end;
  justify-content: flex-end;
}

[data-flex-direction="column"] {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
}

[data-flex-direction="row-reverse"] {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  flex-direction: row-reverse;
}

[data-flex-wrap="nowrap"] {
  flex-wrap: nowrap;
}

[data-font-size="small"] {
  font-size: 13px;
}

[data-font-size="x-large"] {
  font-size: 24px;
}

[data-font-size="xx-large"] {
  font-size: 32px;
}

[data-text-decoration="underline"] {
  text-decoration: underline;
}

marginやpaddingも定義しよう

フレームワークの醍醐味でもありますが、marginやpaddingも定義すると非常に開発が捗ります。

例えば、冒頭でもお話ししたVue.jsのフレームワーク「Vuetify」はクラス名で余白を管理するのですが、この手法は自作のフレームワークで全面的に採用しました。

  • margin-topは「mt」
  • margin-bottomは「mb」
  • padding-rightは「pr」
  • padding-leftは「pl」

となり、その後にハイフン+数字で余白の大きさを決めます。

  • mt-1ならmargin-top: 4px
  • mb-4ならmargin-bottom: 24px
  • pr-2ならpadding-right: 8px
  • pl-5ならpadding-left: 48px

これは完全にVuetifyの手法をマネしました(笑)

慣れるとすごく便利なので、ぜひ取り入れてみてください!

自作のフレームワークは高速化にもつながる

そういえば、大事なことを言っていませんでした。

フレームワークを使うことによって「CSSの重複」がなくなりファイルが軽くなるため、直接的にサイト表示の高速化につながります

CSSに関するサイト高速化の記事でもまとめましたが、ファーストビューに関連するCSSは最初にインラインで読み込み、他のは後で遅延読み込みが基本的な施策ですが、要はインラインでフレームワークを読み込むということですね。

これは意外と効果大な手法なので、高速化の観点からもフレームワークを採用してみてはいかがでしょうか。


カテゴリー:CSS

シェフ

このサイト「Fantastech」を運営している人。WordPressテーマ「4536」の開発中にインプットした情報などを発信中。お仕事のご依頼については「Shinobi Works」までどうぞ