2014年5月 7日(水)
2014年2月15日、ベルサール九段 イベントホールで開催したCSS Nite LP, Disk 32: Sassのフォローアップとして、高津戸 壮さん(ピクセルグリッド )の『HTMLテンプレートの設計』セッションのスライドなどをシェアします。
長時間のセミナーでしたが、最後までお付きいただきありがとうございます。講演の内容としては、各概念の中で、基本的な部分に絞り、理解に時間がかかりそうな内容については省き、お話させて頂きました。それぞれの概念について興味のある方は、より、突っ込んで調べてみることをおすすめいたします。
講演の中でもお話させていただきましたが、SMACSSの書籍は日本語化もされています。読みやすいのでおすすめです。
http://smacss.com/ja/
# 補足
質問頂いた内容についてお答えします。
> 複数人でやる時に実際どんな感じでやってるのか
コーディングを複数人でやる場合、私の場合ですが、以下の2パターンで作業する事が多いです。
1. 主設計者+展開
2. 主設計者+サブ設計者
まず、1ですが、これは、ページ数の多いコーポレートサイト等を一つ一つ手作りしていく場合に取る体制です。サイトのCSSは、主設計者しかいじりません。主設計者は、各ページで使うモジュールを始めにコーディングし、その他のメンバーが、そのモジュールを使いながら、具体的なページを作っていきます。主設計者は、単純な作業を他の人に任せるように動きます。
2は、そのように、ページを量産できないような場合です。二人以上でモジュール群をコーディングしていくので、ちょっとむずかしいです。この場合、私の例はあくまで一例なのですが、以下のようにしています。
まず、基本的には1と同じく、主設計者が基本的な設計を行います。しかし、主設計者は、全てのモジュールのコーディングを行うわけではありません。部分的にコーディングを任せたいモジュールを、サブ設計者にコーディングしてもらいます。ただ、この時、そのモジュールの名前を始めに決めてしまいます。
講演の中でお話したとおり、モジュールの名前をベースに、HTMLとCSSを書いていくというルールにしているため、最低限、モジュールの名前が決まっていれば、コーディングは可能です。
この時、CSSファイルは、別に分けることもあります。そして最終的には、サブ設計者の書いたHTMLとCSSをマージします。サブ設計者がコーディング中に気づいたモジュールの粒度や懸念点は、適宜主設計者にフィードバックします。主設計者はなるべく、単純にコーディングが行えるモジュールから選んで仕事を振っていきます。
この方法を取る場合、講演の中で話したような設計の概念が固まっていると、よりスムーズに設計が行えます。弊社では、コレといった設計のルールを作っているわけではないのですが、講演中に話したSMACSSに近い形で普段コーディングしており、概ねの考え方が共通認識として存在しているため、分担は可能になっています。長いプロジェクトの場合は、このあたりの土台作りをきっちりやっておけば、寿命の長いサイトにできるでしょう。
以上、ありがとうございました。
2019年、CSS Niteでは49回の関連イベントを通して123セッションが行われました。その中からベスト・セッション+αを選びました。