1. 今必要なCSSアーキテクチャ
株式会社オープンストリーム
木村茉由
1
photo:
h(p://www.flickr.com/photos/22439010@N04/7864852790

2. アジェンダ
• 自己紹介
• なぜ今CSSアーキテクチャなのか
• OOCSSの紹介
• SMACSSの紹介
• OOCSS、SMACSSへの素朴な疑問
• まとめ
2

3. 自己紹介
はじめましての方が多いかと思いますので…。
3

4. 自己紹介
• 株式会社オープンストリーム所属
• フロントエンドアーキテクト
• 好きなものはJavaScriptとおうどんです
• 最近翻訳にハマってます（InfoQ）
• 主催者側の人間なのに、一番勉強会のテー
マからズレててすみません…。
• Twitter：@kimura_m_29
4

5. なぜ今CSSアーキテクチャなのか
そんな大げさな…と思われた方へ
5

6. 6
CSSにアーキテクチャとかあるの？

7. 7
CSSなんてコピペでどうにかなるよね

8. 8
…

9. 9
本当にそれで大丈夫？

10. なぜ今CSSアーキテクチャなのか
→そもそも、CSSはカオスになりやすい
10

11. なぜ今CSSアーキテクチャなのか
1. すべての定義がグローバル
→影響範囲が甚大
※<style>タグのscoped属性
親要素およびその子孫要素に対してのみ、スタイルを適
用する
2. HTMLの構造に依存しがち＝壊れやすい
#main
.news
.topics
ul
li
ul
li
{
color:
black;
font-­‐size:
0.8em;
}
11
HTMLの構造が変わったら
適用されなくなる＞＜
Firefox 21.0〜のみ対応

12. なぜ今CSSアーキテクチャなのか
3. スタイル定義の表現が自由すぎる
1. 用途不明のスタイル定義がある
2. セレクタがえらく長い
4. スタイルの優先度の決定方法
1. セレクタの優先度を上げる
1. 詳細にする→HTMLの構造への依存度UP！
2. 最後の切り札『!important』
.blue
{
color:
blue;
}
.main,
.menu
ul
li,
.comments,
.infos,
.sidebar
.component
.?tle
{
…
}
12
どこにも使ってないもの
が混ざっていたり…。
※CSSの優先度について↓
!important だらけの CSS に
お別れを | WWW WATCH

13. なぜ今CSSアーキテクチャなのか
そんなCSSですが…。
• リッチUIな大規模Webアプリケーション
• モバイル向けのHTML/CSS/JavaScript
– モバイル向けサイト、アプリ（PhoneGap等）
→CSSの運用・保守性、パフォーマンス大事！
（モバイルの場合、よりシビア）
13
CSSのファイルサイズ
をなるべく小さく！

14. 14
でも、どうすれば良いのか…！
photo:
h(p://www.flickr.com/photos/59489479@N08/9269503551

15. OOCSSの紹介
オーオーシーエスエスと読みます
15

16. OOCSSの紹介
• 2009年にNicole Sullivanが提唱したCSSの設計
方法
– Object Oriented CSS
• 目的
より良いCSSを書くことで以下を実現する
1. 再利用しやすく
2. 拡張しやすく
3. メンテナンスしやすく
4. ファイルサイズ小さく
5. パフォーマンス向上 etc...
16
“WE
WANT
A
LOT!”
by
Nicole
Sullivan

17. 17
“Components are like legos”
Object Oriented CSS
http://www.slideshare.net/stubbornella/object-oriented-css
photo:
h(p://www.flickr.com/photos/48763139@N00/2432400623

18. OOCSSの2つの原則
1. Separate Structure and Skin
（構造と見た目の分離）
コンポーネントに対するスタイルの種類ごとに、別々の
セレクタにスタイルを定義する
1. レイアウトを定義するスタイル
1. ポジション、サイズ等
2. 見た目を定義するスタイル
1. ボーダーやフォントカラー等
1. バリエーションが増えやすい
18

19. OOCSSの2つの原則：具体例1
19
.widget-­‐basic
{
width:
15em;
height:
15em;
background-­‐color:
white;
color:
black;
}
.widget-­‐primary
{
width:
15em;
height:
15em;
background-­‐color:
blue;
color:
white;
}
CSS
.widget
{
width:
15em;
height:
15em;
}
.basic
{
background-­‐color:
white;
color:
black;
}
.primary
{
background-­‐color:
blue;
color:
white;
}
CSS
<div
class=“widget-­‐basic”></div>
<div
class=“widget-­‐primary”></div>
HTML
<div
class=“widget
basic”></div>
<div
class=“widget
primary”></div>
HTML
レイアウト
見た目
パターンが増えたら…？

20. OOCSSの2つの原則
2. Separate Container and Content
（コンテナとコンテンツの分離）
ページを構成する主要なコンテナと、その子要素で
あるコンテンツとの間に依存関係を持たせない
20

21. OOCSSの2つの原則：具体例2
21
.menu
{
（共通スタイル）
}
.sub-­‐menu
{
（拡張スタイル）
}
CSS
.main
ul,
.sub
ul
{
（共通スタイル）
}
.sub
ul
{
（拡張スタイル）
}
CSS
<div
class=“main”>
<ul>...</ul>
</div>
<div
class=“sub”>
<ul>...</ul>
</div>
HTML
<div
class=“main”>
<ul
class=“menu”>...</ul>
</div>
<div
class=“sub”>
<ul
class=“menu
sub-­‐menu”>
...
</ul>
</div>
HTML
適用したい要素が
増えたら…？
マルチクラスパターン

22. OOCSSのその他のプラクティス
• Avoid singletons（IDセレクタの利用を避ける）
– id属性値は同一ページ内でユニークでなくてはな
らないため、再利用できない
– セレクタの優先順位が高いため、もしもの時のス
タイル上書きは『!important』を使うしかない
22
#widget
{
…
}
#footer
a
{
…
}

23. SMACSSの紹介
スマックスと読みます
23

24. SMACSSの紹介
• 2012年にWebデザイナーのJonathan
Snook
が提唱したCSSの設計方法
– Scalable
and
Modular
Architecture
for
CSS
– Ebook（日本語版）
• OOCSSの流れをくんでいる
24

25. SMACSSの5つのカテゴリ
SMACSSでは、CSSのスタイル定義を下記のカテゴリに分
類して行うことを推奨している
1. ベース
2. レイアウト
3. モジュール
4. 状態（ステート）
5. テーマ
それぞれを別ファイルに分けて管理する
→スタイル定義の複雑さをなくす
25

26. 1. ベース
26

27. 1. ベース
• その名の通り、ベースとなるスタイルを定義
• 基本的に要素セレクタを用い、クラスやIDセ
レクタは使わない
• ブラウザのデフォルトスタイルをクリアするリ
セットCSSはここで定義する
27
html,
body
{
margin:
0;
padding:
0;
}
a:hover
{
color:
#039;
}

28. 2. レイアウト
28

29. 2. レイアウト
• 主要なコンポーネント（ページヘッダやサイド
メニュー、メイン記事等）のスタイルを定義
• 伝統的にIDセレクタが使われることが多い
• 主要コンポーネント間で共通化できるスタイ
ルはクラスセレクタを用いる
29
#header,
#ar?cle,
#footer
{
width:
960px;
margin:
auto;
}

30. 3. モジュール
30

31. 3. モジュール
• 主要なコンポーネントに含まれる、小さなコ
ンポーネント（入力フォームやモーダル等）
のスタイルを定義
• モジュールはそれ単体でスタイルが独立し
ていて、配置場所が変わってもスタイルが崩
れないようにする
• クラスセレクタを使用する（再利用が前提）
31
.module
>
h2
{
padding:
5px;
}

32. 3. モジュールカテゴリのプラクティス
• 要素セレクタを避ける
32
/*
フォルダーモジュール
*/
.fld
li
{
padding-­‐le_:
20px;
background:
url(folder.png);
}
CSS
<div
class=“fld”>
<ul>
<li>Aフォルダ</li>
<li>bbb.txt</li>
←
NEW!
</ul>
</div>
HTML
<div
class=“fld”>
<ul>
<li
class=“fld-­‐name”>Aフォルダ</li>
<li
class=“fld-­‐item”>bbb.txt</li>
</ul>
</div>
HTML
ファイル名の横にも
フォルダアイコンが…！
/*
フォルダーモジュール
*/
.fld-­‐name
{
background:
url(folder.png);
}
CSS

33. 4. 状態（ステート）
33

34. 4. 状態（ステート）
• 活性・非活性、表示・非表示、成功・失敗など
の状態をあらわすスタイルを定義
• 主にJavaScriptのコードから主要コンポーネン
トやモジュールに付与する
34
.is-­‐ac?ve
{
font-­‐weight:
bold
!important;
}
$(‘.tab’).on(‘click’,
func?on
()
{
//
クリックされたタブに活性化スタイルを付与
$(this).addClass(‘is-­‐ac?ve’);
});
※他のタブの活性化スタイル除
去は割愛
既存スタイルを上書きすることが多い
ので、『!important』解禁！
（※ご利用は計画的に）

35. 5. テーマ
35

36. 5. テーマ
• テーマ切り替え用のスタイルを定義
• あまり活躍する場面はないかも…。
36
/*
theme-­‐purple.cssで定義
*/
.theme-­‐border
{
border-­‐color:
purple;
}

37. OOCSS、SMACSSへの素朴な疑問
私はこういうところに引っかかりました
37

38. class属性値の数が多くなりそう＞＜
• はい、多くなります！
– HTMLをシンプルに保つ＝CSSが頑張る
• CSSの頑張りは、HTMLの構造への依存を高めてしまう
• HTMLの構造変更に影響を受けやすくなる
38
<div
id=“snsArea”>
<bufon>
Twiferでつぶやく
</bufon>
</div>
HTML
<div
id=“snsArea”>
<bufon
class=“btn
btn-­‐sns”>
Twiferでつぶやく
</bufon>
</div>
HTML

39. classが全然セマンティックじゃない気が…？
• はい、その通りです！
– そもそも、セマンティックである必要があるのか
• たしかに、HTML5の仕様に書いてあるけど…。
– CSSの運用・保守性を犠牲にしてまで、守るべきものかどうか
• Microformats（class属性）→Microdata（独自属性）
39
<bufon
class=“twiferBufon”>
Twiferでつぶやく
</bufon>
HTML
<bufon
class=“btn
btn-­‐sns”>
Twiferでつぶやく
</bufon>
HTML

40. DOM操作のパフォーマンス向上を考えると、
やっぱりid属性使いたいよ…！
• はい、仰るとおりです！
– id属性はJavaScriptが参照するものとして使う
– JavaScript用のid、classはプリフィックスに「js-­‐」を
付ける
• 用途が明確になる
• HTMLから未使用のclass属性値を消しやすくなるかも
40
<bufon
class=“btn
btn-­‐sns”
id=“js-­‐twiferBufon”
>
Twiferでつぶやく
</bufon>
HTML

41. まとめ
長々お付き合いありがとうございました！
41

42. まとめ
• やっぱり、銀の弾丸はありません＞＜
– 引き出しを多く持っておき、状況に応じて適用す
るというアプローチになる
– バランス感覚も重要
• CSSもコードレビューが必要ですね…。
– CSSLintの採用も良さそう
• OOCSSのNicole Sullivanが関わっています
• 今【だけじゃなく、むしろ未来にとって】必要な
CSSアーキテクチャ
42

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