CSS設計目線のNuxt.jsの良さ

現在の社内のコーディングでは、スタイルシートのクラス設計の指針としていわゆるBEMを採用している（実際は少し書式は異なる）。

BEMを採用する理由は、重複を起こさない命名規則とセレクター定義ルールによってクラス（およびセレクター）の影響範囲を最小限に留めることにある。クラスの命名やセレクターの定義はエンジニアによって癖がある。また、複数の作業者が関わる案件ではルールがなければクラス名やセレクターの重複を避けるのは難しくなる。大規模案件や、長く運用していく案件では特に効果を発揮する。

しかしこのルール、BEMにさらに少しだけ社内にカスタマイズしたものになっているが、如何せん複雑だ。設計した本人が言うんだから間違いない。パーフェクトとはもちろん言えないが、社内外の統率をするためとしてはそこそこ上手くいっていし、今の所セレクターに起因する事故はない（以前はあった）。でも複雑なのでどうにかならないものかと日々悩んでいる。

<div class="c-component">
    <div class="c-component__a">
        <span class="c-component__b"></span>
        <div class="c-component2">
            <div class="c-component2__a">
                <span class="c-component2__b"></span>
            </div>
        </div>
    </div>
</div>

.c-component {
    &__a {
        prop: value;
    }

    &__b {
        prop: value;
    }
}

.c-component2 {
    &__a {
        prop: value;
    }

    &__b {
        prop: value;
    }
}

Nuxt.jsとVue.js

Nuxt.jsとそのベースとなるVue.jsはそれを解決する（他のフレームワークなどでも解決できるぞ、という話は今回置いといてほしい）。

まずVue.jsのScoped CSSの機能だ（厳密にはvue-loaderの機能だが、そういう細かい話は以降も割愛）。クラスセレクタを利用する限りはコンポーネントごとのユニーク属性が必ず付加されるので、絶対にセレクターは重複しない。コンポーネントの先祖子孫間で影響を及ぼすようなことをほぼ避けられる。タイプセレクタではそれが有効にはならないが、スタイル定義はクラスセレクターを必ず使うというシンプルで強いルールに落ち着くことができる。BEMの__や--を利用することのような説明もする必要はない。命名規則もシンプルにコンポーネント内の重複さえ気をつければいい。プレフィックスなど余計なことも考慮しなくてよくなる。その重複もstylelintでチェックできる。

<template>
    <div>
        <div class="a">
            <span class="b"></span>
            <Component2 />
        </div>
    </div>
</template>

<style scoped>
.a {
    prop: value;
}

.b {
    prop: value;
}
</style>

そしてNuxt.jsについての利点は、全てのコンポーネントがVueコンポーネントであるということ。普段、部分的にVue.jsを利用することはあるし、CMSサイトだったり静的ページでVueコンポーネントを利用することは可能だ。しかしその場合、そのページに適用されているCSSがVueコンポーネントに影響を与えるかどうかは実装によるし、ルールがない場合は予想が本当につかない。

Nuxt.jsで構築されたVueコンポーネントで先のScoped CSSでスタイル定義はクラスセレクターを必ず使うルールでいけば、100%クラスの重複やそれぞれの影響はなくなる。複雑さの呪縛から開放される。おまけに記述量も少なくて済む。コードの見通しもよい。ネストや&キーワードもほとんど必要なくなるので、カスタムプロパティが使えるブラウザに限定するならSASSである必要すらなくなってくる（弊社案件では厳しいが）。

コンポーネント設計に注力

シンプルなルールになり、クラスのタイポによるミスやファイル管理の煩わしさも避けることができる。セレクターを書くときに心のどこかでビクビクしながら書かなくてよくなる。BEMの場合もNuxt.jsの場合も避けられないのはコンポーネントの役割や粒度を考える設計だが、CSSの複雑で不安定な部分が除かれるのでそれに注力できる。良いことばかりだ。

今回はCSS設計の視点だけでNuxt.jsの良さを語ってみたが、Nuxt.jsも含めてJSフレームワーク可能性や採用したい理由はまだまだある。CMSとの親和性やレンタルサーバーの問題など課題は山積みだが、いつか解決できるように採用や布教に取り組んでいきたい。