前回の投稿から約１ヶ月が経過し、現在は主にPHPに関するカリキュラムを受講しています。すると、１ヶ月前に比べてできることはかなり増えましたが、CSSに関しては忘れている事項も多いことに気がつきました。
そこで今回、カリキュラムの一環として、「半田惇志(2020) 『CSS設計完全ガイド 詳細解説＋実践的モジュール集』 技術評論社」を読んでみました。
CSSに関して忘れていたことだけでなく、過去のモヤッとした知識がクリアになったように思えたので、以下にその内容と感想を、抜粋してまとめました。
エンジニア歴1週間→１ヶ月の成長が書かれているものとしてご覧いただけますと幸いです。
細心の注意を払っていますが、稚拙な文体であること、用語の解釈に誤りがあるかもしれないこと、本書の内容や主張を代弁しているわけではないことにつきましては、予めご了承ください。
CSS設計の意義
CSSは、文章構造（HTMLなど）とスタイルを分離するために開発され、CSSのおかげでスタイルの変更が容易になりました。
しかし、PHPに触れてみて思ったことは、ページ数が多すぎてCSSの該当箇所がわかりづらい、ということでした。以前CSS設計について学びましたが、新しく学ぶPHPでいっぱいいっぱいだったので活用できていませんでした。現在約10ページのPHPに触れている段階でそのような状態なのですから、ページが増えれば増えるほどとてもわかりにくいコードになってしまうと感じました。
また、CSSはグローバルスコープしか持っていないため、スタイリングが増えれば増えるほどCSS同士が相互に干渉する可能性が高くなります。
さらに、現在は複雑でリッチなウェブサイトが求められているので、上記の問題点やエラーがとても起きやすい状況だといえます。
したがって、いかにCSSをわかりやすく保つかが大事になってきます。そこで、このCSSを、 抽象化し、分ける ことがCSS設計の意義だといえます（１ヶ月前よりもCSS設計の重要性を深く理解できました）。
カスケーディング
単純セレクター・擬似要素・結合子といったセレクターが存在する中で、それらの優先度順で適用するスタイルを決定する規則のことをカスケーディングと言いますが、その優先度は、
1 重要度（!importantなど）
2 詳細度
3 コードの順序 { 後のコードが優先。:where()などを使うと強制的に後勝ちにできる。(前回の記事を読んでいただいた方に教えていただきました。) }
となっています。
詳細度に関しても、
1 IDセレクター（#headerなど）
2 擬似クラス・属性セレクター・クラスセレクター
3 要素型セレクター（pなど）
となっています。
そして、同じ優先度のセレクターをいくら用いても、同じ優先度のセレクター同士では優先されても、一つ上の優先度のセレクターより優先されはしません。
したがって、CSS設計を行うためには、 カスケーディングを理解し、管理できるようになる 必要があります。詳細度の確認に便利なサイトもあるので、それも用いながらわかりやすいCSSを書けるようになりたいです。