講師だって、最初は初心者だもの[レポート]『CSSオジサン #0』で、CSS設計を学んできました/森 和恵

投稿:  著者:  読了時間:9分(本文:約4,200文字)


こんにちは。森和恵です。

今回は、この土曜日に参加してきたイベントレポートをお届けしますね。
恐らく途中までになってしまうので、後日全文をこちら↓で公開予定です。
< http://r360studio.com/learn/learn20141108.html >

さて、お話を始めましょうか。


●CSSオジサンに、オバサンが参加してきました。

この土曜日(2014年11月8日)に開催されたイベントはこれです。

CSSオジサン #0『Web制作者のためのCSS設計の教科書』出版記念イベント
< http://inkdesign.jp/event/css-architecture/ >

CSSオジサン…。なぜこの団体名がついたかというと、話せば長くなるのですが、

もともと、JSガールズ
< http://jsgirls.org/ >

という、JavaScriptを女性(girl)だけで集まって学びましょう! という素敵女子の集まりがありまして、参加した方によると、それはそれは、キラキラしたイベントだったそうです。

それを受けて、「女子ばっかり!ずるい!」という意見があり、JSオジサンという、おじさんのための集まりができました。
< https://www.facebook.com/groups/597267490365660/ >

更にそれを受けて、おじさんがCSSを学ぶ会、ということで生まれたのが、CSSオジサンです。

Webの業界は、こういうノリが面白くて、私は大好きです。オジサンという名前ですが、誰が参加してもいいということでしたので、オバサンの私も参加してきました。

お友達が大阪で開催するということもあり、一般申し込みもしたのですが、ついでに受付のお手伝いをしてきました。

#受付で、アンケートを配っておりましたのが、わたくしです。
#よかったら、お友達になってください。
< http://twitter.com/r360studio >

スピーカーは、Webコーディングでは、そうそうたるメンバーの方々で、メインスピーカーの谷 拓樹(@hiloki)さんは、『Web制作者のためのCSS設計の教科書』の著者です。この本は、勉強会テーマの主軸になったのですが、すごくいい本なので、コーダーの方は読んだ方がいいです。マジでマジで。

< http://book.impress.co.jp/books/1113101128 >

そして、CSS設計手法のひとつ、SMACSSの日本語訳を手がけた斉藤祐也さん(@cssradar)、世界も注目するCSS解析・評価ツールのStyleStatsの開発者である石本光司さん(@t32k)と続きます。

「ちゃんとCSSを書きたい人は損をしない、内容の濃いイベントになること間違いなしです。CSS、CSS設計のトピックに関心のある方はぜひお越しください!」という、勉強会のうたい文句に嘘はない、とても濃い内容でした。

当日のツイートの様子は、ハッシュタグ「#cssオジサン」で確認できるので、追ってみてください。

< https://twitter.com/hashtag/css%E3%82%AA%E3%82%B8%E3%82%B5%E3%83%B3 >

●「メンテなブルであり続けるためのCSS設計」

まずは、谷拓樹さんのメインセッションのお話から。
当日のスライドがすでに公開されています。

< http://www.slideshare.net/hiloki/maintainable-css >

執筆された書籍の内容でもある、「OOCSS」の考え方を取り入れたCSS設計のお話でした。「OOCSS」とは、「Object Oriented Cascading Style Sheets」の略で、プログラミングの世界でおなじみの、オブジェクト指向的な感覚でCSSのクラスを定義していくという方法です。

「お・・・おぶじぇくとしこう???」
と頭がパニックになった方のために、スライドから抜粋して説明をしてみます。

余談ですが、私自身、プログラマーではないものの、大学でプログラミングの経験が多少あるので、こういうときに、なんとかなってきました。どんな言語でもいいから、一つ言語をやりこんでみておくと、アレルギーがないかもしれませんね。

では、先ほどのスライド26〜28枚目を見ながら話をすすめますね。

画像が左、テキストが右側にあるレイアウトが3種類ある場合に、「OOCSS」では、役割の同じ部品(オブジェクト)ごとにクラスを指定します。

ここでは、レイアウト全体に「media」という共通の名称をつけ、レイアウト内の部品を「画像」と「テキスト」に分け、「画像」を「image」、「テキスト」を「body」と名付けています。

そこから対応するクラス名を

.media(フロート解除のスタイルのみ指定)
.media__image(左フロートと右余白のスタイルのみ指定)
.media__body(オーバーフロー時に隠すスタイルのみ指定)

と、その部品の役割として、最低限のスタイルのみを割り当てます。そしてこのスタイルを、3種類のレイアウト枠で共通して使います。

