Movatterモバイル変換

[0]ホーム
URL:

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

2015/3/10の勉強会にて発表された資料です。SCRIPTY#3　～フロントエンド紳士・淑女のための勉強会～http://scripty.connpass.com/event/12374/

Embed presentation

Downloaded 22 times
リファクタリング
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. 無断引用・転載禁止見た目は
同じはず?ひとつのスタイルを当てるのに、機能をクラス名にしてしまうとこうなる。.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;}
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;} 
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様々な言語でジェネレータがある導入コストは高いが柔軟で、
比較的記述しやすい無駄なCSSの増殖を抑制…できるといいな
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止その他スタイルガイドStyleDocco導入は簡単（gulp,grunt,etc）Modifierまでマークアップするのが面倒DSSJavadoc風の記法多くのプリプロセッサに対応コメント補助Sublimeプラグインがあるnode,grunt環境ならオススメ
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止その他ドキュメント構造やルールの説明GithubのWikiに記載mixinやfunctionの説明必要に応じてSassDocを利用予定mixinに頼る設計ではないため現状ナシ
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止構造、記法
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止BEMコンポーネントの使い回しが多い複雑化しても詳細度が上がらない
※改造してModifierは詳細度上がる
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-odifiermodifierだけ別クラス化。
ただしmodifier単体のルールセットは存在しない。
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止粒度をそろえる基本的な考え方はBEMBlock, element, modifierでもコンポーネントの粒度は捉え方次第粒度の考え方をルール化してしまう
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止粒度のルール(の一例)elementは1階層まででネストはしない
1つのBlockが持つことができるelementは
基本4種類＋リンク機能や見た目ではなく、
このルールが適用できる粒度に分解する.Block__element__elementino
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止基本4種類
+リンクheadbodyitemfootlinkbodyitemitemitemheadfootlinkBlock
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. 無断引用・転載禁止例Blockheadbodyfoot
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止例headbodyfoot??Block
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止例Block
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止例Blockheaditemitemitemfootitem.m-thumbitem
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止例TopixListTopixBox
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;}
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止例2
Copyright (C) 2015 Yahoo 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;}}
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止でも柔軟に名前は一例もちろん例外もある__inputとか、__btnとか1つのBlockが抱えられる
elementの種類の上限を定めると良さそう
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止ルールの分けかた.A…エラー表示用、別パターンなし.B…お知らせ用、色・アイコンパターンあり
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止やり方色々.iconLabel共通のスタイルにはO.O的な細かい汎用クラスを作成。.panel.m-typeDenger.closeButton
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止やり方色々Block, elementごとに記述.ErrorPanel { 赤枠、赤背景、アイコン付き太赤字 }.NotePanel { 赤枠、赤背景 }.NotePanel__hd { アイコン付き赤太字、下点線 }.NotePanel__ft { 閉じるボタン }
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/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
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止baseノーマライズやリセット、レイアウト変数、関数、mixin基本的にプロジェクト開始時に整備し、
あとはあまり弄らない
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止elementsMCSSでいうベースレイヤーボタン、ラベルなどの汎用パーツ階層構造を持たず、それ自体で完結.lowerCamel(.button, .iconLabel, …)外部に影響するレイアウト情報は
持たない(margin, floatなど)
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止modulesMCSSでいうプロジェクトレイヤー複数要素からなるBEMコンポーネント群.UpperCamel (.NotePanel, .SearchBox)内側に対してのみレイアウトを変更できる（paddingを持ってよい、elementはmarginも持ってよい）
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止pagesページ固有のスタイルを記述上書き用ではないページ名に関連付いた接頭辞などで
名前をユニークに
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止stickers一時的なレイアウト変更などシングルルールのクラス.s-stickerここでのみ!importを利用する
Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止style.scss全てのパーシャルを読み込むディレクトリはアルファベット順なので
そのままの順番でOKpagesレイヤーが重くなってきたら、
pagesだけ別に出力してもOK
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. 無断引用・転載禁止ご静聴ありがとうございました。

Recommended

PDF
Cognitive Complexity でコードの複雑さを定量的に計測しよう
PDF
SharePointリストのフォームのカスタマイズを利用したときにハマること
PDF
メンバーのスキルアップ、どうしてる？ − Java 100本ノックで新加入メンバーを鍛えてみた −
PDF
ドメインオブジェクトの見つけ方・作り方・育て方
PPTX
世界一わかりやすいClean Architecture
PDF
日本語テストメソッドについて
 
