More than 3 years have passed since last update.

読みやすいCSSを書くために心がけていること

Posted at 2020-10-19

読みやすい、理解されやすい、CSS（Stylus, SCSS, SASS）を書くために、
日頃意識している「これはやらない」を挙げていけば、
きっと読みやすいCSSが書けるようになるのでは・・・のアプローチです。

本記事では、SCSS記法で例示します。

色は直書きせずに変数で定義する


$white: #fff;
$black: #000;

$color-255: rgb(255, 255, 255);
$color-240 : rgb(240, 240, 240);
$color-51 : rgb(51, 51, 51);

突然のbreakpointの変更にも対応できる

sm = "(max-width: 899px)"
md = "(min-width: 900px) and (max-width: 1023px)"
lg = "(min-width: 1024px)"

SCSSには、postcss-custom-mediaを使用して次のように書く

.block__element--modifier {
  @media(--lg) {
    // pc用の記述
  }
  @media(--sm) {
    // sp用の記述
  }
}

PCで定義して、SPでその記述を打ち消す


.example {
 // PC
 float: left; 

 @media (--sm) {
   float: none; //SPのためにfloatを打ち消す
  }
}

SPとPCの定義を分ける

.hogehoge {
　　// SPとPCで共通したスタイル
 @media(--sm) {
   // スマートフォン用のスタイル
  }
　@media(--lg) {
   // タブレットおよびPC用のスタイル
  }
}

思いついた順、ではなく、一定のルールを意識してコーディングする癖をつける

stylelint-config-recess-orederを.stylelintrc.js で定義すると楽

1つのBlockに対し、Elementは1つ、Modifierも1つ

__(element) --(modifier) が2個以上続く

.area__heading__icon
.area__heading__text
.area__imge__shoulder

__(element) __(modifier) は1つだけ
block__element1(子)__element2(孫) となった場合は、element1 をBlockレベルに上げて、block-element1__element2 とする

.area__image
.area__heading
.area__shoulder

.block {
 &__image {
 }
 &__heading {
   @media (--lg) {
     // pc用のスタイル
   }
   @media (--sm) {
     // sp用のスタイル
　　}
 }

書き出されたCSSとは逆の入れ子になるが、クラス名の中にmedia queryが内包されるようにする

.block　{
   @media (--pc)
     &__image
      // Something here

.block
   &__image
     @media pc
       // Something here

「付けない」「シングルクオーテーション」「ダブルクオーテーション」を付けるのいずれかを徹底する

background: url("../images/bg.png") left top no-repeat