Web制作スクールを卒業して制作会社に入ったばかりの頃、実務のコードを見て驚いたことがいくつもありました。
その中でも、最初に「これは何だろう？」と思ったのが、CSSのセレクタの当て方です。
スクールでもCSSはかなり勉強していましたし、BEMやFLOCSSを使ったコーディングも学んでいました。
それでも、実際の制作会社で既存サイトのCSSを開いたとき、今まで見たことのないような書き方が出てきました。
「セレクタ、こんなに深く指定するの？」
「どこまでたどれば、この要素にたどり着くんだろう？」
実務経験の浅かった私は、かなり戸惑ったのを覚えています。
今回は、Web制作会社に入って最初にぶつかった「CSSセレクタの指定」について、当時感じたことや、実務を通して分かってきたことを書いてみたいと思います。
Web制作スクールでは、できるだけ管理しやすく、ほかの要素に影響しにくいCSSを書くことを意識していました。
例えば、クラスを使ってシンプルに指定するような書き方です。
.header__link
.service__title
.card__text
私が通っていたスクールでは、BEMやFLOCSSといったCSS設計についても学びました。
そのため、必要以上にHTMLの階層に依存せず、クラス名を使って対象の要素を指定することが多かったです。
例えば、
.header .nav ul li a
のようにHTMLの構造を何階層もたどるのではなく、対象となる要素にクラスを付けて、できるだけシンプルに指定する。
そんな書き方に慣れていました。
制作会社に入って既存サイトの修正をするようになり、初めて実際の案件のCSSを見たときのことです。
そこには、私がスクールや前職ではみた事のない、階層の深いセレクタがたくさん書かれていました。
例えばイメージとしては、次のような書き方です。
.header .inner .navigation ul li a span
さらに、ページによっては特定の親要素から何階層も指定されていることもありました。
当時の私は、
「こんなに長く書いていいんだ……」
「スクールで見てきたCSSと全然違う」
と驚きました。
そして一番困ったのが、どのCSSがどの要素に影響しているのか、すぐには分からなかったことです。
さらに戸惑ったのが、自分でCSSを書いても思ったように反映されないことでした。
例えば、ある文字の色を変更したくて、新しくクラスを指定してCSSを書きます。
しかし、ブラウザで確認すると変わっていません。
「ちゃんとクラス名は合っているのに、どうして変わらないんだろう？」
最初は原因が分かりませんでした。
そこでデベロッパーツールを確認してみると、既存のCSSにもっと詳細なセレクタが指定されており、そちらのスタイルが優先されていました。
ここで実務に入って改めて意識するようになったのが、CSSの詳細度（specificity）です。
CSSでは、同じ要素に複数のスタイルが指定されている場合、セレクタの種類や詳細度などによって、どのスタイルが適用されるかが決まります。
スクールでも知識としては学んでいました。
ただ、実務で実際に「CSSを書いたのに効かない」という状況に何度も遭遇することで、初めてその重要性を実感しました。
例えば、単純に、
.button
と指定するよりも、
.content .area .button
のように複数のクラスを組み合わせたセレクタの方が、詳細度は高くなります。
そのため、既存サイトを修正するときには、ただ新しいCSSを書けばいいわけではありません。
といったことを確認する必要がありました。
最初は、「どうしてこんな書き方をするのだろう」と不思議に思っていました。
しかし、いくつかの既存サイトに触れるようになって、少しずつ理由も見えてきました。
制作会社が扱うサイトは、必ずしも自分たちが最初から作ったものばかりではありません。
など、さまざまな背景があります。
その中で、「このページの、この場所だけ変更したい」という修正を繰り返していると、ほかの部分に影響を出さないためにセレクタが追加され、結果として指定が深くなっていくことがあります。
もちろん、セレクタを深くすることが常に良いというわけではありません。
むしろ、新しくサイトを作るのであれば、できるだけシンプルで管理しやすいCSSにした方が、後から修正しやすくなります。
ただ、実務では理想的な状態のコードだけを触るわけではないということを、このとき初めて知りました。
スクールでは基本的に、自分で新しいサイトを作ります。
HTMLもCSSも自分で書くため、自分が理解しやすい構造にできます。
一方、制作会社では既存サイトの修正を依頼されることも少なくありません。
その場合、自分が書いたコードではないものを読み解くところから始まります。
これが、スクールと実務の大きな違いの一つだと感じました。
実務では、
「自分ならこう書くのに」
と思っても、既存の構造をすべて作り直せるわけではありません。
現在のHTMLやCSSの構造を確認し、そのサイトにできるだけ影響を与えない方法で修正する必要があります。
これはスクールの課題だけではなかなか経験できなかった部分でした。
セレクタで何度も苦労したことで、デベロッパーツールを見る習慣もつきました。
CSSが思ったように反映されないときは、闇雲にコードを書き足すのではなく、まず対象の要素を確認します。
こうしたことを確認するようになりました。
最初の頃はデベロッパーツールを開いても情報量が多く、「どこを見ればいいの？」という状態でした。
しかし、何度も既存サイトを修正しているうちに、少しずつ見るべき場所が分かるようになってきました。
実務を経験して感じるようになったのは、CSSはその場で見た目が整えば終わりではないということです。
そのサイトは、半年後や数年後に別の人が修正する可能性があります。
セレクタを必要以上に深くしてしまうと、あとからCSSを変更するときにさらに強い指定が必要になり、管理が難しくなることがあります。
そして、
CSSが効かない
↓
さらに詳細なセレクタを書く
↓
また別の場所で効かなくなる
↓
さらに強い指定を追加する
という状態になってしまうこともあります。
そのため、新しくCSSを書くときには、必要以上に詳細度を上げないことも大切だと感じています。
制作会社に入ったばかりの頃は、実務のコードを見るたびに、
「スクールで勉強した書き方と違う」
と戸惑っていました。
しかし、実務を経験して分かったのは、スクールで学んだことが間違っていたわけではないということです。
BEMやFLOCSSなどを使って、クラスの役割を分かりやすくし、保守しやすいCSSを書く考え方は、今でも大切だと思っています。
一方で制作会社では、すでに存在しているコードを読み、そのサイトの作り方に合わせて修正する力も必要になります。
新しくきれいにコードを書く力と、既存のコードを読み解いて修正する力は、少し違うスキルなのだと思います。
Web制作会社に入って最初に驚いたことの一つが、階層の深いCSSセレクタでした。
スクールでは比較的シンプルで管理しやすいコードを書くことが多かったため、実際の既存サイトを見たときはかなり戸惑いました。
しかし、その経験から、
といったことを意識するようになりました。
スクールでは、自分でゼロからサイトを作る力を身につけることができました。
制作会社に入ってからは、それに加えて「誰かが作ったサイトを読み解く力」が必要だということを学びました。
当時は見たことのないコードに戸惑うことも多く、「自分はまだ全然分かっていない」と焦ることもありました。
それでも、一つずつ調べながら修正を繰り返すことで、少しずつ分かることは増えていきました。
まだまだ偉そうなことは言えないのですが、スクールを卒業して制作会社へ入ったばかりの方が、同じように実務のコードを見て戸惑ったときに、「最初は分からなくても普通なんだ」と思ってもらえたら嬉しいです。