PPTX
GraalVMの多言語実行機能が凄そうだったので試しにApache Sparkに組み込んで動かしてみたけどちょっとまだ早かったかもしれない（Open So...
PDF
RESTful Web アプリの設計レビューの話
PDF
SharePoint Framework Teams タブ開発基礎講座
PDF
Azure Blob Storageへの様々なアクセス方法を比べてみた JAZUG12周年イベント
PDF
Where狙いのキー、order by狙いのキー
PDF
書籍 「Python FlaskによるWebアプリ開発入門 物体検知アプリ&機械学習APIの作り方」 を通して伝えたいFlaskのプラクティス.pdf
PDF
これからはじめるインフラエンジニア
PDF
TDD のこころ
PDF
テスト文字列に「うんこ」と入れるな
PDF
C#でもメタプログラミングがしたい！！
PDF
Scala警察のすすめ
PPTX
C#とILとネイティブと
PPTX
そのアプリ開発 PowerAppsでやるか否かの指針？（※個人的見解）
PPTX
境界付けられたコンテキスト 概念編 (ドメイン駆動設計用語解説シリーズ)
PDF
既定の環境のストレージ容量
PPTX
テストコードの DRY と DAMP
PDF
Python におけるドメイン駆動設計(戦術面)の勘どころ
PPTX
BuildKitによる高速でセキュアなイメージビルド
PDF
オンラインゲームの仕組みと工夫
PDF
ドメイン駆動設計のための Spring の上手な使い方
PPTX
Redisの特徴と活用方法について
PPTX
Oracle Database (CDB) on Docker を動かしてみる
PDF
なんでCSSすぐ死んでしまうん
PDF
「html5 boilerplate」から考える、これからのマークアップ

More Related Content

PDF
Cognitive Complexity でコードの複雑さを定量的に計測しよう
PDF
SharePointリストのフォームのカスタマイズを利用したときにハマること
PDF
メンバーのスキルアップ、どうしてる？ − Java 100本ノックで新加入メンバーを鍛えてみた −
PDF
ドメインオブジェクトの見つけ方・作り方・育て方
PPTX
世界一わかりやすいClean Architecture
PDF
日本語テストメソッドについて
 
PPTX
GraalVMの多言語実行機能が凄そうだったので試しにApache Sparkに組み込んで動かしてみたけどちょっとまだ早かったかもしれない（Open So...
PDF
RESTful Web アプリの設計レビューの話
Cognitive Complexity でコードの複雑さを定量的に計測しよう
SharePointリストのフォームのカスタマイズを利用したときにハマること
メンバーのスキルアップ、どうしてる？ − Java 100本ノックで新加入メンバーを鍛えてみた −
ドメインオブジェクトの見つけ方・作り方・育て方
世界一わかりやすいClean Architecture
日本語テストメソッドについて
 
GraalVMの多言語実行機能が凄そうだったので試しにApache Sparkに組み込んで動かしてみたけどちょっとまだ早かったかもしれない（Open So...
RESTful Web アプリの設計レビューの話

What's hot

PDF
SharePoint Framework Teams タブ開発基礎講座
PDF
Azure Blob Storageへの様々なアクセス方法を比べてみた JAZUG12周年イベント
PDF
Where狙いのキー、order by狙いのキー
PDF
書籍 「Python FlaskによるWebアプリ開発入門 物体検知アプリ&機械学習APIの作り方」 を通して伝えたいFlaskのプラクティス.pdf
PDF
これからはじめるインフラエンジニア
PDF
TDD のこころ
PDF
テスト文字列に「うんこ」と入れるな
PDF
C#でもメタプログラミングがしたい！！
PDF
Scala警察のすすめ
PPTX
C#とILとネイティブと
PPTX
そのアプリ開発 PowerAppsでやるか否かの指針？（※個人的見解）
PPTX
境界付けられたコンテキスト 概念編 (ドメイン駆動設計用語解説シリーズ)
PDF
既定の環境のストレージ容量
PPTX
テストコードの DRY と DAMP
PDF
Python におけるドメイン駆動設計(戦術面)の勘どころ
PPTX
BuildKitによる高速でセキュアなイメージビルド
PDF
オンラインゲームの仕組みと工夫
PDF
ドメイン駆動設計のための Spring の上手な使い方
PPTX
Redisの特徴と活用方法について
PPTX
Oracle Database (CDB) on Docker を動かしてみる
SharePoint Framework Teams タブ開発基礎講座
Azure Blob Storageへの様々なアクセス方法を比べてみた JAZUG12周年イベント
Where狙いのキー、order by狙いのキー
書籍 「Python FlaskによるWebアプリ開発入門 物体検知アプリ&機械学習APIの作り方」 を通して伝えたいFlaskのプラクティス.pdf
これからはじめるインフラエンジニア
TDD のこころ
テスト文字列に「うんこ」と入れるな
C#でもメタプログラミングがしたい！！
Scala警察のすすめ
C#とILとネイティブと
そのアプリ開発 PowerAppsでやるか否かの指針？（※個人的見解）
境界付けられたコンテキスト 概念編 (ドメイン駆動設計用語解説シリーズ)
既定の環境のストレージ容量
テストコードの DRY と DAMP
Python におけるドメイン駆動設計(戦術面)の勘どころ
BuildKitによる高速でセキュアなイメージビルド
オンラインゲームの仕組みと工夫
ドメイン駆動設計のための Spring の上手な使い方
Redisの特徴と活用方法について
Oracle Database (CDB) on Docker を動かしてみる

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

