イマドキのCSSを学ぶ難しさ

Web制作をやる上で欠かせないCSSですが、柔軟な上に進化が速く、学び始めの時に難しいと感じました。何が難しかったのか自分なりにまとめてみたいと思います。

CSSのおさらい

カスケーディングスタイルシートのことですね。HTMLの見た目をCSSで行うことで、コンテンツ（HTML）と見た目（CSS）を切り離して管理できるという仕組みです。名前に「カスケーディング（継承）」と入っているように、指定したルールを親要素から子要素に継承しながら記述できるのが特徴です。

書けば見た目にすぐ反映されるので、覚えたプロパティをどんどん使ってデザインを仕上げていきたくなります。ですがサイトの規模が大きくなってくると、継承されたルールが意図しない場所に適用されてしまうなど管理が難しくなっていきます。

自分で作ったルールがあとあと破綻しないように「設計」しながらCSSを作成するのが重要になります。

CSSと設計

CSSの設計手法としてSMACSSやBEMなどのさまざまな方法が考案されてきました。どれも独自の命名規則を持っていて、その命名に沿ってスタイルを当てていきます。

これらの設計手法を初めて使うときはなんだか窮屈に感じると思います。ちょっとしたパーツでも設計手法に沿って命名しようとするとやたらと命名に悩んだりして、使わない方が速いような気になってきます。

しかしこうした設計は開発がある程度進んできたときに効果を発揮します。自分で自由に書いていたものと比べて、後からの変更に強く破綻しにくいと気づくことが多いです。未来の自分への気遣いと思って頑張って使っていくと良いです。

一体どの規則がいいの？と最初は悩むでしょう。どれもよいのですが、個人的には設計に慣れないうちはBEMが良いのではと思います。要素の意味を考えるよりもコンポーネント化することに特化しているので、小さな単位ですぐに効果を実感できると思うためです。慣れてきたら少しずつ他の設計にも手を出してみてください。

JSXとCSS設計

Webサイトを作るエンジニアは、HTMLとCSSが切り離されているべき、という考えで制作をしてきました。ただ昨今ではそれが少し変わりつつあります。アプリケーションUIを作るフロントエンド技術でWebサイトも作るというフレームワークが台頭したためです。

そうしたフレームワークが採用しているのは、JSXと呼ばれる HTML / CSS / JavaScript をひとまとめにしたコンポーネントを組み合わせてWebサイトを作る手法です。これはHTMLとCSSを切り離して考えていたこれまでの考えとは違いますね。小さな単位でWebサイトの部品を作ることで、変更や拡張に強い柔軟な開発が可能になりました。

こうした開発スタイルに合わせ、CSS設計の代わりに別途デザインシステムを作ってルールを参照するという開発・デザイン手法が増えています。

こうなるとこれまでのCSS設計とは違う考え方が必要になります。最近のWeb上の情報では、従来のCSS設計とコンポーネントベースのCSSの話が混在しているので、やみくもに情報を収集しても効率が悪くなりがちです。

どのような設計で制作したいかを意識しながら情報を集めることで、体系的な知識が得られると思います。まずは命名規則を一度体験してみて、その後でJSXベースの開発に応用していくような習得ルートが良いのではないでしょうか。