CSS Nite LP39に参加してきました

CSS Nite LP39「コーディングスタイルの理想と現実」に参加してきたので、そのメモ。
今回、CSS設計に関する下記2セッションが印象に残った。特に後者はいつも頭を悩ませるコンポーネントの粒度、余白の設計についての話だったので非常に参考になった。

• 「基調講演：CSS設計の理想と現実」谷 拓樹（サイバーエージェント）
• 柔軟なコンポーネント設計のためのCSS」高津戸 壮（ピクセルグリッド）

基調講演：CSS設計の理想と現実

CSSの設計方法論

• OOCSS
• BEM

いわゆるコンポーネントベースの設計

何が難しいのか？

• UI拡張
• 人員への認知
• 時間

アンチパターン

名前と機能が一致しない

メンテナブルなCSS

• IDセレクタは避ける
• セレクタは浅く
  • 3階層まで（csslintでチェックできる）
• 設計方針？
  • ITCSS
  • OSCSS
  • ボキャブラリーガイド

いかにして詳細度を抑えて制御できるかが重要

優れた設計はCSSだけではならず

• StyleStats (CSSコードの解析)
• 3回交渉する

柔軟なコンポーネント設計のためのCSS

BEM, SMACSSを知っていることが前提の話

• MailChimp Style Guide
• DoSometing Pattern Library
• Lonely Planet

ブロックの粒度

• 粒度の判断が必要
• 粒度の分け方
  • 大きい粒度
    • 単純
    • スタイルが重複 → CSSサイズが増える
• 小さい粒度
  • 複雑
  • スタイルに無駄がない → CSSサイズが減る
• ブロックの入れ子
  • 複雑になり得る
• 適度な粒度
  • どうすればベストかは実現したいこと次第
  • そのブロックは別のページで使われるのか？

ブロックの拡張性

• 無限の拡張性は無理 → これは何も決めてないのと同じ
• 変化のパターン
  • CSS単純
  • CSSサイズ減
  • デザインルールが統一される
• display:table
  • なりゆきレイアウト
    こんな感じでクラス定義しておくとテーブル感覚でdivが使えて便利

  .table { display:table; }
  .tr { display:table-row; }
  .td { display:table-col; }
  

  direction: rtl, direction: ltr で左右を入れ替えられる

無理のない範囲で予測して実装しておくと後々便利

余白の設計

• マクロな設計パターン
  • 汎用的な余白
  • ブロック別の余白
  • ブロック間の余白なし
• ミクロな設計パターン
  • first-child, last-child での制御

総合的に俯瞰して設計の指針を立てる