CSSで似たようなクラス名をまとめて指定できたら楽なのに、と思ったことがある人は多いと思います。そんな悩みを解決してくれそうな新機能について、改めて調べてみました。
「クラスプレフィックスセレクタ」とは何なのか
「クラスプレフィックスセレクタ」は、.btn-primary、.btn-secondary、.btn-dangerのように、同じ接頭語（プレフィックス）を持つ複数のクラスを、まとめて一つのセレクタで指定できるようにするCSSの新機能のようです。
これまでは、こうしたクラスをまとめて指定したい場合、.btn-primary, .btn-secondary, .btn-danger { ... }のように、カンマ区切りで一つひとつ列挙する必要がありました。クラスの種類が増えるたびにセレクタも書き足す必要があり、地味に手間がかかっていた部分だと思います。
「クラスプレフィックスセレクタ」を使うことで、こうした列挙作業をせずに、プレフィックスを指定するだけで関連するクラスをまとめて対象にできるようになるとのことです。
.btn-で始まるクラスを全部まとめて指定できるって、地味だけどかなり嬉しい変化です。特にコンポーネント数が多いプロジェクトだと、これだけで記述量がぐっと減りそうな気がしています。
なぜこの機能がありがたいのか
Webデザイナーやフロントエンドの実装を担当している人にとって、クラス名の設計は避けられない作業のひとつです。「BEM」や独自の命名規則を使っている現場では、card-header、card-body、card-footerのように、同じ接頭語を持つクラスが自然と増えていきます。
そうしたクラスに対して、共通のスタイル（余白の調整やフォントサイズなど）を当てたい場面は意外と多いものです。今までは律儀にカンマで並べるか、あるいは親要素側にクラスをつけて子孫セレクタで対応するか、といった工夫が必要でした。
「クラスプレフィックスセレクタ」があれば、命名規則がしっかりしているプロジェクトほど恩恵を受けやすいのではないかと思います。逆に言えば、クラス名の付け方が整理されていないと、この機能のメリットを活かしにくいかもしれません。
個人的には、この機能が使えるようになったら、これまで以上に「クラス名の一貫性」を意識するようになる気がしています。技術の進化が、設計の見直しを促してくれるパターンですね。
実務での使い方をイメージしてみる
例えば、ボタンのバリエーションをまとめて管理したい場合、共通の「padding」や「border-radius」を一括で指定できれば、コードの見通しが良くなります。個別の色や装飾は別途上書きする形にすれば、保守性も上がりそうです。
また、レスポンシブ対応のクラス（sm-、md-、lg-など）が多いプロジェクトでも、この機能が役立つ場面は多いのではないでしょうか。ブレイクポイントごとに散らばっていたスタイル指定を、少しシンプルに書けるようになるかもしれません。
ブラウザ対応状況には注意が必要かも
新しいCSS機能ということもあり、実務にすぐ導入できるかどうかは、ブラウザの対応状況を確認してからの方が安心だと思います。仕事で使う場合は、対象ユーザーの環境やプロジェクトの要件に合わせて、慎重に採用を検討したほうが良さそうです。
新機能はワクワクしますが、案件で使うときは「まずは検証環境で試す」を徹底したいところです。特にクライアントワークだと、ブラウザ対応は地味に重要なチェックポイントだったりします。
さいごに
地味に感じるかもしれませんが、こういう「ちょっとした書きやすさ」の積み重ねが、日々の実装のストレスを減らしてくれるのだと思います。対応状況を見ながら、機会があれば気負わず試してみたいと思います。
