初学者が自分に合ったSCSSの書き方を考える #初心者

初学者が雰囲気で書いてるので用語・用法の誤りが多分に含まれている可能性が非常に高いです

前提

予防線

本業はデザイナーであり、コーダーやフロントエンドエンジニアなど専門的にコードを書ける人間ではない
前任もチームメイトもコーディングをやってくれる人もいない

ゴール

ナウでイケてるCSSを書きたい
読みやすく書きやすく管理しやすい構造にしたい
宗派がいろいろありすぎるので、自分に合った情報を選ぶため軸を定めたい

具体的にやろうと思ってること

ボタンなどよく使うパーツはコンポーネント化する
SCSSを使う
変数や@￰mixinなどを活用して繰り返しの指定を減らす

悩み

要素ごとに大量にclassが振ってあるのはダサいと思う(最大でも4つ程度に抑えたい)
@￰mixinを使う粒度(多用しすぎるとコンパイル後のコードが汚くなりそう)
class(CSS用)とid(JS用)で命名規則をなるべく揃えたい
リセットCSSの使い方（スクールではSanitize.cssなど配布されてるのをそのまま使ってたけど、仕事ではどうするの？）

今考えていること

たとえばの書き方

雑に書いてるのでどうなるかはわからないしたぶん間違っています

色: 容赦なく変数にする。
デザイナー目線だと色味の微調整（白をちょっとだけグレーに、とか）が結構あるため。

style.scss

$green: #55c500;
$yellow: #ffd700;
$white: #fff;
$black: #333;

@￰mixinとコンポーネント化（≒class付与）の使い分け: @￰mixinは横断的に共通のプロパティを適用したいときに使う。それ以外はコンポーネント化する。
@￰mixinを使うときのプロパティ数は少ないほうがいいと思う。共通点が多い＝役割が違うはずなのに見た目が同じなので、そもそもデザインが良くない。

style.scss

@mixin clickable {
  border-radius: 5px;
  box-shadow: (4px 4px 0px $green);
}
@mixin bg-white {
  background-color: $white;
  color: $green;
  border: 1px solid $green;
}
.Card {
  @include clickable;
  @include bg-white;
  padding: 20px;
  &-Detail {
    color: $black;
  }
}
.Btn {
  @include clickable;
  @include bg-white;
  height: 20px;
  line-height: 20px;
  &-green {
    background-color: $green;
    color: $white;
  }
}

この粒度ならCSSもHTMLもあまり汚くならないんじゃないかと思う。
ただ、このコードで悩ましいのは、@mixin clickableみたく機能を示す役割もあるとき。
その場合はユーティリティクラスとして扱う方が良いんだろうか？

hoge.html

<!-- clickable を class に変更 -->
<div class="Card clickable">
  <h4 class="Card-Title">hogehoge</h4>
  <p class="Card-Detail">あのイーハトーヴォのすきとおった風</p>
</div>
<button class="Btn Btn-green clickable">お問い合わせはこちら</button>

なんかこっちのほうが結果的に可読性が高い気がする。装飾の意図だけでない役割があるときはclassにしちゃったほうが良いのかもしれない。実際はページの規模によると思うが。

Class命名規則

kebab-caseかPascalCaseが見た目的に好き
CSSは大文字が使えないって記事を多く見かけたのでkebab-caseがいいのかなと思いきや、最近の記事を見るとcamelCaseやPascalCaseを採用しているケースもよく見る…。今は使えると考えて良いんだろうか
この記事が自分の考え方に結構近い
idを付与するときはElement単位だと思うのでPascalCaseでいけると思う

リセットCSSについて

リセットCSS 企業サイトとかNormalize css 企業サイトとかで地道に検索。
SmartHRとか制作会社のサイトとかで制作ガイドラインを公開してくれてるのを見た感じ、ネットで配布されてるのを使うので良さそう。

感想

CSS/Sassは発信者が多すぎて何を選べば良いかわからない。それでここ数日ずっと悩んでたのに、書き出してみたらあっさり整理できた。
コードに関して悩んだときは自分で実際にコードを書いてみるのが一番良い。