O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
リファクタリング

HTML/CSS
ヤフー株式会社

マーケティングソリューションカンパニー

開発本部エクスペリエンスデザイン部

テクニカルデザイン



ヒラヤ ナオコ
∼レガシー世界を超えて∼
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
ふんわり自己紹介
美術史出身のエクストリーム文系
アプリデザインや大規模サイト運用を経て
ペラ...
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
広告管理ツール
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
掘れば何か出てくる

超巨大遺跡(現役)
もともと大規模なシステム
度重なる仕様・機能追加
設...
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
掘れば何か出てくる

超巨大遺跡(現役)
もともと大規模なシステム
度重なる仕様・機能追加
設...
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
見た目は

同じはず?
ひとつのスタイルを当てるのに、
機能をクラス名にしてしまうと
こうなる...
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
その親要素、
要るの?
親要素が違う場合はどうなるん
だろうと不安になるセレクタ群。


ye...
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
遺跡の修繕、

リファクタしよう
の、HTML/CSS編
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
迷路状態
ドキュメント:なし
構造、記法のルール:なし
パーツごとの標準的な仕様:なし
作ろう...
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
ドキュメント
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
スタイルガイド(KSS)
KSS
様々な言語でジェネレータがある
導入コストは高いが柔軟で、
...
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
その他スタイルガイド
StyleDocco
導入は簡単(gulp,grunt,etc)
Mod...
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
その他ドキュメント
構造やルールの説明
GithubのWikiに記載
mixinやfuncti...
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
構造、記法
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
BEM
コンポーネントの使い回しが多い
複雑化しても詳細度が上がらない

※改造してModifi...
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
.Block__element
.m-odifier
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
.Block

__element
.m-odifier
modifierだけ別クラス化。

た...
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
粒度をそろえる
基本的な考え方はBEM
Block, element, modifier
でもコ...
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
粒度のルール(の一例)
elementは1階層まででネストはしない

1つのBlockが持つこ...
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
基本4種類