では、それぞれのレイアウトの個別スタイルはどこで持たせるのか?というと、スライドの27と30枚目に注目してください。

一番目のレイアウトの外側に、<div class="media speaker">としている部分です。

先に登場した共通のクラス「.media」に加えて、このレイアウト枠独自の部分だけを指定した「.speaker」というクラスも割り当てています。

そして、「.speaker」には、このレイアウトのみで指定する「余白や背景色」の指定がされています。

このように、スタイルをつけるページの部品の役割を徹底的に見直し、これがどのようなオブジェクト化かを考え、その役割に応じて細分化したスタイルをつけていく手法が「OOCSS」と呼ばれる手法なのです。

まずオブジェクトありきで、そこへ部品の役割ごとにまとめたスタイルを指定するという手法です。つまりは、「コンポーネント化したスタイルを用いる、オブジェクト指向のCSS」ということになります。

ああ…専門用語の連発ですみません。とにもかくにも、これがOOCSSというスタイルなのだそう。

その後のスタイルをコンポーネント化するための具体的なコツについては、スライドに7つのポイントがあげられているのでぜひ見て欲しいと思います。

話を聞いて、私が感じたのは次の三点です。

○ページを部品に分ける時(オブジェクト化する時)に、俯瞰して客観的に見れるかどうか?

○管理しやすく、第三者にも理解しやすい、クラスの命名(コンポーネントに命名)ができるか?

○どこまで、細分化して、クラス分け(コンポーネント化)するのか?

この手法をどこまでの深さ・広さで用いるのか? というさじ加減がむずかしいだろうと思います。

懇親会後に、谷さんにそこを質問してみました。するとやはり、OOCSSのルールをきちんと理解しつつも、現場レベルでは柔軟に対応しているそうです。

実際の現場では、ページの内容に合わせて、どこまで使うかのさじ加減は必要で、従来のCSS組の方法も、「それがそのオブジェクトに適している」ならば、使っている。とのことでした。

スライドや執筆した書籍などでの説明は、どうしても端的に、画一的に書き表すことになるけれど、やはり、現場ではケースバイケースなんだなとお話の中で感じました。

同時に思ったことは、「それって、どれだけのケースを経験して来たか? で、コーディングの良しあしが決まるのでは…」と不安にもなりました。

どうやったら、経験を増やすことができるのか? についても質問したところ、よいコーディングをしているサイトを徹底的に読んでみるという答えをもらいました。例として、Twitterのサイトがあげられました。

コーディングの経験が浅いのであれば、読んでみよう。たしかに、いままでCSSを勉強してきた時の最終段階は、いかにいいお手本に巡り合えるか、だったような気がします。

OOCSSによるCSS設計を最初にみると、どうしても、極端に走ってしまい、クラスをたくさんつけていく、ともすれば、回りくどい面倒なやり方と思いがちですが、一番大事なことは、部品分けの設計(オブジェクト化)をきちんとすること。次に大事なのは、重複することなく、スタイルをつけていくこと。

あとは、そのうまいさじ加減さえつかめれば、というところのようです。

最初のCSS設計に時間が取られてしまい、形にするまでの時間がかかるのには、ヤキモキさせられるけれど、うまく整理・設計できれば、後の保守が格段に楽になるはずなので、がんばって、この考え方をモノにしたいと思います。

まずは、いろいろと読んで・試して、ルールを手に馴染ませるところからスタートするのがよさそうです。

プログラミングしかり、コーディングを伴う技術は、その手法が進歩していくものだけれど、ようやく、Webのコーディングも、一歩進んだ考え方が登場したのだと感じました。

・・・さて、今回はここまで。
続きは、後日↓のページにて公開します。
< http://r360studio.com/learn/learn20141108.html >
#Twitterフォローしといてもらえれば、公開したらお知らせしますね。

さてさて。今回は、尻切れな感じでスミマセン。次回は、12月にお会いしましょう。年末近くになってきたので、今年の振り返りみたいなことをやるかも…。ではまた!

※記事へのご意見・ご要望は下記より受付ます。
< http://goo.gl/rN5Dg >

【 森和恵 r360studio 〜 Web系インストラクター 〜 】
<site: http://r360studio.com > <twitter: http://twitter.com/r360studio >
<mail: r360studio@gmail.com >
<サイト制作の教科書 r360study: http://www.facebook.com/r360study >

最近、ぼつぼつと自分のサイトを更新しています。コンテンツの追加や開催セミナーの告知をおりますので、よかったらちらりとご覧くださいませ。