CSSについて深く理解するなら必読な本！『CSS設計完全ガイド』

Web制作を進めていく中で、CSSの設計手法に関してBEMを使うのが主流といった言葉を聞いたことはありませんでしょうか。一度学んだ言語をまた学びなおすのか…と億劫に感じるかもしれませんが、これを学ぶことは必須中の必須と言えます。１人で開発をするならまだしも、チームで開発を行う際に書いてあるコードに規則性がなければ何を書いているのか解読するところから始めなければなりません。そうならないために、世界で使用されている設計手法を学べるのが本書となります。

この本で学べること

この記事を読んでくださっている方は、HTMLのクラスの付け方に関して規則性をもっているでしょうか。他の人が見ても見通しの良いコードを書けていますか？CSSを適用する際に、指定方法というのは色々ありますよね。タグで指定したり、IDで指定したり、はたまたClassで指定したり。

CSSには優先度というのもあって、どうやって適用させていくのかを考えながら実装を進めなければ途中で上手く適用されなかったりします。

そんな、人によって十人十色なCSSの書き方を、世界の頭の良い人たちがある程度のルールを決めて共通の書き方をしようと定めました。

その数ある手法の中から、使用されている割合が高いものに絞って解説してくれているのが本書です。

良いコードとは？

本書では、CSS設計のポイントとして下記の８点が挙げられています。

1. 特性に応じてCSSを分類する。
2. HTMLとスタイリングが疎結合である。
3. 影響範囲がみだりに広すぎない。
4. 特定のコンテキストにみだりに依存していない。
5. 詳細度がみだりに高くない。
6. クラス名から影響範囲が想像できる。
7. クラス名から見た目・機能・役割が想像できる。
8. 拡張しやすい。

詳細な説明は本書を読んでもらえればと思いますが、上記８点を遵守することを前提条件として、4つの設計手法について解説されています。

• OOCSS
• SMACSS
• BEM
• PRECSS

こちらも詳細は省きますが、上2つが基礎となっている設計手法、下2つが基礎を利用して、世界中で幅広く使用されている設計手法となります。

特にBEMに関しては冒頭でも述べた通り、学習が必須な設計手法の一つです。

本書でも、この4つの中で下２つに関してはかなり事細かに解説されています。

なぜ設計手法を勉強する必要があるのか

勉強することのメリットというよりも、むしろ知らないことでのデメリットというのが大きいです。

例えば、あなたがとあるサイトのリニューアルに携わるとしましょう。その際に、一目コードを見て、これはBEMを使って書かれているな、と理解できるか否かで取り掛かる作業の効率が大きく変わってくるのは想像できるかと思います。

上でも書きましたがCSSの書き方は十人十色です。設計手法を全く知らない人が書いたコードというのは難解になるので、解読するよりも1から作り直した方が早いな、となるケースもあります。

逆にあなたが書くコードが設計手法を意識していなかったとしても同じことが言えます。

そのため、ポートフォリオサイトを作成した際、知識のある方に営業をするとコードの綺麗さというのも見られることがあるそうです。

本書後半の丁寧な解説

設計手法を一通り勉強したらあとは実務で経験を積むだけ、と思うかもしれませんが、いざ自分でコードを書いてみようと思うと手が動かなくなることはプログラミングあるあるだと思います。

しかも、設計手法というのはその通りに書かないとCSSが適用されないといったものではない為、何が正解なのか書いているうちに分からなくなってくるということも少なくありません。

本書の後半では、前半で学んだ設計手法のうち、BEMとPRECSSを元に、実務で活かせる書き方の例を紹介しています。

ボタンを作成する場合や、flex-boxで２カラム以上のモジュールを作成する際のクラスの付け方やCSSの適用させ方、またそれらを組み合わせてサイトに組み込むときのコーディング方法など、ここでは書ききれないくらいに多くのことを学べます。

しっかりと知識を身につけておけば実務にあたるの効率が段違いに上がるうえ、見直すことも容易なので本書を片手に書くというのもおすすめです。

まとめ

いかがでしたでしょうか。この記事は文字ばかりで読みにくかったかもしれません。しかし、ここでは書ききれていない本書の良さはまだまだあります。

500ページほどのボリュームがあり、しかもWeb制作を勉強したての段階では読みきることが容易ではない本書ですが、内容を理解できるようになると自信のコーディングレベルが上がったことが実感できるので、ぜひ早いうちから少しずつでも学習を始めることをお勧めします。

とはいえ、極めようと思うと底が見えなくなってくるHTML、CSSですので、学習はほどほどに実務経験を早く積んで学んでいきましょう。