- Meguro.css #7 @ ラクスルに参加してきました。
megurocss.connpass.com
- 初めて知った記法や、普段当たり前に書いている変数名やライブラリへの問題提起など、学びがとても多かったです。
- 次回もまた参加したいです！
react-nativeにおける、Styleとの向き合いかた
React Native
React NativeのStyle
- WebではないからCSSではないけど同じような感じで書ける
- CSS in JSで書くことになる
React NativeとWebの差
- Displayは基本flex
- flexDirectionのデフォルトがColumn
- marginなどのショートハンドが使えない
Design Tokensを考える前に俺たちは変数名について考え直すことがあるのではないか
デザインシステム
Design Tokens
- デザインシステムにおけるスタイル変数集
- CSS variables
- SASSの変数とか
- json読み込んだりとか
- 色の変数名にwhiteとかつけるのはどうなのか
- Atlassianのデザインシステムはカラー名が色の名前に準拠してない
- 変数名が教養があるかどうかになるのも何か違う
詳細度調整擬似クラス
詳細度調整擬似クラスとは
:where()- 引数として与えたセレクタを詳細度の計算で無視する
使い所
!importantと同様詳細度に鑑賞するので乱用は危険そう？- ちゃんと使えば便利になりそう
- 擬似クラスや属性セレクタを使うと詳細度が高くなりがちなので使えそう
- 用途を限定して使うとよさそう
Chrome 78 Betaで試すCSS Properties and Values API
CSS Properties and Values APIとは
- CSSのCustom Propertiesを構造化するためのAPI
- CSSのCustom Propertyに初期値とsyntax(型のようなもの)を指定できる
- Chrome78から使える
window.CSS.registerPropertysyntaxにnumberとかcolorとか設定できる- 一度定義すると再registerできない
- syntaxに一致しない値を設定するとErrorがでる
window.CSS.registerProperty({
name: '--property-name', // 対象のcustom propertyの名前
syntax: '*', // 値をどうパースするか
inherits: true, // 親要素の値を継承するか
initialValue: '', // 初期値
});
Stylelintの取扱説明書
Stylelintとは
Stylelintの使い方
- stylelintをinstall
- configを作成
- 公式が提供するlintルール
- stylelint-config-standard
上手な使い方
- メッセージをカスタマイズできる
- huskyとlit-staged
- commitやpush前にタスクを走らせてそこでlintチェックする
- 必ずlintがかかるようにできる
Sassに頼らないCSS設計
Sass
- 便利だけど機能が多すぎる
- 便利だけど注意が必要な機能もある
- Sassの機能を使うことが目的になってませんか
上書きをなくす
- 詳細度で値を上書く
- 過度な共通化をしてると起こりやすい
Custom properties
:root {
--primary-color: ##ff0000
}
.hoge {
color: var(--primary-color)
}
- 色や大きさなど定義しておくことで統一したstyleにできる
- 上書くだけではないのでよい
ScopedなCSS
- ネストが深いと検索しづらくて開発効率が落ちる
- 詳細度との戦い
- Sassはネスト使えちゃうので使っちゃう