CSS
CSS3
CSS設計

[WIP] Good CSS, Bad CSS

!important

  • Good CSS
    • 使われている箇所が少ない
    • インラインスタイルを打ち消していない
    • なぜ!importantを使っているのか、すべての箇所について説明できる
  • Bad CSS
    • 使われている箇所が多い
    • CSSファイルの先頭の方に書かれている(normalize等は除く)
    • なぜ!importantなのかを説明することができない
    • 同じクラスに対して何度も!importantが使われている
    • スペルミスしている箇所があり、本当に有効な状態かわからない箇所がある

float: left; & display: flex;

  • Good CSS
    • floatではなくdisplay: flex;が使われている
    • justify-contentを使って、左揃え、右揃え、中央揃えをしている
    • align-items, align-selfを使って上下の揃えをしている
  • Bad CSS
    • float: left !important;が乱立している
    • float: left;, float: right;を駆使して、左右に配置している(justify-content, align-itemsで代用できます)
    • floatが指定されている要素の親要素にclearfixを付け忘れている