Downloaded 22 times
Uploaded byYahoo!デベロッパーネットワーク
5,332 views
リファクタリングHTML/CSS ～レガシー世界を超えて～ #scripty03
2015/3/10の勉強会にて発表された資料です。SCRIPTY#3 ～フロントエンド紳士・淑女のための勉強会～http://scripty.connpass.com/event/12374/
リファクタリングHTML/CSS ～レガシー世界を超えて～ #scripty03
- 1.
- 2.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止ふんわり自己紹介美術史出身のエクストリーム文系アプリデザインや大規模サイト運用を経てペライチとか作る係
- 3.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止広告管理ツール
- 4.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止掘れば何か出てくる 超巨大遺跡(現役)もともと大規模なシステム度重なる仕様・機能追加設計担当者も実装担当者も変わる
- 5.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止掘れば何か出てくる 超巨大遺跡(現役)もともと大規模なシステム度重なる仕様・機能追加設計担当者も実装担当者も変わるカオス!!
- 6.Copyright (C) 2015Yahoo 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.Copyright (C) 2015Yahoo 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) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止遺跡の修繕、 リファクタしようの、HTML/CSS編
- 9.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止迷路状態ドキュメント：なし構造、記法のルール：なしパーツごとの標準的な仕様：なし作ろう決めよう見直そう
- 10.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止ドキュメント
- 11.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止スタイルガイド(KSS)KSS様々な言語でジェネレータがある導入コストは高いが柔軟で、 比較的記述しやすい無駄なCSSの増殖を抑制…できるといいな
- 12.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止その他スタイルガイドStyleDocco導入は簡単（gulp,grunt,etc）Modifierまでマークアップするのが面倒DSSJavadoc風の記法多くのプリプロセッサに対応コメント補助Sublimeプラグインがあるnode,grunt環境ならオススメ
- 13.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止その他ドキュメント構造やルールの説明GithubのWikiに記載mixinやfunctionの説明必要に応じてSassDocを利用予定mixinに頼る設計ではないため現状ナシ
- 14.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止構造、記法
- 15.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止BEMコンポーネントの使い回しが多い複雑化しても詳細度が上がらない ※改造してModifierは詳細度上がる
- 16.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止.Block__element.m-odifier
- 17.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止.Block __element.m-odifiermodifierだけ別クラス化。 ただしmodifier単体のルールセットは存在しない。
- 18.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止粒度をそろえる基本的な考え方はBEMBlock, element, modifierでもコンポーネントの粒度は捉え方次第粒度の考え方をルール化してしまう
- 19.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止粒度のルール(の一例)elementは1階層まででネストはしない 1つのBlockが持つことができるelementは 基本4種類＋リンク機能や見た目ではなく、 このルールが適用できる粒度に分解する.Block__element__elementino
- 20.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止基本4種類 +リンクheadbodyitemfootlinkbodyitemitemitemheadfootlinkBlock
- 21.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止例
- 22.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止例Block
- 23.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止例Blockheadbodyfoot
- 24.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止例headbodyfoot??Block
- 25.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止例Block
- 26.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止例Blockheaditemitemitemfootitem.m-thumbitem
- 27.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止例TopixListTopixBox
- 28.Copyright (C) 2015Yahoo 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.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止例2
- 30.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止例2.scssSass3.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.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止でも柔軟に名前は一例もちろん例外もある__inputとか、__btnとか1つのBlockが抱えられる elementの種類の上限を定めると良さそう
- 32.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止ルールの分けかた.A…エラー表示用、別パターンなし.B…お知らせ用、色・アイコンパターンあり
- 33.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止やり方色々.iconLabel共通のスタイルにはO.O的な細かい汎用クラスを作成。.panel.m-typeDenger.closeButton
- 34.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止やり方色々Block, elementごとに記述.ErrorPanel { 赤枠、赤背景、アイコン付き太赤字 }.NotePanel { 赤枠、赤背景 }.NotePanel__hd { アイコン付き赤太字、下点線 }.NotePanel__ft { 閉じるボタン }
- 35.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止ルールを明確に
- 36.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止ルールを明確に
- 37.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止ルールを明確に
- 38.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止BEMコンポーネント ＋ 汎用パーツ
- 39.Copyright (C) 2015Yahoo 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.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止baseノーマライズやリセット、レイアウト変数、関数、mixin基本的にプロジェクト開始時に整備し、 あとはあまり弄らない
- 41.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止elementsMCSSでいうベースレイヤーボタン、ラベルなどの汎用パーツ階層構造を持たず、それ自体で完結.lowerCamel(.button, .iconLabel, …)外部に影響するレイアウト情報は 持たない(margin, floatなど)
- 42.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止modulesMCSSでいうプロジェクトレイヤー複数要素からなるBEMコンポーネント群.UpperCamel (.NotePanel, .SearchBox)内側に対してのみレイアウトを変更できる（paddingを持ってよい、elementはmarginも持ってよい）
- 43.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止pagesページ固有のスタイルを記述上書き用ではないページ名に関連付いた接頭辞などで 名前をユニークに
- 44.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止stickers一時的なレイアウト変更などシングルルールのクラス.s-stickerここでのみ!importを利用する
- 45.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止style.scss全てのパーシャルを読み込むディレクトリはアルファベット順なので そのままの順番でOKpagesレイヤーが重くなってきたら、 pagesだけ別に出力してもOK
- 46.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止UI仕様
- 47.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止UI仕様もソースから同機能でもUI仕様がブレブレ 配置、サイズ、色……似た名前やモディファイアが大量発生ソースの肥大化・複雑化を招く
- 48.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止例
- 49.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止例.VerticalList__link
- 50.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止UI仕様もソースからソースを読めばルールがわかる新規モジュールを作るときは スタイルガイド＋該当ルールセットを参照ソースの肥大化・複雑化を抑止!!したい!!
- 51.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止まとめまずはドキュメント環境をつくるリファクタしながらルールを作る仕様のブレはソースから直す
- 52.Copyright (C) 2015Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止ご静聴ありがとうございました。