こんにちは！キャメルです！
今回はCSS設計について解説をしていきます。
HTML、CSSについて一通り勉強したけどもっと理解を深めたい！
このような方はぜひCSS設計について学んでみてください^^
今よりさらに質の高いコーディングができるようになると思います。
CSS設計とは？簡単に解説！
まずは簡単にCSS設計の概要を解説するよっ！
CSS設計の目的
メンテナンスしやすいCSSを書くこと！
Webサイトは公開後も長期間にわたって運用されます。
最初は自分一人で制作、納品まで行ったとしても
他の誰かが更新や修正を行うこともあるでしょう。
そのときに自分にしか理解できないコードではメンテナンスが大変です。
一か所修正すると他のレイアウトまで崩れるんですけど…
このようなことにならないように
メンテナンスしやすいWebサイトを構築しましょう！ということです。
CSS設計の4つの概念とは？
CSS設計を説明するときによく使われる4つの言葉があります。
- 予測しやすい
- 再利用しやすい
- 保守しやすい
- 拡張しやすい
順番に見ていきましょう！
予測しやすい
クラス名などから予測できて期待通りの動きをするかどうか。
「button」というクラス名なのにタイトルが変わってしまった…
タイトルなら「title」とかにしてほしい…
再利用しやすい
一度作ったパーツを他のところでも使える。
さっき作ったパーツと同じだ！使い回そう！
保守しやすい
パーツを使い回したときに新たに追加したところに影響を与えない。
さっきのパーツ使ったらレイアウトが崩れてしまった…
拡張しやすい
他の人が関わったときでも管理できるような形で作る。
誰でも理解できるようなコードを書こう
CSS設計の詳しい内容についてはいろいろな本が出版されていますので
本格的に学びたい方はぜひ勉強してみてくださいね！
最初に読む本としてはこちらがおすすめ▼
設計手法は色々ありますが
僕はこの2つをメインで学びました
- 設計手法：FLOCSS
- 命名規則：MindBEMding
CSS設計を学ぶ3つのメリット
先を考えてコードを書けるようになる
始めたばかりの頃は先のことまで考えてコーディングをすることはなかなか難しいと思います。
デザインを再現するだけで精一杯です…
もちろん最初はそれで当然ですし
むしろデザインを忠実に再現できるだけでも素晴らしいと思います！
でもここからさらにCSS設計を学ぶことで
その場しのぎのコーディングからサイト全体の構造を考えながらのコーディングができるようになる
楽できる
CSS設計を考えながらパーツの使い回しなどができるようになると
コードの記述量も減るし修正も少なくなったりします。
結果として以下のことに繋がります。
- コーディングが楽になる
- 制作時間を短縮することができる
コーディングが楽しくなる
これが僕にとっては最も大きな効果だったんですが
CSS設計を学ぶことで
コーディングの理解度が上がり俯瞰して考えられるようになり
自分で考えてWebサイトを構築している
という感覚が強くなりました。
それによってこれまで以上にコーディングを楽しめるようになりました。
CSS設計を学ぶことでコーディングの視野が広がる！積極的に学ぼう！
今回はCSSのメリットについて解説してきました！
これまでは何となくデザインを再現していただけだったのが
CSS設計を学ぶことで頭も使うようになりコーディングの視野も広くなります！
ぜひ積極的に学んでどんどん取り入れていってくださいねっ
必ずコーディングスキルが上がっていくはずです。
それでは引き続き頑張っていきましょう！
それでは！
