https://gyazo.com/65de3617dad52c6b82ff3dfb30c6470a
SassはToo Fatだと思ってる
上書きをしない
過度な共通化をしない
DRYは諦める
Custom properties
scopedなCSSを書く
フラットなCSSを書く
ネストを深くするのは
クロスプラットフォーム開発ができるフレームワーク
<View>、<Text>
スタイルの付け方
Webと書き方は似てるが
CSSファイルをそのまま使えない
Webとの差分
Displayは基本flex
yogaをつかってViewを作成
Flexdirectionはデフォルトでcolumn
縦で並べるため
webの場合デフォルトで横並び
ショートハンドは使えない
marginVerticalやpaddingHorizontalが用意されてる
flexとの微妙な差異
Webでのflex: 1はflex-grow: 1, flex-shirink: 1, flex-basis: 0
RNではflex: -1と書ける
widthとheightを満たそうとする
minWidthとminHeightを満たす
flex-grow: 1にしたときは？
RNだとflex-basisがautoになる
スクロールビューの動作を満たすための仕様
Scroll動作が行えない
yamanoku.icon発表
詳細度調整擬似クラス
:where()
2019/10/01時点でWorking Draft
詳細度の計算時に無視する擬似クラス
!importantと同様に詳細度に干渉しそう
きちんと使えばhoverと同様使えそう？
実用性のある例
擬似クラス
属性セレクタ
Chrome 78 Betaで試すCSS Properties and Values API CSS Properties and Values APIとは
CSSのカスタムプロパティを構造化するためのAPI 初期値とsyntaxを指定することが出来る
syntax
使える文字列は draft で定義されている。
<length>
<number>
<percentage>
<color>
<image>
etc...
通常は不穏な値が入っていると初期の状態が表示されるが
カスタムプロパティの初期値が入っていると不穏な値が入っていても尊重される
潜在的なエラーを発見しスタイルに一貫性をもたせる
例
タイポ
書き方
#fffじゃなくて#FFF
準備
yarn add -D stylelint
configファイル
.stylelintrc.json
実践的な例
message
エラーメッセージを設定できる
commit前にlintを走らせることが出来る