こんなCSSはやめてほしい。CSSを綺麗に保つために心がけていること

スポンサーリンク
Pocket
LINEで送る

コーディングの規約がないところでチームで開発するとCSSがくっそ汚くなります。

今回はCSSを書くときに綺麗になるように心がけていることについてです。

 

僕は基本的にBEM記法を使うようにしています。

BEMとは

BEMとはBlock,Modifire, Elementの構成でclass名をつけていくものです。

それぞれの頭文字をつなげてBEMとなっています。

Blockがかたまり、Elementがその中のパーツ、Modifireが状態です。

 

<div class="list">
  <div class="list__item list__item__current">A</div>
  <div class="list__item">B</div>
  <div class="list__item">C</div>
</div>

上記の場合

Blockがlist

Elementがlist__item

Modifireがlist__item__current

 

このような記法だと、クラスを見ただけでどういう構造なのか理解しやすいです。

listが大きなかたまりで、list__itemが項目、list__item__currentが現在選択中の項目と推測ができます。

BEMのデメリットはクラス名が長くなることです。

階層の深いとクラス名がどんどん長くなってしまうので人のよっては見辛いかもしれません。

 

これは完全に好みですが、僕はメソッド名や変数も長くてもわかりやすい方がいいと思っているのでどんなに長くても気にしません。

BEMに関してはこちらを見るとわかりやすいです。

BEMによるフロントエンドの設計

BEMという命名規則と

 

こんなCSSはやめてほしい

タグに直接スタイルを当てる

hタグやBODYやinputタグに直接スタイルを当てると拡張性が低くなります。

例えば、ブログのトップページはサイトタイトルにh1タグがついていますが、記事ページだと記事タイトルにh1タグをつけるのが一般的です。

h1タグの直接CSSを書くと、別のクラスで上書きしなければいけなくなり、CSSのコードが読みづらくなります。

また、背景に色があるからとBODYタグに色をつけると、このページは背景が白にしたいという時に、上書きしなければなりません。

スポンサーリンク

 

ネストして書く

親のクラス名をつけて、親のクラス名で子を切り替える書き方。この書き方をする人がたまにいるんですが、クラスを再利用できないので同じコードを二つ書くことになってしまいます。

<div class="search">
  <h2>検索する</h2>
  <input type="text" />
</div>

.search{
/ * CSSコード */
}

.search h2{
/ * CSSコード */
}

 

上記の場合、同じh2のデザインを使いたいときに、CSSに追記することになります。

<div class="search">
  <h2 class="title search__title">検索する</h2>
  <input type="text" />
</div>

.title{
/ * CSSコード */
}
.search{
/ * CSSコード */
}
.search__title{
/ * CSSコード */
}

こうしてtitleというタグを使えば他の場所でも使いやすくなります。

 

idを使う

IDは一度しか使えないので、使いまわせなくなります。

基本的にIDは使わない方がCSSを書きやすくなるかなと思っています。

 

まとめ

こんな感じです。

BEM以外にもCSSの設計方法があるので興味があったら調べてみてくださいね