編集しやすい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 を書く際に心がけている事を書いてきましたが、こういう心がけは以下の思いから心がけようとしています。