CSSにはカスタムプロパティという便利な機能があり、コードのモジュラー性を高めたり再利用をしやすくすることができます。
この記事ではそうしたカスタムプロパティの利用法と利点について解説します。
・モジュラーCSSで柔軟なグリッドを作る
CSS Gridを使えないプロジェクトなどを手がける場合、Flexboxベースのグリッドの構築はCSS活用のいい練習になります。カスタマイズ性と再利用性が非常に高いモジュールを作ることができるのです。ここではシンプルに実装してみましょう。
| .grid { | |
| display: flex; | |
| flex-direction: row; | |
| flex-wrap: wrap; | |
| padding: calc(var(--margin) / 2); | |
| } | |
| .grid > .cell { | |
| display: block; | |
| width: calc(100% / var(--columns) - var(--margin)); | |
| margin: calc(var(--margin) / 2); | |
| } |
ここからどうモジュラー性を高めればいいでしょう？まずは全てを注意深く名前空間化しましょう。BEMやSMACSSなど手法は様々ですが、ここではシンプルさを保つためクラスとカスタムプロパティの名前に接頭辞myをつけることにしましょう。またいくつかのデフォルトとコンポーネントも追加していきます。
| .my-grid { | |
| /* my-grid custom properties */ | |
| /* Number of columns on the grid. */ | |
| --my-grid-columns: 1; | |
| /* How much space to use on grid margins and inner gutters. */ | |
| --my-grid-margin: 16px; | |
| display: flex; | |
| flex-direction: row; | |
| flex-wrap: wrap; | |
| /* Fallback for browsers without custom properties. */ | |
| padding: 8px; | |
| padding: calc(var(--my-grid-margin) / 2); | |
| } | |
| .my-grid > .my-grid-cell { | |
| display: block; | |
| /* Fallback for browsers without custom properties. */ | |
| width: calc(100% - 8px); | |
| width: calc(100% / var(--my-grid-columns) - var(--my-grid-margin)); | |
| /* Fallback for browsers without custom properties. */ | |
| margin: 8px; | |
| margin: calc(var(--my-grid-margin) / 2); | |
| } |
my-gridがカプセル化され、他に依存しない独立したモジュールとなりました。実際に使う場合はどうすればいいでしょうか？
| <link rel="stylesheet" href="my-grid.css"> |
これだけです！CSSをインポートするだけでデフォルトをインポートしたことになり、好きな順序でオーバーライドすることができます。
| <link rel="stylesheet" href="my-grid.css"> | |
| <style> | |
| .my-grid { | |
| --my-grid-columns: 2; | |
| } | |
| </style> |
もちろん、デフォルトを定義し直さなくても構いません。複数のスクリーンサイズごとに列の数を細かく定義していってもいいのです。
| .my-app .my-grid { | |
| --my-grid-columns: 1; | |
| --my-grid-margin: 8px; | |
| } | |
| @media (min-size: 600px) { | |
| .my-app .my-grid { | |
| --my-grid-columns: 3; | |
| --my-grid-margin: 16px; | |
| } | |
| } | |
| @media (min-size: 1024px) { | |
| .my-app .my-grid { | |
| --my-grid-columns: 6; | |
| --my-grid-margin: 16px; | |
| } | |
| } |
注目してほしいのは、あらかじめ定義されたCSSを変更することなく、全てのカスタマイズがCSSサイドで済んでいることです。つまり、CSSクラスを多数生成して開発者に渡すことは役には立つかもしれませんが、必須ではないのです。
・仕事を分けよう
モジュールとクライアント側コードの問題点を切り分けておくことは非常に重要です。このおかげで開発者は何を変更しようとしていて、どの部分が安全であるのかを把握できるのです。
もし自分のコードを自分自身で使う場合でも、数ヶ月後には自分が何がしたかったか忘れてしまうことだって十分に考えられるでしょう。
優れたカスタムプロパティを構築できればモジュールの再利用がやりやすくなり、クライアント側のコードもよりすっきりします。さらにサーバー側の状況も把握しやすくなります。ぜひ活用してみてください。
○「カスタムプロパティを活用する」Part 2はこちら！
※本稿はSérgio氏による 「CSS Custom Properties as your API」を翻訳・再編集したものです。
おすすめ新着記事
おすすめタグ