CSS設計とパフォーマンス向上のためのベストプラクティス
フロントエンド開発やCMSでのプロジェクトにおいて、CSSはデザインとサイトパフォーマンスに直接影響を与える重要な要素です。だからこそ、CSSの設計やパフォーマンスの最適化が必要です。この記事では、効率的なCSS設計と最適化のベストプラクティスについて解説します。
良いCSS設計をするためには…
FLOCSS、BEM、ABC-CSSといった種々のCSS設計手法がありますが、共通の目的は保守しやすく、拡張性が高く、再活用可能で効率的なコードを作ることです。設計方法に多様なルールや方法論がある中で、基本的な目的をしっかり把握して活用することが大事です。それにより、新たな設計アプローチへの適応も柔軟に対応できます。
シンプル要素から設計する
シンプルな要素からコンポーネント化し、状況に合わせて少しずつコードを組み立ていくと、効率的な開発に繋がりやすいです。コードの繰り返しも最小限に抑えられ、何より後で修正や追加がしやすくなります。
// FLOCSSのコンポーネント例
.c-heading {
font-weight: 600;
font-size: 28px;
...
}
.c-text {
font-size: 16px;
...
}<!-- いくつかのコンポーネントで新しい要素を組む -->
<div class="p-card">
<img class="c-image" src="" alt="" />
<h3 class="c-heading -size_xs">見出し</h3>
<p class="c-text -size_s"></p>
</div>ユーティリティクラスで柔軟性を加える
スペースや余白など、頻繁に調整が必要なスタイリングはユーティリティクラスで管理すると後でのメンテナンスも簡単です。
.u-mt-10 {
margin-top: 10px;
}
.u-mt-20 {
margin-top: 20px;
}<section class="l-block">
<div class="l-block__inner">
<h2 class="c-heading"></h2>
<!-- 余白の微調整が手軽にできる -->
<ul class="p-grid u-mt-10"></ul>
</div>
</section>CSS変数（カスタムプロパティ）で管理を効率化する
CSS変数（カスタムプロパティ）は、今や大半のブラウザでサポートされています。この機能を活用すると、設計がもっと一目瞭然であり、簡単にカスタマイズできます。そして、デザインシステム沿った命名ルール設定でもっと効率化できます。
グローバル変数を定義してサイト全体の値を一元管理
色味やフォントサイズなど、全体で使う要素は:rootセレクタで一元管理が可能です。使う方法はvar()関数で呼び出すだけで、デザイントークンに沿ったプロパティ値の設定が可能です。
:root {
--color-primary: #1b65b1;
--color-sencodary: #2287bd;
--font-size: 16px;
--line-height: 1.5;
}
// 変数呼び出し
.selector {
color: var(--color-primary);
}
.button {
font-size: var(--font-size);
}変数のスコープを活かす
スコープを活用して、CSS変数の値を柔軟に変更できます。これにより、無駄なコードの重複を避けることができます。
.p-grid {
--col-num: 1;
--gap: 0;
display: grid;
grid-template-columns: repeat(var(--col-num), 1fr);
gap: var(--gap);
// Column
&.-col_2 {
--col-num: 2;
}
&.-col_3 {
--col-num: 3;
}
// Gap
&.-gap_xl {
--gap: 10px;
}
}要素の継承で効率化する
親要素で変数を定義すると、マウスオーバー時に入れ子のCSSを使わずにプロパティの値を更新できます。
.button {
--color-label: red;
--color-icon: red;
&:hover {
--color-label: blue;
--color-icon: blue;
}
}
.button__label {
color: var(--color-label);;
}
.button__icon {
color: var(--color-icon);
}PostCSSで軽量と最適化を行う
PostCSSは多数のプラグインを活用してCSSを最適化するツールです。特にSassからCSSコンパイルし、圧縮・重複する値をまとめることでCSS軽量化やパフォマンス改善にとても役に立ちます。
CSSO：CSSの最小化と軽量化
CSSファイルを最小化し、軽量化するためのプラグインです。空白やコメントを削除するだけでなく、重複しているCSSの構文やプロパティをまとめてくれます。
PurgeCSS：未使用のCSSを削除
HTMLやJavaScriptをスキャンして、不要なCSSを取り除くことができます。
Sort Media Queries：メディアクエリを効率化
ブレイクポイントごとに重複しているメディアクエリをまとめてくれます。
サーバー側の設定する
CSSでのパフォーマンス向上は、クライアントサイドの最適化だけでなく、サーバー側の調整にも大きく向上することができます。特にCSSの読み込み速度や効率性は、サーバー側で何が行われているかに大きく影響を受けます。
ただし、サーバーによっては設定ができない場合もあるので、サーバー状況を確認して柔軟に対応する必要があります。一般的によく使う方法は以下になります。
gzip圧縮
gzipはデータを圧縮するためのソフトウェアアプリケーションです。サーバー側でCSSファイルをgzipで圧縮してから送信すると、転送データ量が減少し、結果としてページの読み込み速度が向上できます。
CDN（Content Delivery Network）
CDNは地理的に分散されたサーバーを活用してコンテンツを配信するネットワークです。通常、ユーザーがWebページにアクセスすると、指定された一つのサーバーからデータが送られますが、CDNを使用することで、ユーザーに最も近いサーバーからデータが送られるようになり、サーバーからCSSのアクセス速度が大幅に向上できます。
終わりに
CSS設計やパフォーマンスの最適化は、様々な手法やツールが存在しますが、最も重要なのは、基本からしっかりと理解し、プロジェクトのニーズに合わせて適切に選択することが重要だと思います。設計手法やツールをうまく使いこなすことで、より効率的なWeb開発をできれば幸いです。
