CSS制作のワークフローについて考える

更新日 2011年7月4日

より効率的に、よりダイナミックにウェブサイトの運営ができるように「CSS整理術」をまとめたいなぁと考えている今日この頃なんですが、ちょうど良いプレゼンを見つけたのでご紹介。「CSS Workflow」というプレゼンで、制作ワークフローの中でもCSSに特化したものを紹介しています。

このプレゼンのはじめにプレゼンターが言っているのですが、ワークフローや仕事のやり方には人の好みがあって、これが絶対というものはないと思います。しかし、基本的な考え方をまとめて共有するのはとても重要なことだと思います。新しくチームメンバーが増えたときにも説明が楽ですし、新しいデザインやテンプレートを作成する際も、土台を崩さずに運営が進められると思います。

ワークフロー = 制作の考え方

Photo by zemanta

僕はワークフローは「制作の考え方」だと思っています。7年も同じウェブサイトを運営していると、根底にある制作や運営方法についての基本的な考え方が、日々作るもののクリエイティビティを制限する可能性があると実感しています。柔軟かつ効率的でバランスのとれた「ぶれない軸 = 制作の考え方」があると、それをベースにいろいろな方向へ転換がきくと思います。軸がしっかりしていればしているほど、振れ幅も大きくよりクリエイティブに制作ができると思います。逆に、それがないと、まとまるものもまとまらなくなり大きく飛躍を果たせないのではないでしょうか？

プレゼンの内容

このプレゼンでは、ワークフローを確率する際に役立ちそうなアイディアがたくさん詰まっていると思いました。

将来性を見据えてコーディングする
現実的にコーディングする
チームでルールを統一して効率を高める

などの基本的な考え方から、CSSプロパティの整理方法（アルファベット順？それとも機能別？）やIEハックについての考え方など、より具体的な制作面の話までを扱っています。プレゼンでは以下の項目に分けて話をしています。

デザインの検証 (Evaluation)
CSSの整理 (Organization)
意味のあるマークアップ (Meaningful Markup)
CSSの設計 (CSS Architecture)
ディバグ (Debugging)

まとめ

気になった点を以下にまとめてみました。

将来を見据えてコーディングする
ちょうど似たようなことを考えていたところだったので一番心に響きました。キャンペーンサイトのように短命のものは別として、企業のメインサイトではすごく大切だと思います。数年おきにリニューアルできればベストですが、コストや時間、その他もろもろの事情などを考慮すると、少なくとも5〜10年は大幅なリニューアルなしで拡張でき問題なく運営できるサイトを設計したいですね。
「ページ」ではなく「システム」をつくる
CSS制作を始める際、ページを作るのではなく「システム」をつくると考えると良い。そのほうが将来性を考慮しながらコーディングがしやすい。
破る前にルールを知れ
本当にクリエイティブな仕事をしたかったら、ルールを熟知するべきだと思います。なんでもそうだと思うんですが、ルールを知っていて、あえて破るのと、まったく知らないでただ破るのとでは雲泥の差があります。偶然できたいいものは、次の偶然を待たないと作れないですからね。
DOCTYPEには気をつけろ
何時間も費やしてディバグした結果DOCTYPEが問題だったというのを僕も何度か経験しています。DOCTYPEは統一、もしくは、しっかり仕様として記述しておくべきですね。プレゼンターが紹介しているHTML5のDOCTYPEも気になるところです。5年先を考えたら確実にHTML5が標準になっているはずですし。少し話はそれますが、HTML5の導入時期はすごく悩むところです。。。
クラス名のつけ方について
・クラス名はチームメンバー（=だれにでも）に分かりやすいモノにする。
・クラス名には redline などの「スタイル」ではなく header などの「役割」を使う。
Reset Stylesheetについて
Eric MeyerのReset CSSをベースにしたHTML5向けのReset CSSが気になります。プレゼンターがHTML5docotorのHTML5 Reset Stylesheetをおすすめしています。ブラウザのデフォルトスタイルを「リセット」するReset Stylesheetの使用については、賛否両論あるようですが個人的には使用推進派です。ブラウザ間の表示差を最小限におさえ作業の効率化を図るためのメリットは大きいと思います。これに関しては、論文のような記事 (英語)もあったので一読して今後自分の意見をまとめてみたいと思っています。
CSSの記述はDOMに従う
CSSの記述は、ヘッダー、コンテンツ、フッターのようにDOM順に書くのが直感的で分かりやすい。
CSSプロパティは何順で書くべき？
個人的には機能順にプロパティを記述してますが、会場でのアンケートではアルファベット順と機能順で半々みたいです。Firebugではそうだから、というのも理由のひとつ？結局個人の好みということなんですね。ただ、この辺はチームで統一すべきですね。どちらを選ぶかで喧嘩になりそうですが… 笑
W3C Validationはスペルチェック
たしかに。文章もスペルチェックしたほうがいいですもんね。
Firebugは便利だね〜
こちらも、たしかに。ブラウザ上でリアルタイムにCSS編集をして結果を検証できるのがいいですね。
HTML5 BOILERPLATEがいいらしい
今度試してみようかな。情報はこちら

2010年12月29日に公開され、2011年7月4日に更新された記事です。

About the author

「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。

ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。

この記事をシェアする