先日、フルリニューアルしたWordPressテーマ「4536」を公開しました。
このリニューアルではサイトデザインが大幅に変わりましたが、実は内部でも「ある改革」をしていました。
その1つが「CSS設計」です。
Vue.jsのフレームワークである「Vuetify」でのサイト設計がかなり快適で、もう従来のCSS設計が面倒になったんですよね。
「CSSファースト」とでも呼べばいいのでしょうか。
フレームワークと言えば「Bootstrap」が定番ですが、ファイルが重かったり、最適化するために手間がかかったり、いくつか無視できないデメリットもあるので自作した次第です。
自作のフレームワークなのでいくつか自分ルールもあるんですが、今回のキモは「カスタムデータ属性」を使ったこと。
以下、カスタムデータ属性を使ったCSSフレームを自作する方法やメリットについてお話ししたいと思います。
カスタムデータ属性とは？
カスタムデータは「data-〇〇」のような形で使うclassやidと同じ「属性」です。
data-に続く文字列は記号以外なら基本的に何でもOKで、data-colorやdata-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は最初にインラインで読み込み、他のは後で遅延読み込みが基本的な施策ですが、要はインラインでフレームワークを読み込むということですね。
これは意外と効果大な手法なので、高速化の観点からもフレームワークを採用してみてはいかがでしょうか。
