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

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

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

• 増えがちな無彩色は、rgb値で整理する
• その他は、連番で定義する

$white:#fff;$black:#000;$color-255:rgb(255,255,255);$color-240:rgb(240,240,240);$color-51:rgb(51,51,51);

media queryも変数で定義する

突然の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用の記述
  }
}

media query で打ち消さない

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

.example{// PCfloat: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が親、elementが子、media query が孫になるように記述する

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

Media queryの中にクラスの定義はしない

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

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

.block
   &__image
     @media pc
       // Something here

urlは、パスを記述するときはダブルクオーテーション

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

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

idセレクタは使わずclassセレクタを使う

スペース、改行、セミコロン、カンマの記法を揃える

SCSS記法、{}:,を使う場合

• セレクタのあとは .selector {スペース１つあけて、{
• 1行にプロパティ1つ
• プロパティのあとは、コロンの前にはスペースを入れず、コロンのあとにスペースを1つ入れる
• rgba値など、カンマが続く場合は、カンマのあとにスペースを1つ入れる ex rgba(25, 25, 25, 0.2)