CSS 関連で個人的に素晴らしいと感じた翻訳記事があり、毎日ペースぐらいで読み返しています。記事内では、CSS を記述する際に避けるべきことが記述されています。どこでもすぐに内容を参照できるように、元記事の小見出しを抜き出して自分用のメモをつけてまとめてみます。

元記事は Code smells in CSS、翻訳記事は Code smells in CSS。翻訳記事を掲載していたサイトが移転して URL が変更になったようです。移転後の URL は、http://article.enja.io/articles/code-smells-in-css.html です（2014-04-11 修正）。

以下は、元記事の小見出しと自分用のメモです。

スタイルの取り消し

スタイルは追加するのみ。スタイルの削除が発生していたら、設計がマズいことになっている。

マジックナンバー

他の箇所に依存してかろうじて正しい振る舞いをしている数値は使わない。原文によると Avoid magic numbers like the plague. とのこと。plague は「疫病」や「災い」を意味する。

制限されたセレクタ

セレクタの詳細度を上げると、再利用性を無くすだけでなくパフォーマンスも落ちてしまう。

ハードコード/絶対値

絶対値ではなく、相対値で記述する。例）line-height: 1.5;

力ずくでやる

無理矢理なスタイルを適用させないようにするってことかな。

危険なセレクタ

広範に影響するセレクタは使わない。要素型セレクタを使用しないことで避けられそう。

受動的な!important

思ったようなスタイルにならない時に、むやみに!importantを使わない。

ID

id は使わない。使うのは、フラグメント識別子としての利用、もしくは、JavaScript を発火させるための利用のみ。

ルーズなクラス名

他人がコードを見て、サイトのどこで使っているのか、何に使っているのかパッとわかるようなクラス名をつける。

個人的に、一番刺さったのは id の件です。癖で、id="wrapper" だったり id="header" だったりの id をつい使ってしまいがちでしたが、これからは気をつけようと思います。

ちなみに、注釈は自分が内容を思い出すための本当に簡単なものなので、ちゃんと内容を理解するためには、原文もしくは翻訳文（上でも書いた通り、翻訳文を掲載したサイトの URL が変更されています。移転後の URL は、http://article.enja.io/articles/code-smells-in-css.html）をキチンと読まれることを推奨いたします。