読者です 読者をやめる 読者になる 読者になる

以下斜め読んだ内容

pseudo translation of useful posts, book reviews, remarks,etc. twitter: feeddict

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つ紹介
    • 解決1。スクリプトで案件ごとに自動置換(ex.compress.rb)
      • compress.rbはBlueprint 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
    • 解決2。サーバーサイドで解決(サーバーサイド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のような情報を書けば利用できる・・みたいな流れを期待。