CSSの書き方
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
コード:
code: ShareMenu.js
export default class ShareMenu extends React.component {
}
code: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（価格）ページの場合
code:princing.scss
body.pricing {
}
間違えやすいダメな例
code:bad.scss
body {
.pricing {
}
}
これではbodyの下のどこの階層のdivにでも適用されるので、body { } で囲む意味がない
Mixin
ルートに定義したmixinは、なうべくmixins/フォルダにいれる
Saas変数
ブロックの外にあるSaas変数は、globalになることに注意する
component内だけで使うSaas変数は、必ずcomponentのブロックの中に閉じ込める
閉じ込められない場合は、variables.scss内にまとめて書くこと
色
グローバルに定義した色は、colors.scss に記述すること
それがいやな場合は、特定のブロックの中に変数を書く
例:
$search-bar-border-color: #001122
SHOULD
一つのCSSファイルには、必ず一つの親ブロックだけ書く
二つのクラス情報を一つのファイルに書かない
よい例:
code: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 pastak.icon
例:
code:image.scss
body.fullscreen {
.image-box {
width: 100%;
}
}
code:ImageBox.scss
.image-box {
border: hoge;
}
// ↑こういう状態だと、.image-boxのスタイルの記述が分散してしまう。import順などによってスタイルが壊れる原因になる。またimage.scssが肥大化する
// ↓こう書く
code:ImageBox.scss
.image-box {
border: hoge;
&.fullscreen {
width: 100%;
}
}
レスポンシブ対応するときは、コンポーネントの中にwhen-xxを書く
よい例
code:good.css
.toolbar {
height : 50px;
@inluclude when-xs {
height: 60px;
}
}
だめな例
code:bad.css
.toolbar {
height : 50px;
}
@inluclude when-xs { // トップレベルに書かない！
.toolbar {
height: 60px;
}
}
モバイルの対応方法
2015/5/25 現在の様子
https://gyazo.com/9600553a08f76bd67cb2091335200ee4
よくあるアンチパターン
React Componentが二つあるのに、CSSファイルは一つ。
スタイルがどこに書いてあるのか追えません。
「React Componentの名称とcssクラス名が微妙に違う」のような状況もコードが読みにくい。
ImageThumbコンポーネントのCSSクラス名がgrid-thumbとか。
CSSの書き方