編集しやすいCSSにするために自分が心がけている事
CSSは、書くのが怖いと自分は感じます。
ある程度運用したサービスやアプリとなると、自分の変更した点が思いもよらぬところに反映されてしまい「しまった」と思った事はあることでしょう。
とはいえ、運用していく上で何も変更しないというのはありえません。CSSを変更する恐怖からなるべく解放されるために自分が心がけている事を書いていきます。
コメントを書く
自分の場合は、そのセレクタがどこで使われているかという情報を書く事が非常に多いです。例としては下記のような感じです。
//------------------------------------------------------------------------
// Common: サイト上部のヘッダー
//------------------------------------------------------------------------
.prefix-global-header {
background: #000;
}
このようにする事で区切りが分かりやすくなると思っています。また、ルールセットがどう書かれているかが、より頭の中に入ってくると自分は感じています。
ちなみに上記の区切りは、SassやLESSでしか使えない（コメントアウトに // を使っているため）ので、CSSでも区切りを付けたい場合は、inuit.cssの下記の区切りが良いなと自分は感じています。
/*------------------------------------*\
はうはう
\*------------------------------------*/
class 名や id 名を意味のある名前にする
極端な例ですが、下記のように「要素名をそのまま繰り返しただけのclass名」というのは意味が無いです。下記の例では、いっそ要素型セレクタでスタイル指定したほうがいいでしょう。
では、自分はどのように名付けるかという話ですが、今は神獄のヴァルハラゲートの CSS 設計でも書いたように、MindBEMdingを使った命名にするかなという感じです。
例えば .header としているところなら、.prefix-global-header か .prefix-top-header といった命名をします。
!important を使う時は注意深く使う
CSSを書いていく上で、どうしても !important を使いたくなる時があります。そんな時は !important を使わないようにCSSを書き直すよりも !important を使ったほうが、時間がかからなかったり複雑にならない可能性が高いと感じています。
とはいえ !important を乱用してはいけません。改修に時間がかからなそうだったり複雑にならなそうであれば、使わないほうが良いです。
なお自分が !important を使う時は、なぜ !important を使うのかというコメントを絶対書いています。それは下記の理由です。
- 意味が書いてない
!importantは消すのが怖いため- 消したらどこかに悪影響が出るのではという恐怖が生まれる
- 将来CSSを書き直した時に消せる可能性があるため
- 上記でも書いたように、なるべく使わないようにしたい
style 属性を使う時は注意深く使う
!important と同じく、乱用すべきものではないですが、かといって、ある機能に関するページが10ページくらいあったとして、そのうち1ページでしか使わない（かつスタイルを適用させたいところも少ない）となると、CSSファイル内でスタイル指定をするよりも、style属性でスタイル指定をしたほうが、時間がかからなかったり複雑にならない可能性が高いと感じています。
それ以外では、style属性を使わないほうが良いです。
最後に
ここまで、CSSを書く際に心がけている事を書いてきましたが、こういう心がけは下記の思いがあるためです。