7. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
その親要素、
要るの?
親要素が違う場合はどうなるん
だろうと不安になるセレクタ群。
yellowIconという同名で異なる
画像を使用するパターンがある
のだろうか……。
.myModule .yellowIcon,
span .yellowIcon,
p .yellowIcon {
display:inline-block;
width: 15px;
height: 15px;
background:no-repeat url(icon.gif) 0 4px;
}
8. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
遺跡の修繕、
リファクタしよう
の、HTML/CSS編
9. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
迷路状態
ドキュメント:なし
構造、記法のルール:なし
パーツごとの標準的な仕様:なし
作ろう
決めよう
見直そう
10. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
ドキュメント
11. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
スタイルガイド(KSS)
KSS
様々な言語でジェネレータがある
導入コストは高いが柔軟で、
比較的記述しやすい
無駄なCSSの増殖を抑制…できるといいな
12. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
その他スタイルガイド
StyleDocco
導入は簡単(gulp,grunt,etc)
Modifierまでマークアップするのが面倒
DSS
Javadoc風の記法
多くのプリプロセッサに対応
コメント補助Sublimeプラグインがある
node,grunt環境ならオススメ
13. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
その他ドキュメント
構造やルールの説明
GithubのWikiに記載
mixinやfunctionの説明
必要に応じてSassDocを利用予定
mixinに頼る設計ではないため現状ナシ
14. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
構造、記法
15. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
BEM
コンポーネントの使い回しが多い
複雑化しても詳細度が上がらない
※改造してModifierは詳細度上がる
16. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
.Block__element
.m-odifier
17. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
.Block
__element
.m-odifier
modifierだけ別クラス化。
ただしmodifier単体のルール
セットは存在しない。
18. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
粒度をそろえる
基本的な考え方はBEM
Block, element, modifier
でもコンポーネントの粒度は捉え方次第
粒度の考え方をルール化してしまう
19. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
粒度のルール(の一例)
elementは1階層まででネストはしない
1つのBlockが持つことができるelementは
基本4種類+リンク
機能や見た目ではなく、
このルールが適用できる粒度に分解する
.Block__element__elementino
20. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
基本4種類
+リンク
head
body
item
foot
link
body
item
item
item
head
foot
link
Block
21. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
例
22. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
例
Block
23. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
例
Block
head
body
foot
24. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
例
head
body
foot
?
?
Block
25. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
例
Block
26. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
例
Block
head
item
item
item
foot
item.m-thumb
item
27. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
例
TopixList
TopixBox