久しぶりに大量のCSSを書いたら楽勝だった話 #CSS

すごく久しぶりに大量のCSSを書きましたので、思ったところまとめてみました。

今回しない話

CSS in JS
Scoped CSS

今回するのは、全部がグローバルに突っ込まれる、オールドファッションなCSSの話です。

再利用性の高いコンポーネントとは何か？

せっかく久しぶりに書いたので、再利用性を 極限まで 高くするための方法を真剣に考えてみました。

結論

子要素をほとんど持たないコンポーネントほど、再利用性が 異常に 高い。

たとえば、一般的な事例としてですが、ボタン用のクラスは 100% 再利用できます。

// button.sass
.button

    &--action
        color: white
        background-color: $green

    &--caution
        color: white
        background-color: $red

利用シーンとしては、

<a class="button button--action">OK</a>

みたいに、再利用性は 100% です。

逆も同様にする

だとしたら、同様にリンク用のクラスも作れば、 最高の の再利用性になるのでは？

こんな感じで。

// link.sass
.link

    &--facebook-icon,
    &--twitter-icon
        display: block
        box-sizing: border-box
        padding-top: 100%
        height: 100%
        overflow: hidden
        background-repeat: no-repeat
        background-position: center
        background-size: contain

    &--facebook-icon
        background-image: url('icon-facebook.png')

    &--twitter-icon
        background-image: url('icon-twitter.png')

利用シーンとしては、

<li class="...">
    <a class="link link--facebook-icon" href="#">Share</a>
</li>
<li class="...">
    <a class="link link--twitter-icon" href="#">Tweet</a>
</li>

みたいにして、実際の幅と高さは親要素側で定義して使います。

こちらも、再利用性 100% になりました。

さらに発展させる

a や button 要素で上手くいったのなら、同様に、 figure や dl や ul でも上手く行くのでは？

こんな感じ。

// figure.sass
.figure

    &--widescreen
        position: relative
        padding-top: 56.25%
        height: 0

    &--widescreen &__image
        position: absolute
        top: 0
        left: 0
        width: 100%

利用シーンはこんな感じ。

<figure class="figure figure--widescreen">
    <img class="figure__image" src="" alt="">
</figure>

下は ul の場合。

// list.sass
.list

    &--some-list > &__item
        ...

利用シーンはこんな感じ。

<ul class="list list--some-list">
    <li class="list__item">
    <li>
</ul>

やってみて分かったこと

コンポーネントの中身が小さければ小さいほど、 非常に 再利用性が高い
コンポーネントの総数が今までよりも 圧倒的に 減った
デザイン変更が続いても、モデファイアの修正（またはコンポーネントの取り換え）だけで済むので、全然疲れない
各コンポーネントのマークアップ構造を考える必要が全くない（HTMLの仕様通りにすればいいだけ）
マジで楽だった

課題に思ったところ

子セレクタ > を利用禁止にしようと思ったけど、入れ子になり得るコンポーネントだと、

.B

    &--M > &__E
        ...

を

.B

    &--M__E
        ...

みたいにする必要があって、今回は見送った。

その他の期待値はクリアしたか？

一般的に言われているCSS設計の期待値として、以下の項目がありますが、

予測しやすい
再利用しやすい
保守しやすい
拡張しやすい

今回、コンポーネントの大きさを極限まで（要素のレベルまで）下げることで、「再利用性」と「拡張性」については 完全に クリアしました。

「予測可能性」と「保守性」についても同様だと思われますが、これらは第三者による評価が必要なので、興味のある方にお譲りしたいと思います。

まとめ

コンポーネントの粒度は、HTMLのセマンティクスと同じレベルまで下げると、再利用性が極限まで高まる

おしまい

最後まで読んでいただき、ありがとうございました。