CSS Nite LP31: Webデザイン行く年来る年（Shift7）フォローアップ（2）益子 貴寛さん（サイバーガーデン）、小山田 晃浩さん（ピクセルグリッド） | CSS Nite公式サイト

2013年12月14日、ベルサール神田　イベントホール（2F）で開催したCSS Nite LP, Disk 31: Webデザイン行く年来る年（Shift7）のフォローアップとして、益子 貴寛さん（サイバーガーデン）、小山田 晃浩さん（ピクセルグリッド）の『新しいマークアップ環境にキャッチアップ！』セッションのスライドなどをシェアします。

益子から

コンビ3年目、ピクセルグリッドの小山田さんと一緒に、マークアップセッションを担当した益子です。

ここ一年の話題を、だいぶムダなく伝えられた感触です。エンジニアではない人も、今回のセッションで聞いた言葉をなんとなくおぼえておいて（「なんとなく」でも言葉や考え方を知っていることが、とても大切ですね）、仕事に生かしていただけたらうれしいです。

東証上場企業のDOCTYPEの調査結果は、今度まとめて、どこかで公開しようかと考えています。時間の関係で含めなかった「考察」も、どこかで発表できればと（disりまくりのマズイ話もありそうなので、一部ツイート禁止とかで）。ネタのオンパレードというか、かなりおもしろい話ができそうです。

お世辞やお愛想、また関係者のひいき目なしに、ひとりの聞き手として、すべてのセッションとも得ることが山盛りでした。マジメななかに笑いもたくさんで、楽しかったです。単純に「知識のデリバリー」だけではなく、長丁場だけど参加してよかったと思ってもらえるような「楽しい時間づくり」に、出演者とスタッフはいつも心を尽くしていて、それがきちんと果たせたイベントになったと思うのです。

来年も、みなさんとお会いできたら幸いです。

小山田から

益子さんとともにマークアップセッションを担当した小山田です。ご紹介した内容、いかがでしたでしょうか。

確実に、方法やツールが変わってきていると感じている方も多いかと思います。特に、Webページはパーツの集まり、という考え方は今後も多くのWebサイトで取り入れられていくでしょう。そのベースとなるBEMの考え方をまずは意識してみるといいでしょう。

また、Sassについては、勉強し始めたというかたはぜひCSS Nite LP, Disk 32: Sassにご参加いただくといいでしょう。また、すでに使われているという方も、今後Sassのバージョンも順調に上がり、Sass 3.3が正式リリースされる予定です。より便利になる環境を手に入れ、周りの人のレベルにいつでも合わせられるようにしておくといいでしょう。

さて、アンケートの中でいくつかご質問いただいた内容をここで回答とともに共有します。

Q：ChromeがBlinkを採用したら、ベンダープリフィックスはどうなりますか？

Chrome上でも、しばらくは-webkit-が利用され続けます。これは、Chrome(Blink)はあくまでもWebKitの枝分かれであり、ベースはWebKitだからです。一方で、少し先を見ると、Blinkでは、ベンダープリフィックスは極力利用せず、設定画面で有効/無効を変更する仕組みになるようです。つまり、今あるWebサイトを、Blink用に作り替える必要はありませんのでご安心ください。

Q：クラス名の文字数が長いと感じたのですが、管理しやすいのでしょうか？

名前は常に衝突するという不安がついてまわります。BEMではそれをルールで解決することができます。残念ながら、そのクラス名は長くなってしまいますが、衝突する心配はなくなります。たとえば、class="title"よりは、 class="contenttitle"とclass="producttitle"のほうが、衝突する危険は少ない、というわけです。

Q：SMACSS、BEMも取り入れつつ、なかなか設計の勘どころがむずかしく、後悔することが多々あります。うまいトレーニング（思考方法）はないでしょうか？

ワイヤーフレームやデザインの段階である程度設計されていることが重要になります。デザイン上の表現のブレがあった場合、それは「デザイナーのミス」なのか、それとも「意味があって違うのか」など、実装者はデザイナーと綿密に問題点を共有するといいでしょう。「意味があって違う」場合には、BEMでいう「Modifier」で調整するとうまく収まるはずです。

あとは、数をこなして経験をしましょう。小さいWebサイトでも、1000ページあると仮定して、パーツを分解し、最初からページをつくるのではなく、まずはスタイルガイドをつくり、そのあと、スタイルガイドからパーツを抜き出して実際のページを作成するという手順をとるといいでしょう。

Q：ベンダープリフィックスの「-webkit-」はもう使えませんか？　いままで使っていたハックはどうなりますか？

一つ目のご質問はすでに上記と同じ内容ですね。CSSハックについては、あくまでもブラウザーの不具合を利用した、あまりよくないバッドノウハウですので、できるだけ使わず、Modernizrによるフィーチャーディテクションを活用するといいでしょう。

CSS Nite Shift7［2］ 新しいマークアップ環境にキャッチアップ！ from CSS Nite on Vimeo.