東京で開催された「CSS Nite LP54 Corder’s High 2017」の参加レポートです。

セッション8つめはピクセルグリッドの高津戸さん。

CSS設計方法論や各種ツールとどう向き合うか

  • 自分が困っていれば採用すれば良い。
  • 全部採用しようとするとコストが掛かりすぎる

多くのCSS設計方法論

  • OOCSS
    • モジュール化
  • BEM
    • クラスに命名規則を設け、シンプルなセレクタで書くルールに

CSSの容量増えすぎてしまう問題への解決

  • モジュール化
  • ベース + スキン (OOCSS)
  • ブロック + モディファイア (BEM)

書き方がみんなバラバラ問題への解決

  • コーディングガイドライン
  • StyleLintを使う

同じコードへの対策

  • mixin, extendでコードDRYに
  • Autoprefixerを使い管理をコード外に
  • スタイルガイドで重複したモジュールの作成を回避

それで解決しない問題

  • CSS設計方法論はやり方を述べたものにすぎない
  • 各種ツールはあくまで道具にすぎない

モジュールを切る難しさ

  • 同じモジュール?
  • Modifierで?
  • モジュールの名前は?
  • ボタンは別モジュール?

一つの理想的な形 Atomic Design

  • そもそもページを作っているという認識を改める
  • まず作るべきはデザインシステム
  • サイトを作る前にデザインの仕組みを考えるべき
  • 原子, 分子, 有機体に分けて考えよう
    • 原子:一番小さい要素
    • 分子: 原子と組み合わせる
    • 有機体: 分子と組み合わせる
  • 詳細を詰めながら俯瞰し、サイト全体で同一の機能を持つUIを統合していく

Atomic Designから得られるCSS設計のヒント

  • 命名に最適な判断ができないのはデザインの設計が出来ていないから
  • Atomic Designを取り入れるのはハードルが高い
  • 汎用的に設計するよりも局所的に設計したほうが保守しやすい場合がある

名前空間によるモジュールのグルーピング

  • Enduring CSS
  • BEMのBlockを名前空間でグルーピングする
  • 衝突することが少なくなる
  • でも名前空間が上手く設計されないと悲惨

HTML上で組み立てるAtomic CSS

  • ユーティリティクラスだけでページを作る
  • 単純なスタイルを当てたクラスをHTML上に組み合わせる
  • 問題の解決方法は一つではないという例

後工程によせた設計例

  • スタイルガイドを作りコピペで作れるように
  • 量産する人は基本的にCSSをいじらない
  • できるだけ単純に

結論

  • 問題が表面化してくるのがコーディングのときになるからナヤム
  • 解決したい問題に寄せてCSS設計を考える

※聞き入りすぎてしまい、あまりメモ取れませんでした😭