よりよいCSSを書くための、CSS / Sass (SCSS) 30のルールとその理由

理由

• 以下の機能が便利だから。
  • $ を打つと Sass変数を補完 してくれる
  • 補完表示中、値がカラーコードである変数は 色が表示される
  • mixinも補完してくれる
  • Sass変数右クリックで 「定義へ移動」 のジャンプも使える

CSS設計編

6. BEMの考え方に従う。ただし命名規則は .BlockName__ElementName--modifierName

クラス命名の際にはBEMの考え方に則りつつ、
クラス命名を .BlockName__ElementName--modifierName のルールにします。
（MindBEMdingには従わない）

理由

1. ブロック名からエレメント名までが1単語として扱われる から
   1. これにより、ダブルクリックで選択しやすいし、option + ←→での単語選択がしやすい
2. モディファイア名を、JSやテンプレートエンジンの変数名と合わせやすいから
3. 他のライブラリと衝突しにくいから

7. .Block__Element1__Element2 を許容する

.Block__Element1__Element2 (エレメントのネスト) を許容します。
ただし、必ずしもマークアップのネスト構造と一致させることはせず、スタイルに親子関係が影響する場合にのみネストします。

<div class="Block">
    <div class="Block__Grid">
        <div class="Block__Grid__A">
            <p class="Block__Text"></p>
        </div>
        <div class="Block__Grid__B">
            <p class="Block__Text"></p>
        </div>
    </div>
</div>

.Block__Grid {
    display: grid;
    grid-template-areas: "A B";
}
.Block__Grid__A {
    grid-area: "A";
}
.Block__Grid__B {
    grid-area: "B";
}
.Block__Text {
    font-size: 1.5rem;
}

理由

1. スタイルに明確な親子関係が存在する場合 には、クラス名で明示したほうがいいから。

詳しく

以下のようなケースは、それらが親子である必要のあるスタイルの当て方になっています。

• グリッドコンテナーとグリッドアイテムの関係がある場合
• position: relative（相対配置の基準）と position: absoluteの関係がある場合

このようなスタイル（クラス）は親に依存していることを明示しておくと、それを意識した上で編集できます。

一方で、マークアップのネスト構造が変更されても成立する場合には、ネストさせません。

8. モディファイア単体にスタイルを当てない

// ❌NG
.Block {
    color: black; // デフォルトのスタイル
}
.Block--modifier {
    color: red; // モディファイアのスタイル
}

// ✅OK
.Block {
    color: black; // デフォルトのスタイル
    &.Block--modifier {
        color: red; // モディファイアのスタイル
    }
}

理由

1. 詳細度を上げて、 モディファイアで指定したスタイルを確実に当てるため。

詳しく

NG例では、.Block と .Block--modifier の詳細度が同じため、なにかの拍子に記述順が変わってしまうとモディファイアのスタイルが優先されなくなってしまいます。
OK例では、モディファイアのセレクタが.Block.Block--modifierになり、詳細度が上がるため、必ずモディファイアのスタイルが優先されます。

9. ネストされたエレメントのスタイルは、スタイルが当たるエレメントに書く

見出しがわかりにくくてすみません。具体例を見てください。

// ❌NG
.Block {
    &.Block--modifier {
        .Block__Element {
            //  → .Block.Block--modifier .Block__Element {}
            // 親のブロックにモディファイアがついているときのエレメントのスタイル
        }
    }
}
.Block__Element {
}

// ✅OK
.Block__Element {
    .Block.Block--modifier & {
        //  → .Block.Block--modifier .Block__Element {}
        // 親のブロックにモディファイアがついているときのエレメントのスタイル
    }
}

理由

1. 「この要素に当たるスタイルは何か」 がわかりやすくなるから。

詳しく

NG例では、.Block__Element に対して当たるスタイル記述が分散してしまいます。さらに、詳細度の高いセレクタが先に来てしまっており、Stylelintの no-descending-specificity ルールにも反します。
no-descending-specificity | Stylelint

OK例では、 .Block__Element に対して当たるスタイルが1箇所にまとまり、どのように変化するかが読み取りやすくなります。

10. ディレクトリ構造を頑張りすぎない

FLOCSSとかSMACSSとか、いろいろな設計手法がありますが、
「FLOCSSのcomponentとprojectってどうやって区別したらええねん・・・」とかなったので、そういった手法には則らないことにしました。
結果、自分は以下のような構造にしました。

├── css
│   ├── _base       # 共通で使うもの
│   │   ├── base.scss   # タグに直接指定するスタイルなど
│   │   └── global.scss # 変数・mixinなど共通で使用するもの（スタイルを生成しないもの）
│   ├── _components # コンポーネント（Block)
│   │   ├── BlockName.scss
│   │   └── ...
│   └── style.scss  # エントリーポイント

// _base/base.scss
@use "../_base/global.scss" as *;