+リンク
head
body
item
foot
link
body
item
...
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
例
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
例
Block
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
例
Block
head
body
foot
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
例
head
body
foot
?
?
Block
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
例
Block
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
例
Block
head
item
item
item
foot
item.m-thumb
i...
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
例
TopixList
TopixBox
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
例.css
こんな感じに。
/* ボックス全体 */
.TopixBox {

width: ...
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
例2
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
例2.scss
Sass3.4なら記述もスッキリ。

head, body, footはそれぞ...
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
でも柔軟に
名前は一例
もちろん例外もある
__inputとか、__btnとか
1つのBloc...
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
ルールの分けかた
.A…エラー表示用、別パターンなし
.B…お知らせ用、色・アイコンパターンあり
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
やり方色々
.iconLabel
共通のスタイルにはO.O的な細かい汎用クラスを作成。
.pa...
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
やり方色々
Block, elementごとに記述
.ErrorPanel { 赤枠、赤背景、...
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
ルールを明確に
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
ルールを明確に
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
ルールを明確に
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
BEMコンポーネント

 +

汎用パーツ
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
構成
base/
elements/
modules/
pages/
stickers/
st...
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
base
ノーマライズやリセット、レイアウト
変数、関数、mixin
基本的にプロジェクト開始...
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
elements
MCSSでいうベースレイヤー
ボタン、ラベルなどの汎用パーツ
階層構造を持た...
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
modules
MCSSでいうプロジェクトレイヤー
複数要素からなるBEMコンポーネント群
....
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
pages
ページ固有のスタイルを記述
上書き用ではない
ページ名に関連付いた接頭辞などで

...
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
stickers
一時的なレイアウト変更など
シングルルールのクラス
.s-sticker
こ...
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
style.scss
全てのパーシャルを読み込む
ディレクトリはアルファベット順なので

その...
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
UI仕様
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
UI仕様もソースから
同機能でもUI仕様がブレブレ

配置、サイズ、色……
似た名前やモディフ...
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
例
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
例
.VerticalList__link
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
UI仕様もソースから
ソースを読めばルールがわかる
新規モジュールを作るときは

スタイルガイ...
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
まとめ
まずはドキュメント環境をつくる
リファクタしながらルールを作る
仕様のブレはソースから...
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
ご静聴ありがとう
ございました。
Próximos SlideShares
Carregando em…5
×

リファクタリングHTML/CSS ~レガシー世界を超えて~ #scripty03

3.779 visualizações

Publicada em

2015/3/10の勉強会にて発表された資料です。

SCRIPTY#3 ~フロントエンド紳士・淑女のための勉強会~
http://scripty.connpass.com/event/12374/

Publicada em: Tecnologia
  • Seja o primeiro a comentar

リファクタリングHTML/CSS ~レガシー世界を超えて~ #scripty03

  1. 1. リファクタリング
 HTML/CSS ヤフー株式会社
 マーケティングソリューションカンパニー
 開発本部エクスペリエンスデザイン部
 テクニカルデザイン
 
 ヒラヤ ナオコ ∼レガシー世界を超えて∼
  2. 2. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 ふんわり自己紹介 美術史出身のエクストリーム文系 アプリデザインや大規模サイト運用を経て ペライチとか作る係
  3. 3. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 広告管理ツール
  4. 4. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 掘れば何か出てくる
 超巨大遺跡(現役) もともと大規模なシステム 度重なる仕様・機能追加 設計担当者も実装担当者も変わる
  5. 5. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 掘れば何か出てくる
 超巨大遺跡(現役) もともと大規模なシステム 度重なる仕様・機能追加 設計担当者も実装担当者も変わる カオス!!
  6. 6. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 見た目は
 同じはず? ひとつのスタイルを当てるのに、 機能をクラス名にしてしまうと こうなる。 .myModule .orenoBtn, .myModule .omaenoBtn, .myModule .oreToOmaenoBtn, .myModule .kiminoBtn, .myModule .anatanoBtn, .myModule .kimitachinoBtn, .myModule .oregaOmaedeOmaegaOredeBtn, .myModule .oregaOretachigaBtn, .myModule .darekanoBtn, .myModule .karenoBtn, .myModule .kanojonoBtn, .myModule .anoBtn, .myModule .konoBtn, .myModule .sonoBtn, .myModule .donoBtn, .myModule .yabaiBtn, .myModule .sugoiBtn, .myModule .choberibaBtn, .myModule .mk5Btn, .myModule .kaeruBtn { display:inline-block; width:15px; height:15px; background:no-repeat url(icon.gif) 0 4px; text-decoration:none; overflow:hidden; margin:0 0.2em 0 0; cursor:pointer; }
  7. 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. 8. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 遺跡の修繕、
 リファクタしよう の、HTML/CSS編
  9. 9. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 迷路状態 ドキュメント:なし 構造、記法のルール:なし パーツごとの標準的な仕様:なし 作ろう 決めよう 見直そう
  10. 10. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 ドキュメント
  11. 11. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 スタイルガイド(KSS) KSS 様々な言語でジェネレータがある 導入コストは高いが柔軟で、
 比較的記述しやすい 無駄なCSSの増殖を抑制…できるといいな
  12. 12. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 その他スタイルガイド StyleDocco 導入は簡単(gulp,grunt,etc) Modifierまでマークアップするのが面倒 DSS Javadoc風の記法 多くのプリプロセッサに対応 コメント補助Sublimeプラグインがある node,grunt環境ならオススメ
  13. 13. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 その他ドキュメント 構造やルールの説明 GithubのWikiに記載 mixinやfunctionの説明 必要に応じてSassDocを利用予定 mixinに頼る設計ではないため現状ナシ
  14. 14. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 構造、記法
  15. 15. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 BEM コンポーネントの使い回しが多い 複雑化しても詳細度が上がらない
 ※改造してModifierは詳細度上がる
  16. 16. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 .Block__element .m-odifier
  17. 17. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 .Block
 __element .m-odifier modifierだけ別クラス化。
 ただしmodifier単体のルール セットは存在しない。
  18. 18. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 粒度をそろえる 基本的な考え方はBEM Block, element, modifier でもコンポーネントの粒度は捉え方次第 粒度の考え方をルール化してしまう
  19. 19. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 粒度のルール(の一例) elementは1階層まででネストはしない
 1つのBlockが持つことができるelementは
 基本4種類+リンク 機能や見た目ではなく、
 このルールが適用できる粒度に分解する .Block__element__elementino
  20. 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. 21. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 例
  22. 22. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 例 Block
  23. 23. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 例 Block head body foot
  24. 24. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 例 head body foot ? ? Block
  25. 25. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 例 Block
  26. 26. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 例 Block head item item item foot item.m-thumb item
  27. 27. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 例 TopixList TopixBox
  28. 28. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 例.css こんな感じに。 /* ボックス全体 */ .TopixBox {
 width: 300px;
 border: 1px solid #9eb4db; } .TopixBox__head {
 padding: 0;
 }
 .TopixBox__body {
 padding: 3px 7px; } .TopixBox__foot {
 padding: 10px 5px; } ! 
 /* タイトルの一覧 */ .TopixList { width: 100%; } .TopixList__head {
 font-size: 11px;
 padding-bottom: 5px; } .TopixList__item { padding: 3px 0; } .TopixList__item.m-thumb { position: absolute; }
  29. 29. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 例2
  30. 30. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 例2.scss Sass3.4なら記述もスッキリ。
 head, body, footはそれぞれ、 hd, bd, ftと省略。 .PageInfo { padding-top: 10px; padding-bottom: 20px; ! &__hd { font-weight: bold; } &__bd { color: #777; } } 
 .RegisterGroup { padding-left: 1.5em; ! &__hd { border-bottom: 1px solid #E8E8E8; } &__bd { padding-bottom: 1.5em; } &__item { padding: 0.8em 0; } } 
 .RegisterUnit { @include clearfix; ! &__hd { float: left; width: 13em; text-align: right; } &__bd { padding-left: 13.5em; } }
  31. 31. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 でも柔軟に 名前は一例 もちろん例外もある __inputとか、__btnとか 1つのBlockが抱えられる
 elementの種類の上限を定めると良さそう
  32. 32. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 ルールの分けかた .A…エラー表示用、別パターンなし .B…お知らせ用、色・アイコンパターンあり
  33. 33. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 やり方色々 .iconLabel 共通のスタイルにはO.O的な細かい汎用クラスを作成。 .panel.m-typeDenger .closeButton
  34. 34. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 やり方色々 Block, elementごとに記述 .ErrorPanel { 赤枠、赤背景、アイコン付き太赤字 } .NotePanel { 赤枠、赤背景 } .NotePanel__hd { アイコン付き赤太字、下点線 } .NotePanel__ft { 閉じるボタン }
  35. 35. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 ルールを明確に
  36. 36. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 ルールを明確に
  37. 37. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 ルールを明確に
  38. 38. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 BEMコンポーネント
  +
 汎用パーツ
  39. 39. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 構成 base/ elements/ modules/ pages/ stickers/ style.scss . ├── base │   ├── _layouts.scss │   ├── _reset.scss │   ├── _variables.scss │   └── mixins ├── elements │   ├── _buttons.scss │   └── _labels.scss ├── modules │   ├── _noticePanel.scss │   ├── _searchBox.scss │   └── common │   └── _header.scss ├── pages │   ├── _confirm.scss │   └── _create.scss ├── stickers │   └── _spacers.scss └── style.scss
  40. 40. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 base ノーマライズやリセット、レイアウト 変数、関数、mixin 基本的にプロジェクト開始時に整備し、
 あとはあまり弄らない
  41. 41. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 elements MCSSでいうベースレイヤー ボタン、ラベルなどの汎用パーツ 階層構造を持たず、それ自体で完結 .lowerCamel(.button, .iconLabel, …) 外部に影響するレイアウト情報は
 持たない(margin, floatなど)
  42. 42. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 modules MCSSでいうプロジェクトレイヤー 複数要素からなるBEMコンポーネント群 .UpperCamel (.NotePanel, .SearchBox) 内側に対してのみレイアウトを変更できる (paddingを持ってよい、elementはmarginも持ってよい)
  43. 43. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 pages ページ固有のスタイルを記述 上書き用ではない ページ名に関連付いた接頭辞などで
 名前をユニークに
  44. 44. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 stickers 一時的なレイアウト変更など シングルルールのクラス .s-sticker ここでのみ!importを利用する
  45. 45. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 style.scss 全てのパーシャルを読み込む ディレクトリはアルファベット順なので
 そのままの順番でOK pagesレイヤーが重くなってきたら、
 pagesだけ別に出力してもOK
  46. 46. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 UI仕様
  47. 47. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 UI仕様もソースから 同機能でもUI仕様がブレブレ
 配置、サイズ、色…… 似た名前やモディファイアが大量発生 ソースの肥大化・複雑化を招く
  48. 48. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 例
  49. 49. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 例 .VerticalList__link
  50. 50. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 UI仕様もソースから ソースを読めばルールがわかる 新規モジュールを作るときは
 スタイルガイド+該当ルールセットを参照 ソースの肥大化・複雑化を抑止!!したい!!
  51. 51. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 まとめ まずはドキュメント環境をつくる リファクタしながらルールを作る 仕様のブレはソースから直す
  52. 52. Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 ご静聴ありがとう ございました。

×