前回の投稿から約１ヶ月が経過し、現在は主に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を書けるようになりたいです。
わかりやすいCSSに必要な４つのゴールと８つのポイント
わかりやすいCSSに必要な４つのゴールについては、前回の記事でも触れましたが、
1 予測できる
2 再利用できる
3 保守できる
4 拡張できる
の４つがあります。
それらを実現するために必要な８つのポイントが、CSSの設計手法では用いられています。具体的には、
1 特性に応じてCSSを分類する
2 コンテンツ(HTML)とスタイリング(CSS)が疎結合である(依存していない)
3 影響範囲がみだりに高くない
4 特定のコンテキストにみだりに依存していない
5 詳細度がみだりに高くない
6 クラス名から影響範囲が想像できる
7 クラス名から見た目・機能・役割が想像できる
8 拡張しやすい
の８つです。
本書は、実務で使用されているCSSの設計手法を解説する際に、８つのポイントにも触れながら解説してくれています。かなりの量のため理解しきれていませんが、私の言語化の練習として、具体例を少しだけ紹介します。
１の具体例：フォント指定のようなサイト内で共通のものはbody要素に適用
２の具体例：要素型セレクター（pなど）をCSSに使用しない
３の具体例：子セレクター（div > p）などを用いて影響範囲を狭くする
４の具体例：IDセレクターをみだりにつけない
５の具体例：クラスセレクターを活用する
６の具体例：親クラスの名前を＿などを用いて子クラスにも継承させる
７の具体例：役割に応じてクラス名を変更する（.media .listなど）
８の具体例：マルチクラス設計を採用する（１つの要素に２つ以上クラスをつける）
これらの注意点を反映したコードがこちらになります。１ヶ月ほど前に書いたコードをFLOCCSを使って修正してみました（誤った箇所あればすみません
）。
<body>
<header id=header class="l-header"><!--７の具体例-->
<h1 class="l-header__title"><!--６・７の具体例-->
<a href="#"><img class="l-header__img" src="./img/logo.svg" alt="Profile"></a><!--６・７の具体例-->
</h1>
<nav class="l-nav"><!--７の具体例-->
<ul class="l-nav__ul"><!--６・７の具体例-->
<li class="l-nav__li">
<a href="#about">About</a><!--６・７の具体例-->
</li>
<li class="l-nav__li">
<a href="#bicycle">Bicycle</a><!--６・７の具体例-->
</li>
</ul>
</nav>
</header>
<!--省略-->
</body>
/* 1の具体例 */
body {
width: 100%;
color: black;
font-size:0.9rem
}
a{
text-decoration: none;
}
img{
max-width: 100%;
}
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
width: 32%;
}
/* ４の具体例 */
.l-header {
display: flex;
height: 60px;
margin: 0 auto;
padding: 0 15px;
align-items: center;
justify-content: space-between;
max-width: 960px;
}
/* ２・５・８の具体例 */
.l-header__title .l-header__img{
float: left;
height: 40px;
width: 120px;
}
.l-nav .l-nav__ul {
float: right;
display: flex;
padding: 10px 0;
}
.l-nav .l-nav__li {
margin-left: 30px;
font-size: 14px;
}
ヘッダー部分だけですが、こんな感じでしょうか。具体例３はもっと勉強して使えるところを考えます（具体例２と競合するので難しい・・・）
これ以降の本書の内容は、CSS設計手法の中でもBEMとPRECSSにフォーカスして、具体的なコードやスタイルを解説してくれています。こちらに関しては、使いこなせるようになったら次回以降の記事で紹介したいと思います。
まとめ
長くなりましたが、ここまで読んでいただきありがとうございました。
今後チームでホームページを作成していくにあたり、CSS設計に関して思い出すことができただけでなく、私のCSS設計の指針を定めることができた機会として、本書は最適だったと感じました。
まだ理解しきれていない箇所もたくさんありますので、業務と並行して読み進めていき、CSS設計をWordpressなどにも活用できるように頑張ります！
参考文献