修正しやすいCSSプリプロセッサの書き方を考える

最近はcssを直接修正することがほぼなく、scssやstylusなどを使って修正をすることがほとんどで、色々なCSSプリプロセッサの機能を使って書くことがほとんどになりました。
その分生のcssを調整する時に感じなかった「こう書かれると困るなー」、「こう書いたけど見にくいなー」というのが色々出てきたので、覚書。

&を使ってのネスト

デベロッパーツールから該当クラスをコピーしてエディターのプロジェクト内検索を行った際、以下のようにネストされると、検索結果に引っかからず目視で該当のクラスを探す必要が出てくるため、＆を使用してのネストの多用を避ける。
もしくは使用箇所をmodifireのみに限定する。

// 検索に引っかからない。
.block {
  width: 600px;
  margin: 0 auto; 
  &__element {
     font-size: 16px;
     &--modifier1 {
       color: #ff0000;
     }
     &--modifier2 {
       color: #00ff00;
     }
  }
}

// 検索に引っかかる。
.block {
  width: 600px;
  margin: 0 auto;
}
.block__element {
  font-size: 16px;
}
.block__element--modifier1 {
  color: #ff0000;
}
.block__element--modifier2 {
  color: #00ff00;
}

extend

該当の要素の修正を行った際、以下のように他箇所でextendされているのを気づかず対応した場合、他箇所に影響が出てしまう。
気づいたとしても対応する場合に新しいクラスを作成する必要が出てくるため、使用する場合は、mixinかプレースホルダセレクタ※を使用する。

// 修正箇所
.block1 {
  width: 600px;
  margin: 0 auto; 
}

// 間に色々な記載

// 気づかず影響を受ける箇所
.block2 {
  @extend .block;
  backgroud: #000;
}

.block3 {
  @extend .block2;
  margin-bottom: 60px;
}

※プレースホルダーセレクタの書き方

// プレースホルダーセレクタ、cssにはコンパイルされない
%extend-block {
  width: 600px;
  margin: 0 auto; 
}

// 他箇所の影響を考えずここだけ修正出来る。
.block1 {
  @extend %extend-block;
}

.block2 {
  @extend %extend-block;
  backgroud: #000;
}

.block3 {
  @extend %extend-block;
  backgroud: #000;
  margin-bottom: 60px;
}

演算

式だけ見ると、どういう風に計算されているか分からない場合があるため避ける。
使用する場合は、コメントアウトで補足を入れる。

// 式が不明
.block1 {
  width: (690 / 750 * 100)vw;
}

// 式が分かる
.block1 {
 // デザイン上の要素の横幅 / デザイン幅 * 100 
  width: (690 / 750 * 100)vw;
}