読者です 読者をやめる 読者になる 読者になる

I'm kubosho_

思想の固まり

編集しやすいCSSにするために自分が心がけている事

CSSは、書くのが怖いと自分は感じます。

例えば、ある程度運用したサービスやアプリとなると、自分が変更した点が思いもよらぬところに反映されてしまい「しまった」と思った事はあると思います。

とはいえ、運用していく上で、何も変更しないというのはありえません。なので、そういった恐怖からなるべく解放されるために自分が心がけている事を書いていきます。

コメントを書く

自分の場合は、そのセレクタがどこで使われているかという情報を書く事が非常に多いです。例としては以下のような感じです。

//------------------------------------------------------------------------
//    Common: サイト上部のヘッダー
//------------------------------------------------------------------------
.prefix-global-header {
  background: #000;
}

このようにする事で区切りが分かりやすくなると思っています。また、ルールセットがどう書かれているかが、より頭の中に入ってくると自分は感じています。

ちなみに上記の区切りは、SassやLESSでしか使えない(コメントアウトに // を使っているため)ので、CSSでも区切りを付けたい場合は、inuit.cssの以下の区切りが良いなと自分は感じています。

/*------------------------------------*\
    はうはう
\*------------------------------------*/

class名やid名を意味のある名前にする

極端な例ですが、以下のように「要素名をそのまま繰り返しただけのclass名」というのは意味が無いと思います(以下の例では、いっそ要素型セレクタでスタイル指定したほうがいいのではと思います)。

JS Bin

では、自分はどのように名付けるかという話ですが、今は神獄のヴァルハラゲートの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を書く際に心がけている事を書いてきましたが、こういう心がけは以下の思いから心がけようとしています。