はじめに

こんにちは、まさやんです。

■運営サービス一部
https://smart-wordpress.com
業界特化、スマートなWordPressテーマ販売サイト『SMART WP』

以前開発をしていて、SCSSの書き方が間違えていたことに気づいたので、今回は、自分で自分のコードをリファクタリングしてみたいと思います。

リファクタリングしてみた

1.ネストが上手く利用できていない

❌ NG

ネストが利用できておらず、省略して書けるというSCSSのメリットを活かしきれていませんでした。

badge.scss

.c-badge--sm {
  padding: 5px 15px;
  background: #66a3c2;
  color: #fff;
  font-size: 12px;
  border-radius: 2px;
}
.c-badge--lg {
  padding: 8px 20px;
  background: #66a3c2;
  color: #fff;
  font-size: 16px;
  border-radius: 2px;
}

⭕️ OK

こちらのコードは、ネストが効いています。

badge.scss

.c-badge {
  &--sm {
  padding: 5px 15px;
  background: #66a3c2;
  color: #fff;
  font-size: 12px;
  border-radius: 2px;
  }
 &--lg {
  padding: 8px 20px;
  background: #66a3c2;
  color: #fff;
  font-size: 16px;
  border-radius: 2px;
  }
}

こういったコードを書くことで、c-badgeを何回も書く必要がなく、開発効率が上がります。
さらに、例えば、c-badgeの部分をc-labelに変えたいとなった場合に、1箇所だけ変更すればよいので、保守性が高いコードになります。

2.擬似要素もネストを効かせる

❌ NG

擬似要素についてもネストの効いた書き方ができていませんでした。

btn.scss

.c-btn {
  display: block;
  // ~~~~~~~
}
.c-btn:hover {
  background: #80ddd5;
  cursor: pointer;
}

⭕️ OK

btn.scss

// ネストが効いている
.c-btn {
  //~~~~~~
  &:hover {
    // ~~~~
  }
}

3.Modifierの命名

❌ NG

これはSCSSの書き方という訳ではないですが、過去に間違えていたことがあったのでまとめておきます。
下記のようにModifierとすべき部分がハイフン１つ繋ぎになっていました。

btn.scss

.c-btn {
  &-sm { // ハイフン１つになっている
  //~~~~~~
  }
  &-lg {
  // ~~~~
  }
}

⭕️ OK

Modifier部分はハイフン２つで繋いであげましょう。
過去にCSS設計についてまとめた記事もありますので、是非そちらもお読みいただければと思います。

btn.scss

.c-btn {
  &--sm { // ハイフン２つで繋いであげる
  //~~~~~~
  }
  &--lg {
  // ~~~~
  }
}

おわりに

最後までお読みいただきありがとうございます！
コードを書くだけじゃなくて、いいコードを読むことも大事だと実感しました。
今後も学んだことを発信していきたいと思います。
それでは！