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

More Related Content

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

What's hot

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

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

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

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

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