PDF
なんでCSSすぐ死んでしまうん
PDF
「html5 boilerplate」から考える、これからのマークアップ
PDF
HTML/CSSを効率的にする メタ言語とツールのアレコレ
PDF
CSS3 Design Recipe
PDF
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
PDF
「こんなサイトをこんなテーマ構成で作ってみました」Basercms 勉強会vol6
KEY
コーディングが上達するコツ
PPT
CSS勉強会
PDF
Sass(SCSS)について
PDF
CSS の歩き方
PDF
今必要なCSSアーキテクチャ
PDF
コーディングがラクになる！？ “自分仕様”のさくさくコーディング法
PDF
マークアップ講座 02 CSS
PDF
WordBenchTokyo-20111126
PDF
20130406 rainier study
PDF
connpass design at BPStudy #88
PDF
ネストを覚えた人のためのSassの便利な使い方
ODP
Less
PDF
Css
PDF
Sass
 
なんでCSSすぐ死んでしまうん
「html5 boilerplate」から考える、これからのマークアップ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
CSS3 Design Recipe
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
「こんなサイトをこんなテーマ構成で作ってみました」Basercms 勉強会vol6
コーディングが上達するコツ
CSS勉強会
Sass(SCSS)について
CSS の歩き方
今必要なCSSアーキテクチャ
コーディングがラクになる！？ “自分仕様”のさくさくコーディング法
マークアップ講座 02 CSS
WordBenchTokyo-20111126
20130406 rainier study
connpass design at BPStudy #88
ネストを覚えた人のためのSassの便利な使い方
Less
Css
Sass
 

More from Yahoo!デベロッパーネットワーク

PDF
ゼロから始める転移学習
PDF
継続的なモデルモニタリングを実現するKubernetes Operator
PDF
データの価値を最大化させるためのデザイン～データビジュアライゼーションの方法～ #devsumi 17-E-2
PDF
ヤフーでは開発迅速性と品質のバランスをどう取ってるか
PDF
オンプレML基盤on Kubernetes 〜Yahoo! JAPAN AIPF〜
PDF
Yahoo! JAPANのIaaSを支えるKubernetesクラスタ、アップデート自動化への挑戦 #yjtc
PDF
サイエンス領域におけるMLOpsの取り組み #yjtc
PDF
ヤフーのAIプラットフォーム紹介 ～AIテックカンパニーを支えるデータ基盤～ #yjtc
PDF
Yahoo! JAPAN Tech Conference 2022 Day2 Keynote #yjtc
PDF
「新しいおうち探し」のためのAIアシスト検索 #yjtc
PDF
ヤフーを支えるセキュリティ ～サイバー攻撃を防ぐエンジニアの仕事とは～ #yjtc
PDF
Persistent-memory-native Database High-availability Feature
PDF
モブデザインによる多職種チームのコミュニケーション改善 #yjtc
PDF
PC版Yahoo!メールリニューアル ～サービスのUI/UX統合と改善プロセス～ #yjtc
PDF
新技術を使った次世代の商品の見せ方 ～ヤフオク!のマルチビュー機能～ #yjtc
PDF
ビッグデータから人々のムードを捉える #yjtc
PDF
オンプレML基盤on Kubernetes パネルディスカッション
PDF
eコマースと実店舗の相互利益を目指したデザイン #yjtc
PDF
ユーザーの地域を考慮した検索入力補助機能の改善の試み #yjtc
ゼロから始める転移学習
継続的なモデルモニタリングを実現するKubernetes Operator
データの価値を最大化させるためのデザイン～データビジュアライゼーションの方法～ #devsumi 17-E-2
ヤフーでは開発迅速性と品質のバランスをどう取ってるか
オンプレML基盤on Kubernetes 〜Yahoo! JAPAN AIPF〜
Yahoo! JAPANのIaaSを支えるKubernetesクラスタ、アップデート自動化への挑戦 #yjtc
サイエンス領域におけるMLOpsの取り組み #yjtc
ヤフーのAIプラットフォーム紹介 ～AIテックカンパニーを支えるデータ基盤～ #yjtc
Yahoo! JAPAN Tech Conference 2022 Day2 Keynote #yjtc
「新しいおうち探し」のためのAIアシスト検索 #yjtc
ヤフーを支えるセキュリティ ～サイバー攻撃を防ぐエンジニアの仕事とは～ #yjtc
Persistent-memory-native Database High-availability Feature
モブデザインによる多職種チームのコミュニケーション改善 #yjtc
PC版Yahoo!メールリニューアル ～サービスのUI/UX統合と改善プロセス～ #yjtc
新技術を使った次世代の商品の見せ方 ～ヤフオク!のマルチビュー機能～ #yjtc
ビッグデータから人々のムードを捉える #yjtc
オンプレML基盤on Kubernetes パネルディスカッション
eコマースと実店舗の相互利益を目指したデザイン #yjtc
ユーザーの地域を考慮した検索入力補助機能の改善の試み #yjtc

リファクタリング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. 無断引用・転載禁止ご静聴ありがとうございました。
[8]ページ先頭
©2009-2025 Movatter.jp