Qiitaに記事が0件、どころか日本語記事が全く存在しない新進気鋭のCSS in JSライブラリ、DICSSを紹介します。
以下はDICSS-Directly injected CSSの日本語訳です。
Directly injected CSS
Sassは忘れてください。
LESSも忘れてください。
あなたに必要なのはDICSSです。
一度DICSSを使ってしまうと、もうLESSには戻れないでしょう。
CSSとJavaScriptを毎回別々にビルドすることに疲れましたか？
DICSSにはそんな心配事はありません。
なにしろ、DICSSはJavascriptです。
つまり、スタイルとスクリプトをひとつの言語でコーディングし、全てをひとつのファイルにコンパイルすることができます。
一度試してみれば、たちまちDICSSが好きになるでしょう。
DICSSは楽しく、そして簡単です。
Is it safe?
これは安全ですか？
もちろんです。
DICSSはwrapperを使っています。
How do you use DICSS?
DICSSはどうやって使えばいい？
dicss.jsを好きなところに配置するだけです。
headタグでもbodyタグでも同じく動作します。
<head>
<script src="dicss.js"></script>
</head>
それだけで、すぐにDICSSを使い始めることができます。
DICSS.putIn('body', 'transition: .1s linear');
DICSS.putIn('p', {
"height": "100%",
"width": "100%",
"&.protection": {
"border": "solid 1px transparent"
},
"a": {
"color": "#fff"
}
});
追加したスタイルを、後から削除することも簡単にできます。
DICSS.pullOut('a', 'color');
The possibilities are endless
DICSSはJSONに対応しているので、CSSをネストして管理することができます。
var widgetDICSS = {
'div.widget': {
'a': {
font: '1em Verdana,Arial,sans-serif',
margin: '.5em'
}
//... etc
}
};
なお、DICSSはバックエンドに対応しておらず、必要に応じてRESTを介してクライアントにデリバリーすることはできません。
Why no min version?
どうしてミニマムバージョンはないの？
DICSSは非常に軽量であり、それでも必要であれば自身で行うことができます。
Can DICSS be extended?
DICSSを拡張することはできますか？
もちろん！
DICSSは好きなだけ拡張することが可能です。
メソッドをDICSS.extend()に渡すだけです。
DICSSは成長しています。
有名なDICSSアドオンには以下のようなものがあります。
・COCSS (cross-origin DICSS)
・SECSS (security enhanced DICSS)
・DICSS-Pics (DICSS plugin for working with images)
・Circum-Sizer (calculate the circumference of a rounded element in CSS)
はい、たしかにこれらのアドオンは実際にはまだ存在しません。
しかし、あなたがそれを作るのを止めることのできる人は誰もいません。
DICSSに追加したい機能がありますか？
DICSSをよりよいものにするために、ぜひ私たちに協力してください。
Is DICSS compatible with other frameworks?
他のフレームワークと同居はできますか？
はい。
DICSSをKnockout (KOCSS)、Backbone (BoneDICSS)、そしてAngular (Angular-DICSS)と統合するプロジェクトが進行中です。
Does DICSS work with LaTeX?
LaTeXで動きますか？
もちろん動作しますが、より手間はかかります。
It's not working. Help!
うごかないよ！助けて！
開発者ツールを開いて、DICSSと入力してみてください。
未定義であれば、DICSSの導入に失敗しています。
It's still not working!
いまだに動かないよ！
難しく考えすぎてないかい？
DICSSはあなたにもできる程度の中身だよ。
I don't like DICSS.
私はDICSSが好きではありません。
仕方ありません。
ほとんどの人がDICSSを好きになると信じていますが、しかしDICSSは万人向けではありません。
他にも選択肢はたくさんあるので、それらをかわりに使ってもかまいません。
そして、DICSSが好きではないという人にはDICSSを強制的に使わせないでください。
Performance has gotten worse. It doesn't come up as fast as it used to.
DICSSを導入する前よりパフォーマンスが悪くなりました。
DICSSをbodyタグに書きましたか？
headタグに書くか、あるいはバックエンドを強化することでパフォーマンスが改善します。
THIS IS NUTS!
これはNUTSだ！
いいえ、これはDICSSです。
NUTSは他のプロジェクトです。
感想
CSS in JSの究極系ですね。
特定のJavaScriptフレームワークに依存せず、デザイナーにもわかりやすいJSONでCSSを書くことができ、そして、万一素のCSSに戻すことになったとしても簡単に戻すことができます。
出されている例がLESSだのBackboneだのいちいち古い？
そういう細かいことをあまり気にするものではないよ。
最終commitが3年前？
いえ、あまりに完成度が高すぎてもはや手の加えようがないのです。
さあ、今すぐDICSSを導入しましょう！