CSS

チュートリアル
リソース
- JSX
- ES6
- CSS
- アニメーション
- テスト
- サンプル
重要なコンセプト
ソーシャル
その他
- フレームワークの比較
- 変更履歴/移行

バニラCSS

CSSはさまざまな理由から評判が悪く、開発者の中にはスタイルを管理しやすくするために複雑なツールを使う人もいます。このセクションでは、その複雑なツールから一歩下がり、プレーンなCSSを書くためのtipsを紹介します。

空白演算子を避ける - CSSのメンテナンス性の問題の大部分はCSSの優先度（specificity）から来ています。空白演算子は親子関係を定義する（例: .a .b）とともに、セレクタに適用されるCSSルールの優先度を上げます。これにより、意図しないスタイルの上書きが発生することがあります。

代替手法として、要素の論理グループに属するすべてのクラス名に名前空間のプリフィックスを共有することをお勧めします。
```
  /* 避けるべきスタイル */
  .chat.container {/*...*/}
  .chat .item {/*...*/}
  .chat .avatar {/*...*/}
  .chat .text {/*...*/}

  /* 望ましいスタイル */
  .chat-container {/*...*/}
  .chat-item {/*...*/}
  .chat-avatar {/*...*/}
  .chat-text {/*...*/}
```
シングルクラスセレクタを使う - この規約は前の規約と関連しています。#fooやdiv.barといった優先度の高いセレクタを避けることで、優先度の衝突を減らせます。
```
  /* 避けるべきスタイル */
  #home {}
  input.highlighted {}

  /* 望ましいスタイル */
  .home {}
  .input-highlighted {}
```

命名規則を開発する - UIエレメントの種類ごとのキーワードを定義することで、名前の衝突を減らすことができます。このスタイルはブランド名が関わる時に時に効果的です:

  /* 避けるべきスタイル */
  .twitter {} /* フッター内のアイコンのリンク */
  .facebook {} /* フッター内のアイコンリンク */
  /* 略... */
  .modal.twitter {} /* ツイートモーダル */
  .modal.facebook {} /* シェアモーダル */

  /* 望ましいスタイル */
  .link-twitter {}
  .link-facebook {}
  /* 略... */
  .modal-twitter {}
  .modal-facebook {}

Tachyons

TachyonsはCSSフレームワークです。ライブラリがなくても使いやすいことを念頭に開発されています。

基本的な考え方は、すべてのクラス名には１つのCSSルールのみを記述する点です。例えば、bw1はborder-width:1px;を表します。複雑なスタイルを作るには、必要なCSSルールのクラス名を単純に組み合わせて使います。例えば、.black.bg-dark-blue.br2というスタイルは、青い背景色で、黒字で、4pxの角丸を持つ、という意味になります。

すべてのクラスが小さくアトミックなので、CSSのコンフリクトを起こすことが難しくなっています。

Tachyonsの規約はMithrilやJSXにとてもよくマッチします:

var Hero = ".black.bg-dark-blue.br2.pa3"

m.mount(document.body, <Hero>Hello</Hero>)
// `m(".black.bg-dark.br2.pa3", "Hello")`と同じ

CSS in JS

通常のCSSは、すべてのセレクターがグローバルなスコープの中にあるため、名前や空間のコンフリクトが発生します。CSS-in-JSはCSSのスコープの問題を解決しようとします。関連するスタイルをグローバルではないモジュールに分類します。モジュール同士は不可視です。CSS-in-JSは極めて巨大な開発チームがひとつのコードベース上で仕事をしている場合に役立ちますが、多くのチームではオーバーキルです。

現在は、たくさんのCSS-in-JSライブラリがあり、ロバスト性もそれぞれ異なります。

これらのライブラリの問題は、少なくない量のトランスパイラツール群と、それらのための設定ファイルが必要になる点です。また、動作させるためにはコードの可読性を少し犠牲にする必要があります。例えば、<a class="button danger"></a>（あるいはhyperscriptを使っていたらm("a.button.danger")）という表記は、<a class={classnames(styles.button, styles.danger)}></a>となります。

また、デバッグ時にも同じ犠牲を払う必要があります。マッピングされているクラス名とソースコードのマッピングを調べるのが簡単ではなくなります。ブラウザの開発者ツールを開いても、button_fvp6zc2gdj35evhsl73ffzq_0 danger_fgdl0s2a5fmle5g56rbuax71_0といったクラス名は役に立たないソースマップ名、もしくはより悪いケースでは暗号化されたクラス名となります。

他によくある問題としては、@keyframesや@font-faceといった基本的なCSS機能のサポートが欠けていることが多いです。

もしCSS-in-JSライブラリの使用を検討しているのであれば、設定ファイルいらずで、@keyframesと@font-faceの対応が実装されているJ2Cを強く推奨します。