コンポーネントの名前解決をプロジェクトにインポートする時まで遅らせるCSSの書き方

この記事では、JSではおなじみのモジュールの名前解決を、CSSでも実現する方法について解説します。

最近のJSではおなじみのこういうの

JSなら、誰かが作ったモジュールを自プロジェクトに組み込む際に、名前を変えるのはワケありません。

Browserify

var coolcat = require("./lazydog");

ES6

import {coolcat} from "./lazydog";

こういった仕組みのお陰で、JSのモジュール化が一気に進みました。

CSSの場合、配布されているコンポーネントのクラス名を変えようとすると、「ローカルに落として編集して〜」となるので、コンポーネントの作者がバグを直しても、自動的に反映する方法がありませんでした。

CSSにもそういうのが欲しい

実はSassやStylusで普通にできます。

まずはインポートの仕方：

本体

.coolcat
  @import "./lazydog"

モジュールの書き方：

lazydog

&
  color: red

&_items
  color: blue

&-hoge &_item
  color: green

モジュールがこういうふうに書かれていれば、利用者側は好きなスコープ名でコンポーネントをビルドできます。

CSS

.coolcat {
  color: red;
}
.coolcat_items {
  color: blue;
}
.coolcat-hoge .coolcat_item {
  color: green;
}

ビルド結果は期待したどおりに。

将来はこんなふうになるかも

@charset "utf-8"

.fb-dialog
  @import "../node_modules/facebook/deck"

.tw-dialog
  @import "../bower_components/twitter/card"

コンポーネント作者はパッケージマネージャを通じてバージョンアップできるし、利用者は好きな名前で衝突を回避できるし、いいことずくめですね。