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

Architecture for CSS

悩まないコーディングをしよう！  

 OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計

ホリグチ　セイト

自己紹介

Front-End-Engineer

趣味Lang-8（先週から）、漫画（いろいろ）、 宇宙とかSFとか

担当している業務html,css,jsを用いいた中規模メディアサイト, Webアプリケーションの開発

2001

!2014 2014

経歴初めてWebサイトを作る。当時最もモダンな「メモ帳」なるエディターを使い、 また「おえかき掲示板」「キリ番システム」などのリッチコンテンツを提供した。 デザイナーからフロントエンドエンジニアに転身。 カルタ大会やハッカソンなど、業務外の事で活躍し始める。

はじめに

アジェンダ

CSS設計の3大メソッドOOCSS BEM SMACSS

設計で必要な3つのこと設計指針 ディレクトリ構成 スタイルガイド

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

まとめ

～はじめに～

CSS設計って何それ美味しいの？

CSS設計とは

※引用1　『SMACSS: Scalable and Modular Architecture for CSS』

!CSSをより体系立て、より構造化させることで、 制作とメンテナンスをより容易に行うこと

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

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

たくさん知ろう

いいとこだけ取ろう

自分なりの設計をしてみよう

CSS設計の3大メソッド

OOCSS

BEM

SMACSS

OOCSS

オブジェクト指向に基づいて考案された設計手法。

米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に切り離して考える

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

.registration > button{ … }　というような、依存したスタイルの充て方ではなく、

.btn{ … }というように独立させてスタイルを充てると、色々なところで使い回せる

ストラクチャーとスキンを切り離そう

skin

(color)

structure

(display,text-align,…etc)(width,height)

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

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>

BEM

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__text

.registraion__input

.registraion__heading

.registraion__btn

Block, Element, Modifier

Modifier

Block, Element, Modifier

.registraion__btn_color_bule

BEMのエッセンスをとり入れつつ、命名ルールは

自分たちでカスタマイズするのもあり

MindBEMding

CSS Wizardly Harry Roberts氏 http://csswizardry.com/2013/01/mindbemding-getting-your-head -round-bem-syntax/

SMACSS

OOCSS,BEMの流れを汲みつつ、著者の経験や理論も交えてドキュメントに落とし

込まれたスタイルガイド（コーディングルール）。

Jonathan Snook氏によって考案された。

SMACSSとは

大きな特徴

要素を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

Base

Layout

Module

State

Theme

Base

Layout

Module

State

Theme

.tab .is-current

Base

Layout

Module

State

Theme

その他にもいろいろ

マルチクラス推奨ざっくりした命名規則Sassでの実装方法

などなど

設計で必要な3つのこと

ディレクトリ構成

スタイルガイド

設計指針

設計指針

設計指針

コーディングを行う際に守るべき約束事。

方針。

コーディング中に迷いが生じたら、これを

元に判断・解決する

HTMLとコンテントのセマンティックな価値を向上すること

特定のHTML構造への依存を低減すること

設計指針　例

SMACSSの場合

※引用1　『SMACSS: Scalable and Modular Architecture for CSS 日本語』

絶対にCSSを増やしたくない

class名で悩みたくない

設計指針　例

KOJI ISHIMOTO氏の場合

※引用2　KOJI ISHIMOTO『ぼくのかんがえたさいきょうのしーえしゅえしゅ』

完璧じゃなくてもいい

石本 光司 @t32k Front-end-engineer サイバーエージェント所属 JS Girl　ファウンダー

ディレクトリ構成

ディレクトリ構成例（SMACSSベース）

scss js imagehtml

ディレクトリ構成例（SMACSSベース）

scss js imagehtml

normlize.scss  helper.scss

header.scss  footer.scss  main.scss  side.scss

button.scss  heading.scss  table.scss  form.scss                            …etcmixin.scss  

setting.scss  common.scss

ディレクトリ構成例（SMACSSベース）

scss

base

layout

module

mixin.scss  setting.scss  common.scss

ディレクトリ構成例（SMACSSベース）

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は案外めんどくない

BEMは案外めんどくないS

Dashのスニペット機能が超絶楽

PhpStormの補完機能は強力

.block{ &__element{ background: black; } }

.block__element{ background: black; }

Sass 3.3̃の使うと省略できる

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

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

OOCSS

マルチクラス向きシングルクラス向き

.registration__btn_color_pink .btn .btn_pink .btn_small

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

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

オススメ

まとめ

たくさん知ろう

いいとこだけ取ろう

自分なりの設計をしてみよう

OOCSS

たくさん知ろうS

OOCSS

いいとこだけ取ろうS

OOCSS

自分なりの設計をしてみようS

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

参考文献S

※引用1　Jonathan Snook,斉藤祐也『SMACSS: Scalable and Modular Architecture for CSS』 https://smacss.com/ja

※引用3　Twitter『 Bootstrap』 http://getbootstrap.com/

※引用2　KOJI ISHIMOTO『MOL - Designing for a Mobile World!』 http://t32k.me/mol/log/the-perfect-css-i-thought/

株式会社ピクセルグリッド『Code Grid』 https://app.codegrid.net/

Harry Roberts『CSS Wizardly』 http://csswizardry.com/

谷 拓樹『Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」 の設計手法』 http://www.impressjapan.jp/books/1113101128

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