CSS設計は、スタイルと構造の分離から

2024年4月24日 17:26

書きやすいけど書きにくいCSS。トレンドの変化や技術の変化も相まって、意外と体系的な学習やステップアップも難しい分野でもあります。
筆者もスクール等で体系的に学ぶことはないまま、自己流で10年以上CSSと向き合ってきましたが、現時点で思う筆者なりの学習方法や現在の設計思想について、ざっくりご紹介しましょう。

SNSで「Web制作」を検索してみると、チラホラ目につくのがCSS設計や命名規則のお悩み。「イケている」とされるWebサイトの誰かが書いたコードを写してみたり、知らなかったプロパティやコードを検索して学ぶことはあっても、体系的に学ぶのも簡単ではないCSSですが、この辺りで筆者の学び方や考え方を整理してみましょう。

現在の設計思想は、変則的なBEM + ユーティリティファースト

過去に何度も触れているように、『Every Layout』の影響を強く受けつつ、我流解釈のBEMに、modifier代わりに近いユーティリティクラスを掛け合わせた設計を取り入れています。
Every Layoutから取り入れた基本的な構造物で賄えるものはそのまま賄い、隙間やフォントの太さ、text-alignや右揃え、左揃え、背景色とテキストカラーぐらいはユーティリティで対処した方が命名規則も単純で、都度考えることが少ないという利点があります。
どうしてもコンポーネントとして持っておいた方が良さそうな、header関係やfooter関係、sidebar周り、必ず出てくる表組やリスト表示といった部分を抽出して、別途スタイルを当てていると言った使い方です。

「スタイルと構造」の分離という観点からすると、ノーマライズや一般的なリセットCSSではなく、強めのリセット、

*:where(:not(iframe,
canvas,
img,
svg,
video,
svg *)) {
  all:unset;
  display:revert
}

を冒頭で書き、ブラウザやセレクタが持つスタイルを強制的に分離しているので、input周りのappearance（例えば、テキスト入力の枠やボタンの外形、ラジオボタン、チェックボタンの見た目など）もゼロから改めて書く必要があります。

セレクタに依存しないというのは利点ですが、スタイルが全く割り当てられていないセレクタ、タグも出てくるので、上手にコントロールできる環境下でないとオススメはしにくい方法です。

Every Layoutを軸に、BEMの御作法も踏襲しつつ、ヘルパークラスを盛りすぎない程度のユーティリティファーストにすると、機能や意味とスタイリングや命名規則の関係や関心を分離させやすいので、Bootstrap等を書き慣れた人には良い方法かもしれません。

まずは、BEMとBootstrap？

CSSやCSS設計を体系的に学びたいという方は、まずはBEMやBootstrapに触れるのが良いでしょう。
現在色んなCSS設計、思想はありますが、どれも考え方や書き方のベースというのはBEMの発展や反発から来ている傾向があり、現場で用いられる命名規則やユーティリティファーストに近い設計という観点では、いきなりTailwind CSSに飛びつくよりは、採用されている場面も多いBootstrapから学んだ方が、その長所や短所も把握しやすいでしょう。

BEMやCSS設計の詳しい部分は、『CSS設計完全ガイド』

や『Web制作者のためのCSS設計の教科書』

関連として『Atomic Design』

その他、「CSS設計」のキーワードで出てくる各記事、諸先輩方にお任せするとして、BEMの何を身につけておくべきなのかというと、その「堅牢さ」とBlock、Elemment（≒子要素）、Modifier（≒バリエーション）の3要素という考え方。

何らかのClass、もしくはidを割り振ったコンポーネントが存在し、それに対する内容物や子要素、また色違いやサイズ違いといったバリエーションがある、という考え方はほぼどの設計思想でも出てきます。BEMは書き方が硬い不自由さも、型を学ぶという観点からは非常に良い訓練です。どうしても長くなりがちな部分は、分かりやすい短縮形を考えたり、blockの部分を省いたSplit BEM

みたいな発想もあるので、守破離の初期段階を突破した、ある程度身についたなと思ったら、自分なりのスタイルを検討して良いと思います。身につくまでは、基本に忠実に書きましょう。

