Master architecture for_css

Architecture for CSS 悩まないコーディングをしよう！ OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計

ホリグチ　セイト自己紹介 Front-End-Engineer 担当している業務 html,css,jsを用いいた中規模メディアサイト, Webアプリケーションの開発趣味 Lang-8（先週から）、漫画（いろいろ）、宇宙とかSFとか経歴 2001 ! 2014 2014 初めてWebサイトを作る。当時最もモダンな「メモ帳」なるエディターを使い、また「おえかき掲示板」「キリ番システム」などのリッチコンテンツを提供した。デザイナーからフロントエンドエンジニアに転身。カルタ大会やハッカソンなど、業務外の事で活躍し始める。

アジェンダはじめに CSS設計の3大メソッド OOCSS BEM SMACSS 設計で必要な3つのこと設計指針ディレクトリ構成スタイルガイド業務で実践してみてわかった7つのことまとめ

～はじめに～ CSS設計って何それ美味しいの？

CSS設計とは ! CSSをより体系立て、より構造化させることで、制作とメンテナンスをより容易に行うこと ※引用1　『SMACSS: Scalable and Modular Architecture for CSS』

ＣＳＳに強い拡張性、保守性、明瞭性を持たせることが大事と、言われています

というわけで、今回僕がお話しさせていただくことは3つです

たくさん知ろういいとこだけ取ろう自分なりの設計をしてみよう

CSS設計の3大メソッド

OOCSS BEM SMACSS

オブジェクト指向に基づいて考案された設計手法。米Yahoo!のNicole Sullivan氏によって考案された。 ! OOCSSで設計されている代表的なサイト ! ! OOCSSとは

大きな特徴は以下の2つ要素をContainerとContentsに切り離して考える要素をStructureとSkinに切り離して考える

要素をContainerとContentsに切り離して考える

要素をContainerとContentsに切り離して考える Container

要素をContainerとContentsに切り離して考える .registration

要素をContainerとContentsに切り離して考える Contents

要素をContainerとContentsに切り離して考える .text .input .heading .btn

要素をContainerとContentsに切り離して考える

要素をContainerとContentsに切り離して考える .registration > button{ … }　というような、依存したスタイルの充て方ではなく、 .btn{ … }というように独立させてスタイルを充てると、色々なところで使い回せる

ストラクチャーとスキンを切り離そう (color) skin (display,text-align,…etc) structure (width,height)

structure skin

structure skin .btn{ display: inline-‐block; border-‐radius: 5px; text-‐align: center; } .btn-‐green{ background: green; } .btn-‐black{ background: black; } .btn-‐pink{ background: pink; } .btn-‐blue{ background: blue; }

structure skin .btn{ display: inline-‐block; border-‐radius: 5px; text-‐align: center; } .btn-‐large{ width: 300px; height: 50px; } .btn-‐medium{ width: 200px; height: 40px; } .btn-‐small{ width: 100px; height: 30px; }

structure + skin = <button class="btn btn-‐pink btn-‐medium">button</button>

structure + skin = <button class="btn btn-‐black btn-‐large">button</button>

structure + skin = <button class="btn btn-‐green btn-‐small">button</button>

html構造を明確にすることに軸を置いた設計方法。厳格な命名規則が特徴。ロシアのYandex社によって考案された。 ! BEMで設計されている代表的なサイト ! ! BEMとは

大きな特徴は以下の2つ要素を Block, Element, Modifierの3つに分ける .Block__Element_Modifierという命名ルールを用いる

Block, Element, Modifier

Block, Element, Modifier Block

Block, Element, Modifier .registration

Block, Element, Modifier Element

Block, Element, Modifier .registraion__heading .registraion__text .registraion__input .registraion__btn

Block, Element, Modifier Modifier

Block, Element, Modifier .registraion__btn_color_bule

MindBEMding BEMのエッセンスをとり入れつつ、命名ルールは自分たちでカスタマイズするのもあり CSS Wizardly Harry Roberts氏 http://csswizardry.com/2013/01/mindbemding-getting-your-head -round-bem-syntax/

SMACSS

SMACSSとは OOCSS,BEMの流れを汲みつつ、著者の経験や理論も交えてドキュメントに落とし込まれたスタイルガイド（コーディングルール）。 Jonathan Snook氏によって考案された。

大きな特徴要素をBase,Layout,Module,State,Theme の5つに分ける

Base Layout Module State Theme

Base Layout Module State Theme ! reset.css helper.css …etc

Base Layout Module State Theme .tab .is-current

その他にもいろいろマルチクラス推奨ざっくりした命名規則 Sassでの実装方法などなど

設計で必要な3つのこと

設計指針ディレクトリ構成スタイルガイド

設計指針

設計指針コーディングを行う際に守るべき約束事。方針。コーディング中に迷いが生じたら、これを元に判断・解決する

設計指針　例 SMACSSの場合 HTMLとコンテントのセマンティックな価値を向上すること特定のHTML構造への依存を低減すること ※引用1　『SMACSS: Scalable and Modular Architecture for CSS 日本語』

