CSS設計の基本を乱暴にまとめる【CSS設計完全ガイド】

CSS設計完全ガイドを読んだ

完全に理解はしていないけど初学者でもなるほどーと思った部分は多かった！

複数の設計手法が紹介されているが、これを全部体得するのは時間がかかりそう

CSS設計完全ガイド　〜詳細解説＋実践的モジュール集【電子書籍】[ 半田惇志 ] 価格：3608円 (2021/4/23時点) 楽天で購入

それらで共通する設計ルールの説明が非常に大事っぽいオーラが漂っているので

まずはここを抑えたい。

ということで、この記事はCSS設計完全ガイドによる

基本的なCSS設計の考え方を抑えるための記録です

なお、自分の頭に刻み込むためにかなりデフォルメした記述になっています

正確性を求める方は本を読んで勉強してください（記事を書いた意味）

何回も同じこと言うなや

一言で言うとこういうことだと思った。

もう少し適切な表現にするとレイアウト・モジュールの中身など修飾する対象をクラスごとに分類して

同じ修飾を違うクラスに跨いで書かないようにしましょうねという話

分類の仕方は設計手法によって違うけど、一定のルールに基づいて分けてCSSを書くことで

予想外のレイアウト崩れやなんかプロパティ効かないんだが…といった事象が起こらないようにしたいですね

要素セレクタは使わない

何度も登場する要素を要素セレクタで修飾すると、後から違う要素をあてたときに

思ってもみないレイアウト崩れが生じる可能性がある

See the Pen
abpPmyb by ao___ (@ao___)
on CodePen.

要素セレクタに対して修飾したとする

ある日HTMLをh2をh3に変えます、でも見た目は今と同じにしてと言われたら

要素セレクタで修正はできない

それぞれクラスセレクタで修飾すれば、簡単に同じ要素に対して違う修飾ができるよねということのようです

セレクタを無駄に呼び出すな

修飾する対象だけをピンポイントに呼び出して書くのが大事だよということですね

極端なたとえを出すと1か所のa要素だけ色を変えようとしているのに

body a{～}

とかで書きだしちゃうとbody内のaタグ全部変わっちゃうよ？？？あかんやろ？？？ということ

どこを修飾しようとしているのか、そこだけを呼び出せるセレクタの指定になっているか自問自答が大事ですね

importantとidセレクタは使うな

詳細度は高くしすぎないように、そのためにidとかimportantみたいな上書きできない書き方はやめましょう

対象と役目がわかるクラス名にして

後から見返したときにこのクラスはどこにかかっているの？何のためのクラスなの？が分かる名前にしましょう

本の中に命名規則とかは書いてあるので繰り返し読もうと思います

マルチクラス設計で書いてほしい

マルチクラス設計とは一つの要素に対して適用したい見た目を複数のクラスに分けて適用する方法のこと

1つのボタンに対して

• 大きさ
• 背景の色
• 文字の色

など複数の修飾をつける必要があるとして、これを1つのクラスセレクタの中で一気に行うのがシングルクラス設計

逆に、大きさの記述をするクラス・色の記述をするクラス、と1つの要素に複数のクラスを付けて修飾するのがマルチクラス設計です

後からページ内の10あるうち2つのボタンの色を変えてくれと言われたとき、マルチクラス設計であれば

色に関するクラスを新しく作って変更したいボタンにだけ適用すればすぐに更新ができます。

シングルクラス設計を使って同じ仕様変更に対応しようとすると

色に関する記述を探して、色を変えて…次のボタンはどこだっけ…と工数がかかり間違えるリスクも上がります

拡張性を担保するためにマルチクラス設計を採用してほしいということのようです

おしまい