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

2015年2月8日 23:47 event,html/css — littlepad

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を知っていることが前提の話

ブロックの粒度

  • 粒度の判断が必要
  • 粒度の分け方
    • 大きい粒度
      • 単純
      • スタイルが重複 → 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 での制御

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

コメントはまだありません

No comments yet.

TrackBack URL

Leave a comment

about

ハンドルネーム:littlepad
都内で WEB 制作(デザイン, html/css, Flash, MT, WordPress etc)をしているBOØWY研究家

category:

search:


archives:

GO TO PAGETOP