設計指針　例 KOJI ISHIMOTO氏の場合絶対にCSSを増やしたくない class名で悩みたくない完璧じゃなくてもいい石本光司 @t32k Front-end-engineer サイバーエージェント所属 JS Girl　ファウンダー ※引用2　KOJI ISHIMOTO『ぼくのかんがえたさいきょうのしーえしゅえしゅ』

ディレクトリ構成

ディレクトリ構成例（SMACSSベース） html scss js image

ディレクトリ構成例（SMACSSベース） normlize.scss helper.scss header.scss footer.scss main.scss side.scss button.scss heading.scss table.scss form.scss scss mixin.scss …etc setting.scss common.scss base layout module

ディレクトリ構成例（SMACSSベース） scss mixin.scss setting.scss common.scss normlize.scss helper.scss header.scss footer.scss main.scss side.scss button.scss heading.scss table.scss form.scss …etc base layout module

ディレクトリ構成例（SMACSSベース） common.scss @importして1つのCSSに @import "normlize.scss"; @import “helper.scss”; ! @import "header.scss"; @import "footer.scss"; @import "main.scss"; @import "side.scss"; ! @import "button.scss"; @import "heading.scss"; @import "table.scss"; @import "form.scss";

ディレクトリ構成　まとめカテゴライズして分けておくと管理しやすい SMACSSなどのスタイルガイドを参考にしよう（他にこんなのもあります）

スタイルガイド

スタイルガイドモジュールの一覧表。コンポーネント一覧と呼ばれることもしばしば。コーディングルールやカラーコードを載せる　となお良い。

※引用3　Twitter『 Bootstrap』

スタイルガイド　作り方 htmlとcssでべた書きで作るジェネレーター使う

スタイルガイド　参考になるもの CSS フレームワークコーディングルール

スタイルガイド　まとめコンポーネントの一覧があると保守しやすく、コミュニケーションコストを減らせるジェネレーターを使おう

業務で実践してみてわかった 7つのこと

設計がオリジナルすぎると残業増える

設計がオリジナルすぎると残業増える設計者＆作業者のコミュニケーションコストが増える既存の手法を取り入れつつ、厳しすぎないルールを設ける S 命名ルールってこの場合はどうなるの？このデータはどこに入れるべき？これはElement ? それともBlockかな？ oh…

ベストプラクティスなんてない！

ベストプラクティスなんてない！時と場合による S メンバー案件の内容期限

S ベストプラクティスなんてない！メンバー案件の内容期限自分なりの設計をしてみよう

言葉の意味はしっかり定義しとく

言葉の意味はしっかり定義しとく ContainerとContentとか、 BlockとElementtとか、 Moduleとか…言い方多すぎ？ Layoutってどこの部分？ S

BEMは案外めんどくない

S BEMは案外めんどくない Dashのスニペット機能が超絶楽 PhpStormの補完機能は強力 .block{ &__element{ background: black; } } Sass 3.3̃の使うと省略できる .block__element{ background: black; }

OOCSSとBEMは混ぜるとちょい危険

S OOCSSとBEMは混ぜるとちょい危険 OOCSS シングルクラス向きマルチクラス向き .registration__btn_color_pink .btn .btn_pink .btn_small

S OOCSSとBEMは混ぜるとちょい危険 OOCSS .Block__Element._modifier .registraion__btn._color_pink

セマンティックにこだわりすぎるのもよくない

S セマンティックにこだわりすぎるのもよくない .btn-blue .btn-pink .btn-green .btn-default .btn-primary .btn-success .btn-a .btn-b .btn-c 予測しやすい予測しづらい変更しづらい変更しやすい

オブジェクト指向を勉強すると OOCSSが楽しくなる

オブジェクト指向を勉強するとOOCSSが楽しくなるスーパークラスとサブクラス複合オブジェクト　など S オススメ ITmedia エンタープライズ『5分で絶対に分かるオブジェクト指向』 URL : http://www.itmedia.co.jp/im/articles/0703/06/news125.html

まとめ

たくさん知ろういいとこだけ取ろう自分なりの設計をしてみよう

S たくさん知ろう OOCSS

S いいとこだけ取ろう OOCSS

OOCSS S 自分なりの設計をしてみよう自分や周りの環境に合わせて、最適な設計をしよう

S 参考文献 ※引用1　Jonathan Snook,斉藤祐也『SMACSS: Scalable and Modular Architecture for CSS』 https://smacss.com/ja ※引用2　KOJI ISHIMOTO『MOL - Designing for a Mobile World!』 http://t32k.me/mol/log/the-perfect-css-i-thought/ ※引用3　Twitter『 Bootstrap』 http://getbootstrap.com/ 谷拓樹『Web制作者のためのCSS設計の教科書モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法』 http://www.impressjapan.jp/books/1113101128 株式会社ピクセルグリッド『Code Grid』 https://app.codegrid.net/ Harry Roberts『CSS Wizardly』 http://csswizardry.com/

ご清聴ありがとうございました！

Master architecture for_css

by Horiguchi Seito , Web Developer at LIG inc.

on Sep 09, 2014

Statistics

Views

Actions

1 Embed 4

Accessibility

Categories

Upload Details

Usage Rights

Report content

Master architecture for_css Presentation Transcript