Help us understand the problem. What is going on with this article?

[WIP] Good CSS, Bad CSS

More than 1 year has passed since last update.

!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を付け忘れている
DesignChips
Webエンジニアです。フロントエンドエンジニアとして、HTML・CSS・JavaScriptでWebアプリケーションを開発するのがお仕事です。CSSが1番好きです。
retty
Retty株式会社はソーシャルメディア、スマートフォンを活かした「人を軸にお店を探せる」グルメサービスRettyを運営する会社です。
https://retty.me
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away