これはかなり気になる!スタイルシートの可能性が広がるReact.jsのCSS版のようなスクリプト -Descartes

React: CSS in JS」からインスピレーションを得て、CSSをJavaScriptで記述し、スタイルの定義、変数・関数の利用、レスポンシブやスクロールなどのイベントに動的に値を生成できるスクリプトを紹介します。

サイトのキャプチャ

Descartes
Descartes -GitHub

上記ページではクリックする度に、背景色の値が動的に適用されています。

Descartesの特徴

DescartesはSassやLessのようなCSSプリプロセッサの良い点を取り入れ、CSSをJSONとして記述するとどうだろうと始めたオープンソースのプロジェクトです。スタイルのセットだけでなく、DOMへのアクセスや基本的なイベントリスナーに対応しています。

Descartesの書式は、SassやLessに似ています。

コードの比較

Descartesの基本スタイル

パフォーマンスの改善
スタイルは全てJavaScriptで記述するため、JavaScriptのパフォーマンスに影響を与えます。
関数と変数の使用
グリッドやカラーなど、再利用したい値や動的にしたい値を関数や変数で設定できます。
他のライブラリとの共存
DescartesはjQueryなどの他のライブラリと共存可能です。
React.jsやAngular.jsやBackbone.jsでは、jQueryとの共存は難しいです。
バックアップ
他のプリプロセッサと同様に、バックアップ用のCSSを生成できます。

SNOOK.CAでもちょうど、CSSをJavaScript内にいれることについての記事が公開されていました。

サイトのキャプチャ

You got your CSS in my JavaScript

今まではHTMLとCSSとJavaScriptはそれぞれが分離された状態であるべきというのが人気でした。しかし、最近ではレスポンシブやパララックスなど、デザインを変化させる時にHTMLとCSSの両方を変化させる必要があります。
今まではHTMLとCSSの基本的な構造を変化させる必要がありませんでしたが、最近のコンテンツでは必要とされる場面が増えたということです。

Descartesの使い方

Descartesのセットアップ

当スクリプト「descartes.js」をhead内に、スタイルシートを記述したスクリプト「styles.js」をbodyの最下部に外部ファイルとして記述します。

「styles.js」の中身をいくつか見てましょう

コードのキャプチャ
スタイルのツリー構造
Descartesでは、すべてのスタイルを一つのJavaScriptのオブジェクトリテラルに記述することができます。ぱっと見、SassやLessのような書式ですが、JavaScriptの関数や変数が利用できます。
コードのキャプチャ
スタイルの詳細度
スタイルの詳細度はツリー構造の深いほど高くなります。同じ要素に同じプロパティで指定した場合は、より高い詳細度を持っている方が適用されます。
h1のカラーに「red」「white」と「blue」の3つを指定していますが、適用されるのは詳細度が高い「blue」です。
コードのキャプチャ
Mixins
同じスタイルを再利用したい時があるでしょう。DescartesはMixinsをサポートしているので、スタイルのツリー構造に再利用可能なセットを挿入することができます。
コードでは「_reset」のリセット、「_font」のフォント指定を使い回しています。
コードのキャプチャ
ダイナミックな値
スタイルをJavaScriptで記述するため、プロパティに関数を渡すことができます。DOMへのアクセスもできるので、エレメントのサイズなどを動的に取得することも可能です。
コードのキャプチャ
イベント リスナー
イベントを受け取って、ダイナミックな値と組み合わせることは、スタイルの管理レベルの新しい体験となるでしょう。セレクタのために、ルールを再び計算するために、どんなイベントでもバインドすることができます。これはレスポンシブデザインをはじめ、パララックスなどのインタラクション性のあるコンテンツに適しています。
コードのキャプチャ
アニメーション
CSS3アニメーションはベンダプレフィックスが必要だったり、あらかじめ決められた軌道上しか動かせないなど、いくつか制約があります。
Descartesでは要素をアニメーションで自由に動かし、操作できます。

top of page

©2016 coliss