仕事で昔の CSS を変更している。つらい。「昔の」といっても、もともとぼくがつくったものではなくて、 Bootstrap の上につくられた謎のテンプレートだ。……とは言え、過去にぼくもそれを拡張したことがあるので、言い訳でしかない。

この CSS の何がつらいかというと、適用範囲への無頓着さだ。個別の装飾を、全体の装飾として使用していることだ。

たとえば、要素セレクタ h1 や無神経なクラスセレクタ .label だ。

h1 のような要素セレクタの使用はできるだけ避けたほうがいい。理由は影響範囲だ。子セレクタ (子孫セレクタでは足りない) などで範囲を絞っていれば問題ない。

クラスセレクタの使用は問題ないが、 .label のような、どこにでも使われそうな class への無神経な使用は避けたほうがいい。理由は影響範囲だ。子セレクタ (子孫セレクタではない) などで範囲を絞っていれば問題ない。たとえば #page-nav > .search > .label なら許される (※極端な例として ID セレクタを使用した。避けるべきものだが、ページ内で一箇所にしか適用されないという意味を明確にするため、例として採用した) 。

影響範囲が限定できればいいので、構成的に可能ならコンポーネントに限定されたスタイルを使用するのも良い。

多くの .label で使用したい共通の装飾があるなら LESS などの機能を使用すると良い。 .label() { /* ... */ } のように mixin したり、 .base-label { /* ... */ } などの使われない class を extend するなどの対処方法がある。

逆に、意図して影響させたい場合、たとえばノーマライズやリセットはそれが直感的で合意されているなら問題ない。個人的には normalize.css は分かりづらい装飾を付けられるので避けたいし、こういったものを導入するときは二度と変更できない (π を 3 にする) くらいの覚悟が必要だと思っている。

意図しない装飾を回避するために、毎回リセット CSS 的なものを書かされている。ブラウザによっては all プロパティを使ってやろうかと思ってしまう。

寝坊した（遅刻はしていない）。明日はきちんと起きよう。本も読んでいない、次を借りられていない。まずは予約しよう。 bouzuya/rally-cli-hs も進んでいない。 1 commit でも進めよう。