Bootstrap

に関してv4以前はユーティリティファーストとは言えませんでしたが、「スタイルと機能の分離」や、v5以降のユーティリティファーストの場合、どういうふうに考えればいいかのヒントが詰まっています。smやmd、lgといったサイズ感や表記も、他のフレームワークや思想でも転用できるでしょう。
現在はv5.3.0と歴史も古く、公式ドキュメントや私的なチートシート、採用サイトも豊富なので、困った時や迷ったときの解決策も、比較的見つけやすいのでは。

総じて、CSS設計について情報技術系の教本としてはコードが動かないこともある2年以上前のやや古いものであっても、書籍を通じて体系的に学びつつ、BEMやBootstrapの型を学び、守破離を段階的に踏んでいくのが最適解の一つだということ（ただし、向き不向きや諸説もあり）です。

BEM以外、ユーティリティファースト以外も学んでおく

BEMやBootstrapをある程度学んだら、BEM以外の考え方や書き方、ユーティリティファーストでない手法も勉強しておきましょう。BEMだと都合が悪い、あるいは使い勝手が悪いと発展してきた各種CSS設計も、他流派として学んでおく価値はあります。
また、ユーティリティファーストをはみ出して、コンポーネントや構造物としてCSSプロパティをまとめて書く方法を身につけておくのも、ユーティリティファーストに向いていない部分のスタイリングが出てきた場合に役に立ちます。

ただし、どちらの場合もきちんと型を身につけてから。守破離の「守」を徹底的にやらず、色んなものを中途半端に学んでも何も実りません。きちんと型を学び、型を破ったタイミングで他流派の思想、手法を取り入れるようにしましょう。型なしと型破り、同じに見えて全く異なりますから、要注意です。

コンポーネントや、特定のコンポーネント向けmodifierは最小限に

「どうしてもそのコンポーネントが必要」という場面以外は、共通の構造物やユーティリティで構成、設計するやり方を採用すれば、そのコンポーネントの場所や意味をその都度考えて時間を取られることが少なくなります。「何でその名前を付けたんだっけ」というのも減り、再利用性も向上する可能性が高まります。

modifierも極力ユーティリティで賄っておくと、そのユーティリティは他でも使う可能性が出てくるので、再利用性を高められます。!importantの乱用を避けることにも繋がります。（!importantがゼロの場合、そのまま、AMPでも使えるCSSにもなる？）

コンポーネントを余計に増やさない。
増やす場合はスタイルと機能の分離、意味の分離を心がける。そうすると、命名規則も悩むことが減るでしょう。命名規則をどうするかは、Bootstrapを参考にすると良いのでは。自分流のスタイルでルールを設定し、接頭語をつける方法もオススメです。

CSSの肥大化を避けたら結局、ユーティリティファーストへ着地する

再利用性やメンテナンス性を考慮すると、最終的にはプロパティごとにスタイリングするユーティリティファーストな書き方に着地するのは仕方ないのかな、という感覚です。好みかどうかに関わらず、「そういうもん」なのかな、と。
ただ、スタイルと機能の分離、意味や関心の分離という観点から見ても、一定の構造物とユーティリティファーストなやり方は理に適っている、強引に分断して命名規則を考えるというスタイルに帰結するのもそれほど悪くないのでは、という気もします。

ぜひ、使い勝手が良いとは限らないBEMの書き方をしっかり学んで、「どこからがBlockか？」とか、「どこまでmodifierに持たせるか？」とか、「長すぎる名前」、「再利用しにくい名前」といった悩み、失敗を積み重ねてから、ユーティリティファーストに落ち着くよね、という境地へ至ってください。急がば回れ、近道厳禁、で。

今後も「お役立ち情報」をお届けします

BLUE B NOSEでは今後も、どんなCSSの書き方が最適なのか、再生産性や再利用性が高いのか、その都度自分たちでこねくり回して、最適解を検討し続ける予定です。そんな試行錯誤を通じて得たナレッジやtipsの共有、独自視点でのお役立ち情報をお届けしますので、もしよろしければ当アカウントのフォローや、HPのチェックもお願いします。

この記事が気に入ったらサポートをしてみませんか？