リセットCSSやNormalize.cssは本当に必要なのか|Blog|株式会社トライム

Keyword

Contact

についての不明点や案件のご相談などございましたらお気軽にお問い合わせください。

Share

X Facebook pocket LINE はてなブックマーク

リセットCSSやNormalize.cssは本当に必要なのか

2016.10.17

使わないという選択肢

基本的にトライムではweb上で公開されているリセットCSSや、
Normalize.cssは利用していません。

社内ルールを勝手気ままに作って、みんなを従わせている僕の個人的な意見として、
意図していないスタイルがあるのが気持ち悪いというのもあります。

しかし、実際にリセットCSSやNormalize.cssに書いてあるすべての記述が必要になるのでしょうか? トライムでは長年に渡る厳選の末、下記のようなスタイルを使っています。

トライムのCSS

@charset "UTF-8";

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
}

body {
  font: 500 1.4rem/1.6 "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  color: #4c4c4c;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  font-size: 100%;
}

p {
  margin-bottom: 1em;
}

ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0px;
}

form label {
  cursor: pointer;
}

a {
  text-decoration: none;
  color: #4c4c4c;
}
a:hover, a:active, a:focus {
  color: #b2b2b2;
}

a img {
  border: none;
}

.cf:after {
  display: block;
  clear: both;
  content: '';
}

Normalize.cssの必要性

Normalize.cssのコメントを読む

試しにnormalize.cssのコメントを読んでみてください。
最新バージョンのものではありませんが、翻訳を載せてくださっています。

normalize.cssで使用されている各スタイルがどのように機能しているか解説

普段コーディングをする上では、その大半が不必要だったりはしないでしょうか?
読んだ上で必要と思われるのであれば、使用することにはなんの問題もありません。
むしろ積極的に使うべきです。

でも「これ使ってないな」と思われる部分が多いのであれば、
利用するかどうか、再検討してみてはいかがでしょうか?

Normalize.cssの容量

Normalize.cssは現在、最新のv5.0.0で461行、8KBありました。

8KBというのは大した重さではないのかもしれませんが、
上のCSSは55行、667バイトです。結構節約できています。

まとめ

この記事はリセットCSSやNormalize.cssを否定するものではありません!
有効に活用できるのであれば、なんでも使ったほうが良いですよね。

CSSに限らず衝動買いしたあげく、
使わないということが多い自分への自戒を込めて書きました。
何かを利用するときには、それが本当に必要なのか、よく考えてから使っていきたいですね。

Share

X Facebook pocket LINE はてなブックマーク
Webサイト制作についてお悩みでしたら私たちにご相談ください。

私たちはECサイトなどのBtoCのサイトの制作に特化したWeb制作会社です。マーケティング視点をもったクリエイティブにより、運用まで見据えた効果の高いWebサイトを構築いたします。Webサイトについてお悩みのWeb担当者の方は、トライムまでお気軽にご相談ください。

Keyword

Contact

についての不明点や案件のご相談などございましたらお気軽にお問い合わせください。

Contact

お問い合わせ

トライムは常にお客様へ寄りっ沿った提案をさせていただきます。
自社のEC売上の拡大や人材不足などのお客様のデジタル上の課題を、
様々なアプローチにより解決するお手伝いをいたします!
お気軽にお問い合わせください。

TEL

03-6403-3259

受付:10:00 - 19:00