CSSの書き方
CSSがカオスになっているので、以下のルールを守りましょう。
ファイル毎に読み込みの順番が変わっても動作するように作るのが基本。
基本ルール
MUST
1Reactコンポーネント = 1CSSファイル = 1ブロック原則
React ComponetのCSSは、components/フォルダの配下にJSと同一のファイル名.scssというファイル名で配置する
React Componentの名前と、JSのファイル名と、CSSのファイル名は同じにする
例:
component名:
ShareMenu JSファイル名:
ShareMenu.js CSSファイル名:
ShareMenu.scss CSSクラス名:
share-menu コード:
ShareMenu.jsexport default class ShareMenu extends React.component {
}ShareMenu.scss.share-menu {
margin: 10px;
.title {
font-size: 20px;
}
}React Componentの名前が、他のクラス名とかぶらないようにBoostrapなどをよく勉強しておくこと。
Rails view
Railsで作ったviewに関するcssは、layouts/ フォルダの配下に配置する
body.pricing のように body.hoge からCSSを始めることで、適用範囲をbody要素に限定する <% provide :body_class, "hoge" %> を書くことで、body要素に任意のクラス名を追加できる例:
pricing（価格）ページの場合
princing.scssbody.pricing {
font-color: #555;
}間違えやすいダメな例
bad.scssbody {
.pricing {
font-color: #555;
}
}これではbodyの下のどこの階層のdivにでも適用されるので、body { } で囲む意味がない
Mixin
ルートに定義したmixinは、なうべくmixins/フォルダにいれる
Saas変数
ブロックの外にあるSaas変数は、globalになることに注意する
component内だけで使うSaas変数は、必ずcomponentのブロックの中に閉じ込める
閉じ込められない場合は、variables.scss内にまとめて書くこと
色
グローバルに定義した色は、colors.scss に記述すること
それがいやな場合は、特定のブロックの中に変数を書く
例:
$search-bar-border-color: #001122 SHOULD
一つのCSSファイルには、必ず一つの親ブロックだけ書く
二つのクラス情報を一つのファイルに書かない
よい例:
scss.share-menu {
.active { // `.share-menu` コンポーネントの中に閉じ込める!
hoge: 0;
}
.item { // `.share-menu` コンポーネントの中に閉じ込める!
hoge: 0
}
}componentとlayoutのスタイルを分ける
例:
<A className="a-compo"/><B className="b-compo a-no-shita-ni-b-layout"/> DrawColor , DrawTolbar のようにprefixが共通のものはざっくりフォルダ分けするとよい例:
draw/DrawColor.scss
draw/DrawToolbar.scss
画像のモードでfullscreen, edit, などがあるとき、 body全体にそのクラスをつけて、中のコンポーネントのスタイルを制御するのをやめる
コンポーネント毎に、fullscreen, editなどのクラスをつけてあげるのがよい(JS側でモード情報をcontext等で渡してあげてclassNameに追加する)。
+1 
例:
image.scssbody.fullscreen {
.image-box {
width: 100%;
}
}ImageBox.scss.image-box {
border: hoge;
}// ↑こういう状態だと、
.image-box のスタイルの記述が分散してしまう。import順などによってスタイルが壊れる原因になる。またimage.scssが肥大化する// ↓こう書く
ImageBox.scss.image-box {
border: hoge;
&.fullscreen {
width: 100%;
}
}レスポンシブ対応するときは、コンポーネントの中にwhen-xxを書く
よい例
good.css.toolbar {
height : 50px;
@inluclude when-xs {
height: 60px;
}
}だめな例
bad.css.toolbar {
height : 50px;
}
@inluclude when-xs { // トップレベルに書かない！
.toolbar {
height: 60px;
}
}モバイルの対応方法
2015/5/25 現在の様子
よくあるアンチパターン
React Componentが二つあるのに、CSSファイルは一つ。
スタイルがどこに書いてあるのか追えません。
「React Componentの名称とcssクラス名が微妙に違う」のような状況もコードが読みにくい。
ImageThumbコンポーネントのCSSクラス名がgrid-thumbとか。
CSSの書き方