body {
  font-family: "Noto Sans JP", sans-serif;
  color: $color-mine-shaft;
  background-color: $color-white;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

// _base/global.scss

// 色
$color-mine-shaft: #333;
$color-white: #fff;

// ブレークポイント
$breakpoints: (
  medium: 768,
);
@mixin sp {
  @media screen and (max-width: #{map-get($breakpoints, medium) - 0.02}px) {
    @content;
  }
}
@mixin pc {
  @media screen and (min-width: #{map-get($breakpoints, medium)}px), print {
    @content;
  }
}

// _components/BlockName.scss
@use "../_base/global.scss" as *;
.BlockName {
    color: $color-mine-shaft;
}

// style.scss
@use "node_modules/destyle.css/destyle.css"; // リセットCSS

@use "./_base/base.scss";

@use "./_components/BlockName.scss";
@use "./_components/...";

@use "node_modules/tailwindcss/utilities"; // ユーティリティクラス (tailwind)

理由

1. ディレクトリやファイルを分割しすぎると、どこに記述すればよいかの判断が煩雑になるため。

詳しく

• global.scss は、他のファイルで @use して使うファイルです。そのため、スタイルを出力する記述は含めず、変数やmixinのみを書きます。
  • 変数やmixinは、variables.scss, mixin.scss と分けるやり方もよくありますが、参照するファイルが多くなるデメリットのほうが大きいと感じて、 global.scss に一元化しました。
  • 特に、 $breakpoints （ブレークポイントの値を持つ変数）と @mixin pc （メディアクエリのmixin）なんかは「変数」「mixin」という違いで分けるよりも、「ブレークポイントの管理」という役割で一緒の場所に記述したほうがまとまりがいいです。
• _components配下はブロックごとにファイルを作成します。
• style.scss (エントリーポイント) で必要ファイルを読み込む際、npmで管理できる外部ライブラリのCSSは node_modules から参照します。
• utilities 的なディレクトリは（これまでは作っていたのですが）作らず、tailwindに置き換えてみました（次の項目で詳細）。

11. ユーティリティクラスにTailwind CSSを使う

ユーティリティクラスを作る代わりに、Tailwind CSSを使用します。

module.exports = {
  prefix: "tw-", // tailwindから出力していることをわかりやすくするため"tw-"をつけているが、つけなくてもいいし、FLOCSSライクに "u-" とするのもアリだと思う
  content: ["./src/**/*.njk"], // この中のファイルに含まれるクラス名だけ出力される
  theme: { // 定義したものだけ使いたいので、extendはしない
    screens: {
      pc: { raw: `screen and (min-width: ${768}px), print` },
      sp: { raw: `screen and (max-width: ${768 - 0.02}px)` },
    },
    colors: {
      "white": "#fff",
      "mine-shaft": "#333",
    },
  },
};

// global.scss
$variable: 20px;

// ❌NG
@use "./global.scss";

.Block {
    font-size: global.$variable;
}

// ✅OK
@use "./global.scss" as *;

.Block {
    font-size: $variable;
}

// ❌NG
.Block {
    &__Element {
        &--modifier {

        }
    }
}

// ✅OK
.Block {
}
.Block__Element {
    &.Block__Element--modifier {
    }
}

p {
    h1 + & {
        margin-top: 20px;
    }
    p + & {
        margin-top: 10px;
    }
}

li {
    & + & {
        margin-top: 10px;
    }
}

// ❌NG
.Block {
    margin: 0 auto;
    background: linear-gradient(#fff, #000);
    transition: 0.2s all;
}

// ✅OK
.Block {
    margin-right: auto;
    margin-left: auto;
    background-image: linear-gradient(#fff, #000);
    transition-duration: 0.2s;
    transition-property: color;
}

.Block {
    margin: 0 auto;
    background: linear-gradient(#fff, #000);
    transition: 0.2s all;
}

// ↓同一

.Block {
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    background-image: linear-gradient(rgb(255, 255, 255), rgb(0, 0, 0));
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat-x: initial;
    background-repeat-y: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: ease;
    transition-delay: 0s;
}

// ❌NG
.class {
    font-size: 16px;
    @media screen and (min-width: 768px), print {
        font-size: 20px;
    }
}

// ✅OK
.class {
    @media screen and (max-width: 767.98px) {
        font-size: 16px;
    }
    @media screen and (min-width: 768px), print {
        font-size: 20px;
    }
}

// ✅OK
.Block {
    color: black;
    &.Block--green {
        color: green;
    }
    &.Block--blue {
        color: blue;
    }
}

// 上書きを完全になくそうとするとこうなるが、
// むしろデフォルトのスタイルの詳細度が上がってしまうため、こうはしなくていいと思う
.Block {
    &.Block--green {
        color: green;
    }
    &.Block--blue {
        color: blue;
    }
    &:not(.Block--green):not(.Block--blue) {
        color: black;
    }
}

// ❌NG
.Header {
    z-index: 10;
}
.Modal {
    z-index: 20;
}

// ✅OK
// global.scss
$z-index: (
  header: 10,
  modal: 20
);
// （簡略化のため、`@use` の記述省略）
.Header {
    z-index: map.get($z-index, header);
}
.Modal {
    z-index: map.get($z-index, modal);
}

// ❌NG
$color-text: #000;
$color-text-sub: #333;

// ✅OK
$color-black: #000;
$color-mine-shaft: #333;

// ❌NG
.class {
    background-image: linear-gradient(to left, red, green);
}

// ✅OK
.class {
    background-image: linear-gradient(to right, green, red);
}

// ❌NG
a:focus {
    outline: none !important;
}

// ❌NG
.Button {
    @media screen and (min-width: 768px) {
        &:hover {
            background-color: red;
        }
    }
}

// ✅OK
.Button {
    @media (hover: hover) {
        &:hover {
            background-color: red;
        }
    }
}

// ❌NG
p {
    font-size: 16px;
}

// ✅OK
html {
    font-size: 62.5%;
}

p {
    font-size: 1.6rem;
}

// ❌NG
@media screen and (max-width: 767px) {
    // SP
}
@media screen and (min-width: 768px) {
    // PC
}

// ✅OK
@media screen and (max-width: 767.98px) {
    // SP
}
@media screen and (min-width: 768px) {
    // PC
}

// ❌NG
@media screen and (max-width: 767.98px) {
    // SP
}
@media screen and (min-width: 768px) {
    // PC
}

// ✅OK
@media screen and (max-width: 767.98px) {
    // SP
}
@media screen and (min-width: 768px), print {
    // PC
}