「Meguro.css #7 @ ラクスル」に参加してきました

勉強会メモ
  • Meguro.css #7 @ ラクスルに参加してきました。

megurocss.connpass.com

  • 初めて知った記法や、普段当たり前に書いている変数名やライブラリへの問題提起など、学びがとても多かったです。
  • 次回もまた参加したいです！
タイトル 発表者
react-nativeにおける、Styleとの向き合いかた Naturalclar
Design Tokensを考える前に俺たちは変数名について考え直すことがあるのではないか yamanoku
詳細度調整擬似クラス ShoEzawa
Chrome 78 Betaで試すCSS Properties and Values API あらや
Stylelintの取扱説明書 moro
Sassに頼らないCSS設計 takanorip

react-nativeにおける、Styleとの向き合いかた

  • Naturalclarさん

React Native

  • Reactライクな書き方でiOS/Androidアプリが作れる

React NativeのStyle

  • WebではないからCSSではないけど同じような感じで書ける
  • CSS in JSで書くことになる

React NativeとWebの差

  • Displayは基本flex
  • flexDirectionのデフォルトがColumn
  • marginなどのショートハンドが使えない
    • marginVerticleなど独自のものもある

Design Tokensを考える前に俺たちは変数名について考え直すことがあるのではないか

  • yamanokuさん

デザインシステム

  • 一貫性が保たれたUIUXを提供できるもの

Design Tokens

  • デザインシステムにおけるスタイル変数集
    • CSS variables
    • SASSの変数とか
    • json読み込んだりとか
  • 色の変数名にwhiteとかつけるのはどうなのか
    • Atlassianのデザインシステムはカラー名が色の名前に準拠してない
  • 変数名が教養があるかどうかになるのも何か違う

詳細度調整擬似クラス

  • ShoEzawaさん

詳細度調整擬似クラスとは

  • :where()
  • 引数として与えたセレクタを詳細度の計算で無視する

使い所

  • !importantと同様詳細度に鑑賞するので乱用は危険そう？
  • ちゃんと使えば便利になりそう
  • 擬似クラスや属性セレクタを使うと詳細度が高くなりがちなので使えそう
  • 用途を限定して使うとよさそう

Chrome 78 Betaで試すCSS Properties and Values API

  • あらやさん

CSS Properties and Values APIとは

  • CSSのCustom Propertiesを構造化するためのAPI
  • CSSのCustom Propertyに初期値とsyntax(型のようなもの)を指定できる
  • Chrome78から使える

API

  • window.CSS.registerProperty
  • syntaxにnumberとかcolorとか設定できる
  • 一度定義すると再registerできない
  • syntaxに一致しない値を設定するとErrorがでる
window.CSS.registerProperty({
  name: '--property-name',  // 対象のcustom propertyの名前
  syntax: '*',              // 値をどうパースするか
  inherits: true,           // 親要素の値を継承するか
  initialValue: '',         // 初期値
});

Stylelintの取扱説明書

  • moroさん

Stylelintとは

  • cssの潜在的なエラーの事前検知や一貫性を保てる

Stylelintの使い方

  • stylelintをinstall
    • npm i -D stylelint
  • configを作成
  • 公式が提供するlintルール
    • stylelint-config-standard

上手な使い方

  • メッセージをカスタマイズできる
  • huskyとlit-staged
    • commitやpush前にタスクを走らせてそこでlintチェックする
    • 必ずlintがかかるようにできる

Sassに頼らないCSS設計

  • takanoripさん

Sass

  • 便利だけど機能が多すぎる
  • 便利だけど注意が必要な機能もある
  • Sassの機能を使うことが目的になってませんか

上書きをなくす

  • 詳細度で値を上書く
    • 詳細度との戦いが始まるのでよくない
  • 過度な共通化をしてると起こりやすい

Custom properties

  • CSSの変数のようなもの
  • 標準のCSSで使える
:root {
  --primary-color: ##ff0000
}
.hoge {
  color: var(--primary-color)
}
  • 色や大きさなど定義しておくことで統一したstyleにできる
  • 上書くだけではないのでよい

ScopedなCSS

フラットなCSS

  • ネストが深いと検索しづらくて開発効率が落ちる
  • 詳細度との戦い
  • Sassはネスト使えちゃうので使っちゃう