【CSS】CSSを書く時に意識したいこと

transition を指定する時はプロパティも指定する

/* Bad... */
a {
  transition: .2s;
}

/* Good!! */
a {
  transition: opacity .2s;
}

PC/SPの画像の切替えは display: none でやらない

<!-- Bad... -->
<img src="pcの画像" alt="" class="pc">
<img src="spの画像" alt="" class="sp">

/* Bad... */
.pc {
  display: none;
}
@media screen and (min-width: 640px) {
  .pc {
    display: block;
  }
  .sp {
    display: none;
  }
}

<!-- Good! -->
<picture>
  <source media="(min-width:768px)" srcset="pcの画像">
  <source media="(max-width:767px)" srcset="spの画像">
  <img src="pcの画像">
</picture>

background-image より <img> を使うようにする

背景で使う画像も基本的には<img>で読み込むようにしましょう。<img>はdecoding=”async”とloading=”lazy”が使えます。これらを使うとサイトパフォーマンスが良くなる傾向にあります。

height はできるだけ使わない

要素の高さ（文章の行数など）は画面幅に応じて高くなったり低くなったりするので、高さを固定すると文字がはみ出したりすることがあります。

width より max-width を使う

/* Bad... */
div {
  width: 600px;
}
@media screen and (max-width: 640px) {
  div {
    width: 100%;
  }
}

/* Good! */
div {
  width: 100%;
  max-width: 600px;
}

要素数が可変する時は justify-content: space-between は使わない

要素の数が変わる時は、justify-content: space-betweenは使わずにmarginなどで調整するようにしましょう。

空タグより擬似要素を使う

<div class="line"></div>

/* Bad... */
.line { ... }

/* Good! */
.parent::before { ... }

スタイルを書く順番をルール化する

/* Bad... */
.foo {
  background-color: #f00;
  color: #fff;
  text-align: center;
  padding: 20px;
  font-size: 20px;
  width: 100%;
  margin: 10px auto;
  font-weight: bold;
  height: 20px;
}

/* Good! */
.foo {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  background-color: #f00;
  width: 100%;
  height: 20px;
  margin: 10px auto;
  padding: 20px;
}

マイルール

1.display
2.font（color, font-size, text-align etc）
3.background
4.border
5.width, height
6.margin, padding
7.position
8.使用頻度が低いスタイル（overflow, transition, animation etc）

連続するアイコン画像は全て同じサイズで書き出す

アイコンのサイズぴったりに書き出すと、画像サイズがそれぞれバラバラになってしまいます。サイズがバラバラだと、ひとつひとつにwidthやheightを指定しなければいけません。

アイコンの外側に余白を作り、その余白ごと書き出せば全ての画像サイズが同じになります。こうすることで、ひとつひとつにwidthやheightを指定する必要はなくなります。

box-sizing: border-box を全ての要素に指定する

*,
::before,
::after {
  box-sizing: border-box;
}

(Visited 17 times, 1 visits today)