CSSアーキテクチャ色々

OOCSS, SMACSS, BEM, APBCSS,…

$ whoami

@mikesorae (まいく)

iOS/Android/Ruby/Java/ソフトウェアテスト

株式会社ビズリーチ

スマホアプリ > Webアプリ > ベトナム > プロセス改善

CSS&マークアップの歴史

1990年 2000年 2010年 2015年インターネット黎明期

CSS1, Table Layout,直打上等

Ajax! Web2.0! 動的コンテンツの増加

CSS2, ブラウザ仕様大戦争

HTML4.0 jascriptﾁｮｯﾄﾃﾞｷﾙ

HTML5, CSS3, ブラウザ互換重視

XHTML1.0

bootstrap, レスポンシブデザイン

sass, less, stylus, … メタ言語の登場

oocss, smacss, bem, … 構造設計重視

※個人的な感想を含みます

マークアップにおける課題

• 文書構造とレイアウト情報の分離

• HTML、CSS構造の体系化

• コンテンツへの意味情報の付与

• Microdata, RDFa, JSON-LD等による意味付け

運用における問題点

• 長期間/多人数運用によるマークアップの複雑化

• CSSの命名規約が人によってバラバラ

• HTML構造が複雑で要素の追加削除が困難

• jsによって追加/変更される要素が判別不能

メタ言語の登場

• HTML/CSSの部品を効率良く記述/再利用するため、HTMLやCSSを拡張したメタ言語が登場

• HTML

• haml/slim/jade/…

• CSS

• sass/scss/less/stylus/…

CSSアーキテクチャの登場

• HTML、CSSにも構造設計が必要

• 画面要素や属性情報をコンポーネント/モジュール化

• 命名規約やid/class運用ルールを縛ることで複雑化、肥大化を制御

CSSアーキテクチャの種類

• OOCSS

• SMACSS

• BEM

• FLOCSS

• MCSS

• APBCSS

• etc

マルチクラス/シングルクラス

• マルチクラス: 一つの要素に複数のクラスを割り当てて目的のスタイルを実現する

• 例) .login-form-btn.btn.btn-small.btn-dark.span-2

• シングルクラス: 一つの要素に一つのクラスを割り当てて目的のスタイルを実現する

• 例) .login-form-btn

• シングルクラスはsass/less等によるプリコンパイルがほぼ大前提

特徴: OOCSS

.nav.nav-fixed.nav-dark

.form.grid-8

.input.input-focused

.input

.btn.btn-small

• オブジェクト指向

• 構造と見た目を分離

.container

特徴: SMACSS

.l-nav.l-nav-dark

.l-login

.input.is-focused

.input

.btn

• CSSをBase, Layout, Module, State, Themeに分類

• Base: 基本的な装飾

• Layout: 配置

• Module: 部品

• State: 状態

• Theme: サイトの雰囲気等.l-container

.theme-winter

特徴: BEM

.nav—dark

.login

.login__input-name—focused

.login__input-password

.login__submit-btn

• CSSをBlock, Element, Modifierに分類

• Block: 画面要素の塊

• Element: Block内の要素

• Modifier: Block, Elementの装飾(?)

• .block__element—modifierのように命名を規定.container

特徴: MCSS

.nav—dark

.login

.input.input-name.__focused

.input.input-password

.input.submit-btn

• CSSをBase, Project, Cosmeticsに分類

• Base

• Project

• Cosmetic

• モジュールの分割、レイヤーのリンク順序等を規定.container

特徴: FLOCSS

#nav.u-nav—dark

.p-login

.c-input-name.is-focused

.c-input-password

.c-submit-btn

• CSSをFoundation, Layout, Objectに分類

• 更にObjectをComponent, Project, Utilityに分類

• レイヤーリンク順序、カスケーディングルールを規定

• SMACSS, BEM, MCSSの良いところをあつめた感じ#container

実運用における問題点

• ファイルの分割粒度が人によってことなる

• 細かすぎると逆にメンテナンスしづらい

• 目的のモジュールがどこにあるか分からない

• 似たようなモジュールが複数再発明される

• そこそこ学習コストがかかる

• 人の入れ替わりタイミングで激しく規約からブレる

対策

• 設計ドキュメント、規約作成、学習コストを考慮して導入する

• BootstrapやSemanticUIなどのUI Frameworkのように、モジュールのサンプルページを作る

サイト別分析

ObjectOriented Layered MindBEMding Multi/Single

Class

Amazon ○ × × Multi

Wantedly ○ △ × Multi

Connpass ○ × × Multi

Gunosy ○ ○ × Single

Conoha ○ △ △ Multi間違ってたらすみません。。。

CSSアーキテクチャ導入の現状

• 長期間運用に成功してる例を見かけない

• 成功事例知ってたら教えて下さい

• 運用中にルール崩壊しているケースが多そう

学び

• ここにも銀の弾丸はない

• 大事なのは全員が同じ概念や規約を共有すること

• プロセスや使っているツールに合わせてテーラリングする

• 過度なモジュール化は避ける