はじめに
こんにちは。
システムチームのプログラマーのTです。
自分は現在、デキテルで今後利用できるようになるデザインのコーディングのタスクを行っております。
自分は今回でコーディングのタスクは4回目となりますが、いまだに苦戦しています。
そこで、今後のために、これまでのCSSコーディングで学んだ内容を振り返ろうと思います。
①上から外からコーディングする
見出しにある通り、CSSコーディングは上から外から行うことが大事です。
これは、100×100のマス目を紙に描くときに、
大枠の四角形を描いてから、縦と横に線を引いて描くのと根本は同じです。
外側のプロパティ指定がその内側に対して影響を及ぼすため、外側からコーディングすることが大事になります。
CSSの継承についてまとめてある記事を共有しますので、こちらを読むと理解が深まると思います。
https://ascii.jp/elem/000/001/541/1541423/
外側から、内側へというやり方と逆のやり方で進めると、最終的に破綻します。
先ほどの例でいえば、大枠の四角形を先に描かずに、マス目を順番に描いていく進め方をしていると考えればよいでしょう。
書き直しが多くなって、ガタガタのぶさいくなマス目が描きあがることが想像できるかと思います。
②セレクタ指定の詳細度は浅いほど良い
不具合を出さないようにするための最良の方法は、書かないことです。
もっと厳密にいうなら、書く量を少なくすることです。
そのためにできることは、
①の項目で触れた継承の活用
と
見出しにある通り、セレクタ指定の詳細度を浅くすることです。
詳細度を浅くするということは、CSSの記述の適用範囲を広くするということです。
#hoge .hoge のような指定が詳細度が浅い状態です。
上記はidがhogeの内側にあるhogeというclassを持つ要素すべてにあたるセレクタ指定です。
逆に詳細度を高くするということは、CSSの記述の適用範囲を限定するということです。
#hoge #hoge1 #hoge2 #hoge3 のような指定が詳細度が高い状態です。
このような指定を繰り返すと、要素の数だけ、CSSの記述が増えます。
記述量が増えるということは、管理できずに記述の漏れ等を起こし、不具合につながります。
このことから、
書く量を少なくするためには適用範囲を広げれば良い、
ということは、セレクタ指定の詳細度を浅くすれば良い
ということが理解できるかと思います。
おわりに
他にももっと学んだことはあるのですが、今回は主要な２つの内容についてまとめました。
