駆け出しエンジニアのCSS（SCSS）をレビューした際の指摘点 #初心者

WEB制作初学者の方々のレビューを続けている中で、CSSの記述もよくある指摘があったのでまとめさせていただきました。基本的なことが多いので一度読んでいただいて今後の勉強に活かしてもらえればと思います。

意味のある名前をつける

classやID名はページのどの部分を表しているか、何を意味しているかがわかる名前にしましょう。
セレクタとして指定できれば問題ないという考え方ではいけません。

↓↓↓↓↓↓↓ あなたの記事の内容

───────
```css
↑↑↑↑↑↑↑ 編集リクエストの内容
// NG
.head {...}
.text {...}

// OK
.products-heading {...}
.item-description {...}

インデントや空白の位置を揃える

空白やインデントは一定のルールを基に記載しましょう。私は過去にGoogleのスタイガイドラインに書いてあったと記憶している下記のようなルールを徹底します。

セレクタとカギの間は半角スペースを１つ
プロパティ名と値の間は半角スペースを１つ
インデントは半角スペース２つ
スペースとタブは混在させない
セレクタ内最後のプロパティもセミコロンで閉じる

↓↓↓↓↓↓↓ あなたの記事の内容

───────
```css
↑↑↑↑↑↑↑ 編集リクエストの内容
// 例
.boxContents {
  margin: 0 auto;
  width: 500px;
}

ネストは深くしすぎないように

SCSSのネストは便利ですが記述の仕方によってはCSSの詳細度が高まってしまい、あとでCSSを上書きするのが大変になることや、レンダリング最適化の観点からもよくありません。
可読性を上げるためにネスト内に記述したい場合がありますが、その際は@at-rootを付与してネストを解除しましょう。

// scss
.header-navigation {
  margin: 20px auto 0;
  width: 800px;

  .header-navigationList {
    display: flex;

    .header-navigationItem {
      border: 1px solid #ccc;

      @at-root .header-navigationLink {
        display: block;
        padding: 10px;
        width: 120px;
      }
    }
  }
}

// css 
.header-navigation {
  margin: 20px auto 0;
  width: 800px;
}
.header-navigation .header-navigationList {
  display: flex;
}
.header-navigation .header-navigationList .header-navigationItem {
  border: 1px solid #ccc;
}
// @at-rootをつけた部分の解除されます。
.header-navigationLink {
  display: block;
  padding: 10px;
  width: 120px;
}

ただ、上記の例ではあまりネストしている無駄に詳細度を上げているだけのようにも見えるので、レンダリング最適化のためにもネストをしないで記載しましょう。

&でclass名をつながない

賛否両論あるのかもしれないのですが、「&」でclass名を繋いでしまうとHTML側からコピーしてきたclass名でテキスト検索をかけてもヒットしません。css側を検索してもscssのどこに記載があるかわからないので筆者はこのような表記を避けています。

// scss
// header-navigationListではテキスト検索にヒットしない
.header {
  &-navigation {
    margin: 20px auto 0;
    width: 800px;
    &List {
      display: flex;
    }
    &Item {
      border: 1px solid #ccc;
    }
    &Link {
      display: block;
      padding: 10px;
      width: 120px;
    }
  }
}

例外としてはLPのように小規模で今後の更新ないものであれば、コード量が少ないので探す手間もかからないと思います。
その場合は上記の記載で、作業時間の短縮できるのであれば活用すべきと考えます。

ショートハンドで記述する

CSSは画像ほど重くはなりませんが、記述が増えていけばいくほど容量は増えていきページの表示速度に影響がでるので、短くできるに越したことはありません。
プロパティの中には ショートハンドと呼ばれる、記述を短くできるものがあるので使っていきましょう。

↓↓↓↓↓↓↓ あなたの記事の内容

───────
```css
↑↑↑↑↑↑↑ 編集リクエストの内容
.boxContents {
  margin-top: 50px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 0;
  background-image: url(assets/images/bg.jpg);
  background-position: center center;
  background-repeat: repeat;  
}

// ショートハンド
.boxContents {
  margin: 50px auto 0;
  background: url(assets/images/bg.jpg) center center repeat;
}

要素セレクタはあまり使わない

CSSはHTMLを探しに行くとき右のセレクタから探していきます。例として下記のようなCSSがあったとします。

↓↓↓↓↓↓↓ あなたの記事の内容

───────
```css
↑↑↑↑↑↑↑ 編集リクエストの内容
header nav ul li {...}

この場合にCSSセレクタを右から読むと

ページ内のliタグを探す
liタグの中からulタグを親にもつものを探す
2の中からnavタグを親にもつものを探す
3の中からheaderを親に持つものを探す

となります。

探す時間が長くなるぶん、ブラウザがレンダリングにかかる時間も長くなるため、ページの表示が遅くなってしまいます。
難しく考えることなく、class名１つで書いておけば問題はありませんので、特に理由がない場合を除いて要素セレクタの使用は避けましょう。（下記の参考記事がとてもわかりやすいです）

垂直方向のmarginは一方向に統一する

上下の余白を無作為につけていると一貫性がなくなるので、一方方向に統一することでメンテナンス性も上がります。
私は margin-topに統一 するようにしています。理由としては、margin-bottomだと下の要素がなくなったときに無駄な空白ができる可能性があると考えています。

!importantは使わない

!importantはCSSの詳細度を無視して一番の優先度で適用できるため付けたくなってしまう時があるのですが、あとでその要素のCSSを上書きする際にも!importantをつけるためメンテナンス性が下がります。
下記のようにやむを得ない場合以外はなるべく使わないようにしましょう。

インラインで書かれたCSSを外部参照や内部参照から書き換えたい場合
WEBサービスなどでサービス側のCSSに!importantの記述があり、上書きしたい場合

制作前に対応ブラウザを確認しておく

とくにIE11に対応するかどうかで作業量が増えてしまうので必ず確認しましょう。ユーザー全体のシェア率としては低くなってきているのですが、昔から続いているサービスのページで本体が対応しているケースや、 「クライアントの上司が使っているブラウザは対応」 という文化も消えていないので注意が必要です。

終わりに

CSSの記述に関しては答えがないものも多く、私流になっているものもあるかもしれません。Googleのガイドラインを日本語に翻訳してくれているページがあるので、こちらも参考にしてください。

もっと良い書き方や違う見解もありましたらコメントいただけましたら勉強させていただきます。
よろしくお願い致します。

駆け出しエンジニアのCSS（SCSS）をレビューした際の指摘点

意味のある名前をつける

インデントや空白の位置を揃える

ネストは深くしすぎないように

&でclass名をつながない

ショートハンドで記述する

要素セレクタはあまり使わない

垂直方向のmarginは一方向に統一する

!importantは使わない

最新のプロパティは使う前に対応ブラウザの確認を

制作前に対応ブラウザを確認しておく

終わりに