CSSで!importantを使わないために意識していること

各タグで必ず指定することは最初にタグに指定する

• 例外なパターンがあったら、機能用のクラスで指定する

/*リセットCSS(一部利用)*/
html, body, div, span, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, address, big, img, dl, dt, dd, ol, ul, li,
form, label,table, tbody, tfoot, thead, tr,
th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

ol, ul {
  list-style: none;
}

a { 
  text-decoration:none;
}

...etc

コンポーネント単位で共通のふるまいを先に書いておく

• タグの話と同様。CSSは基本、範囲が広い方を先に書き、詳細を後に書いていく。

input[type="text"] {
  border: 1px solid #e1e5e7;
  outline: none;
}

.btn {
  padding: 8px;
  border-radius: 4px;
}

.btn-primary {
  background: #41c9b4;
  color: #fff;
}

詳細度は出来る限り、少なくする

• 上の方だとaタグをボタンにしたいとかなった時に詳細度が高すぎて上書きできない
• リンクを一つのクラスで表せば対応できる

//ダメな例
.extraNavi > li > a {
  font-size: 11px;
  text-decoration: none;
  color: #999;
}

//いい例
.extraNavi_link {
  font-size: 11px;
  color: #999;
}

BEM風にクラスを指定する

• セクション_コンポーネント-ふるまいのような感じ
• BEMなどの記法を使えば、重要度を低く保ったままユニークなクラス名を指定しやすくなる
• 最小のクラスを組み合わせて、期待する結果を得るのが良い

extraNavi_link
btn-primary

さいごに

• もっと意識した方がいいなーと思ったことはどんどん追記していきます。