スタイル修正で注意すること - 雑魚い技術ブログ

何を隠そうこのブログのスタイルをいじっていた時にハマった原因を記します。

追加の思考に偏った
要件認識の視野が狭かった

こんなHTMLがあったとします。

<body>
  <div class="link-box">
    <div><a>LinkBox</a></div>
    <div class="link-box-contents">
      <a>home</a>
      <span class="link-box-first-child">
        <a>blogs</a>
      </span>
      <span class="link-box-second-child">about</span>
    </div>
  </div> 
</body>

<style>
a {
  color: green;
  cursor: pointer;
}
.link-box-contents, .link-box-contents>a {
  color: blue;
}
</style>

表示するとこうなります。

初期状態

blogsの文字色も青にしたい場合どうしたら良いでしょうか？

ひとまずblogsの親要素のクラス、.link-box-first-childを追加。

.link-box-contents, .link-box-contents>a, .link-box-first-child {
  color: blue;
}

結果：変わらず

あれ、ダメなのか。じゃあ愚直に書いてやんよ。

ということで直下のaタグを決め撃ち指定。

.link-box-contents, .link-box-contents>a, .link-box-first-child>a {
  color: blue;
}

結果：完成形

できたけどスタイルの冗長感なんとかしたい。。。

ということで、やりたいことを今更整理してみる。

→.link-box-contents内のaタグを全部青にする。とシンプルに考えると、だいぶスッキリ。

.link-box-contents, .link-box-contents a {
  color: blue;
}

結果：完成形

所感・覚書

プロジェクトのスタイルシートがなぜ冗長になりがちなのか分かった気がしました。

以下、覚えとこうと思います。

見た目を修正するとき、追加の思考に偏りがち
プログラムと同じく、今あるものを再利用・活用できないか？という視点も必要
視野を広げてやりたいことを整理してみるとヒントになるかも
- 今回なら「blogsを青にする」→「.link-box-contents内のaタグを全部青にする」