Kevin Yank「CSSフレームワークとセマンティックなClass名」

sitepointのエントリ

CSS Frameworks and Semantic Class Names

cssフレームワークのデメリットを解決しつつcssフレームワークを利用する、という主旨
但しプログラミングの知識が必須。

以下斜め読んだ内容

• cssフレームワーク。例。blueprint css、YUI Grid、960.gs
  • cssフレームワークは便利だがデメリットがある
  • セマンティックではない、class名を付けることを強制される
    • ex.span-9,span-24,etc..
• cssフレームワークはセマンティックなマークアップと両立しない
  • よくある態度。便利さと引き換えの必要悪として受け入れるという態度
• cssフレームワークとセマンティックなマークアップは両立できる
  • 2つ紹介
  • 解決１。スクリプトで案件ごとに自動置換（ex.compress.rb）
    • compress.rbはBlueprint CSSが最近リリース。
      • おさらい。Blueprint CSSはCSSフレームワークの草分け
    • compress.rbはBlueprint CSSに同梱されてるrubyスクリプト
    • YAMLファイル（settings.yml）にデフォルトのclass名を自分が付けたい（＝セマンティックな）class名を付ける。これが設定情報になる
    • compress.rbを実行するとsettings.ymlの内容に基づいて置換される。
    • 少し敷居高
      • 要rubyがインストール
      • 要subversionがインストール
      • 当然プログラミングの知識
    • 参考。compress.rbの使い方ページ（Blueprint's compress.rb: A Walkthrough）
  • 解決２。サーバーサイドで解決（サーバーサイドCSS framework）
    • rubyだとCompass、phpだとScaffold
      • フレームワークで定義された独自記法でスタイル情報を書くと、自動的にcssファイルが生成される。

settings.yml書き方例↓

demo:
  path: /Users/kyank/Documents/myproject
  semantic_classes:
    ".header, .footer": ".span-24, div.span-24"
    ".content": ".span-18, div.span-18"
    ".sidebar": ".span-6, div.span-6,
                 .last, div.last"

Scaffoldの記述の例↓

@grid {
  column-width:30;
  column-count:24;
  right-gutter-width:20;
  baseline:20;
  unit:px;
}
.header, .footer {
  +columns(24);
}
.content {
  +columns(18);
}
.sidebar {
  +columns(6);
  +last;
}

コメント

• CompassとScaffoldの話は面白いけど、BlueprintやYUI GridCSSフレームワークの弱点を直接克服するものではない。
• 他力本願
  • scaffoldにblueprint.cssのプラグインとかがあってそれを使えば、compress.rbにおけるsettings.ymlのような情報を書けば利用できる・・みたいな流れを期待。