---
title: "編集しやすいCSSにするために自分が心がけている事"
published: 2015-02-23
revised: 2022-11-29
tags: [CSS]
author: kubosho
---

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

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

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

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

## コメントを書く

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

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

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

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

```css
/*------------------------------------*\
    はうはう
\*------------------------------------*/
```

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

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

<a class="jsbin-embed" href="http://jsbin.com/vibejoqaka/4/embed?html,css,output">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>

では、自分はどのように名付けるかという話ですが、今は[神獄のヴァルハラゲートの CSS 設計](http://blog.kubosho.com/entry/2014/12/09/valhalla-gate-css-architecture)でも書いたように、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を書く際に心がけている事を書いてきましたが、こういう心がけは下記の思いがあるためです。

<!-- textlint-disable ja-no-weak-phrase, no-doubled-joshi -->

[ドキュメント残しておかないと、身軽になれないし、あとは気をつけていても病気とか事故にあって長期離脱という可能性は 0 ではないので、そうなった時に引き継いだ人が積むし、自分への恨みが起こると思うので、ドキュメントは出来るだけ残しておきたいと自分は考えている。](https://twitter.com/kubosho_/status/569730148536164352)

<!-- textlint-enable ja-no-weak-phrase, no-doubled-joshi -->