エンジニアの第一線で活躍しようと志し、現在カリキュラムを学習をさせていただいている者です。
この1週間模写コーディングをしながら、WEBページの作り方を学んでいますが、カリキュラムとして「谷 拓樹(2014) 『Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法』 インプレス」を読む機会がありました。
下記に、エンジニア歴1週間の人間の視点から、この本を読んで学んだこと、感想を備忘録的に抜粋してまとめていきます。
専門知識がほとんどないため、文章がかなり稚拙になっています。用語の解釈にも誤りがあるかもしれません。また、あくまで私個人が学んだこと、感想であり、この本の内容、主張を代弁しているわけではない点につきましても、予めご了承ください。
cssにおける設計とは
さまざまな人がコード設計に携わるため、また複雑・リッチなWEBサイトが求められているため、誰がみてもわかりやすいコードを作る必要があります。
そのためには、
1. コードを変更しても期待通りの変化が起こせるか（予測しやすい）
2. 再利用しやすいコードになっているか
3. 新しいコードを追加した時に、それが古いコードに支障をきたさないものか（保守しやすい）
4. 後から拡張しやすいコードになっているか
これらを満たすコードを書く必要があります（これらが守れないと破綻しやすいcssになってしまう）。
破綻しやすいcssの特徴
- クラスを使わず、htmlのタグにcssを適用させている（書く量が増え、タグを変更したい時にcssも変更しなければならない）
→自分はcssのコードを書く際にhtmlの属性をめちゃめちゃ使っていたので、クラスを積極的に使えるようにしたいと思いました。 - pxのような絶対値を多用している（一つの文字の大きさを変更しただけで全体の視認性が崩れるため、すべてのpxを変更しなければならなくなる）
→pxをめちゃめちゃ使っていたので、emなどの相対値も使えるように学習していきます。
→小さな変更が大きなバグに繋がることがあるので、修正しやすいcssを書く必要があります。
cssの基本を振り返る
修正しやすいcssを書くために、cssの基本を押さえておく必要があります。下記に、自分なりの気づきとともにまとめてみました。
-
後に書いたコードが、前に書いたコードを上書きする
←めっちゃ重要。メディアクエリを実装して、スマホ版のレイアウトを作る時、大事なことは先に書こうと思っていたので、メディアクエリのコードが一切適用されず、何度も先輩に相談し、時間がかかってしまった。 -
セレクタの詳細度の理解
詳細度は
1. !important（意図的に使うならOK。使いすぎ＝破綻。私も使って注意されました...）
2. htmlのstyle属性（htmlにスタイル変更のコードを書くよりcssでスタイル変更を一元化したいので、避けた方が良い。使ったことはないですが）
3. IDセレクタ（＃を使って記述。現実的に使える一番詳細度の高いセレクタ。一度使ったIDは同一ドキュメントでしか使えない。一要素にIDは一つだけみたいなもの）
4. クラスセレクタ（.を使って記述）属性セレクタ（[ ]を使って記述。使ったことはない）擬似クラス（:first-childなど）
5: 要素セレクタ（htmlの<>の中に記述されている、いわゆるタグ。p・li・a・h1などたくさん。cssでは無印）擬似要素（::afterなど）
6: ユニバーサルセレクタ（*を使う。すべての要素に変更を加える。）
私はよく、
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "游ゴシック", sans-serif;
}
これで全体の余白を整えたり、フォントを指定したりしています。
- 詳細度の計算について
基本上記の強さ順にコードが適用されるが、３〜５番のセレクタに関しては、書いたセレクタの数だけ強さが１ずつ増えていくイメージ。
感想：セレクタめっちゃ多い！！ややこしい！！
1週間プログラミングしてみてそう感じましたが、その上でこの本を読んで学んだことを下記にまとめます。
- 要素セレクタは、詳細度を上げるだけなので、基本cssでは省略できるところは省略する！
- クラスセレクタを活用しよう！
例えば、
以前私が書いたコード
nav li a{
color: white;
}
この”li”要らなくない！？
そもそもクラスをhtmlで割り当てればクラスセレクタ１つで済むのでは？
どうしても書きたければコメントで表現して煩雑なコードを避けよう！
...といった気づきを得ました。
- 不等号を用いた子供セレクタで、冗長化や事故を避けよう！
先程のコードを
nav > li > a{
color:white
}
に変更すると、詳細度が押さえられ、他のコードの詳細度を上げる必要がなくなるだけでなく、他のaタグにも影響しないので事故が抑えられるようです。今後ぜひ参考にしたいです!
コンポーネント
修正しやすいcssを書くうえで大事なことで、ここまで学んできたことをざっくりまとめると、
・冗長になりすぎないコードを書くこと
・他の要素に影響しないコードを書くこと
こうなりました。
これらを実現させるために、コンポーネントを意識したコードを書く必要があります。
コンポーネントには、さまざまなアイデアがありますが、私はその中でも「BEM」をおすすめします。これを使うことで、煩雑になりやすいクラスセレクタを、一目で役割がわかる&他に影響しにくいコードが書け（ると信じて）ます！
詳しくは、下記に記載するサイトの方の記事が大変参考になりましたので、共有させていただきます。
まとめ
今までは、とりあえず理想の形に近づけようというスタンスで、効率度外視・パワープレーでコードを組んでいました。
しかし、実務ではさまざまな方と一緒にコードを組んでいくため、効率的で汎用的でローリスクなコーディングが求められていることに気づきました。
そのために必要なことをこの本から学べたと思っているので、まずはカリキュラムを通して実践していきたいと思いました。
参考にさせていただいた本・記事