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

898 Views

March 11, 15

#scripty03 #HTML #CSS #リファクタリング #BEM #スタイルガイド

スライド概要

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

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

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

@ydnjp

スライド一覧

2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

（ダウンロード不可）

関連スライド

深層学習による自然言語処理入門: word2vecからBERT, GPT-3まで

Yahoo!デベロッパーネットワーク 165.2K

ゼロから始める転移学習

Yahoo!デベロッパーネットワーク 86.6K

ヤフーにおける WebAuthn と Passkey の UX の紹介と考察 #idcon #fidcon

idcon fidcon

Yahoo!デベロッパーネットワーク 74.2K

OpenID Connectとネイティブアプリを取り巻く仕様と動向 Yahoo! JAPANの取り組み #openid #openid_tokyo

openid openid_tokyo

Yahoo!デベロッパーネットワーク 58.1K

運用業務とスクラムは本当に組み合わせにくいのか︖運用業務が大半を占めるプロダクト開発での試行錯誤

devsumi

Yahoo!デベロッパーネットワーク 36K

ヤフーのオンプレ機械学習基盤AIPFについて #ml_kubernetes

ml_kubernetes

Yahoo!デベロッパーネットワーク 29.3K

各ページのテキスト

リファクタリング HTML/CSS 〜レガシー世界を超えて〜ヤフー株式会社マーケティングソリューションカンパニー開発本部エクスペリエンスデザイン部テクニカルデザインヒラヤナオコ

[beta]

見た目は
同じはず?
ひとつのスタイルを当てるのに、
機能をクラス名にしてしまうと
こうなる。

.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. 無断引用・転載禁止

[beta]

その親要素、
要るの?
親要素が違う場合はどうなるん
だろうと不安になるセレクタ群。

.myModule .yellowIcon,
span .yellowIcon,
p .yellowIcon {
display:inline-block;
width: 15px;
height: 15px;
background:no-repeat url(icon.gif) 0 4px;
}

yellowIconという同名で異なる
画像を使用するパターンがある
のだろうか……。

Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

10.

11.

12.

その他スタイルガイド StyleDocco 導入は簡単（gulp,grunt,etc） Modiﬁerまでマークアップするのが面倒 DSS node,grunt環境ならオススメ Javadoc風の記法多くのプリプロセッサに対応コメント補助Sublimeプラグインがある Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

13.

14.

15.

16.

17.

18.

19.

20.

21.

22.

23.

24.

25.

26.

27.

28.

[beta]

例.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. 無断引用・転載禁止

29.

30.

[beta]

.PageInfo {
padding-top: 10px;
padding-bottom: 20px;

!

例2.scss

}

&__hd {
font-weight: bold;
}
&__bd {
color: #777;
}

.RegisterGroup {
padding-left: 1.5em;

!

Sass3.4なら記述もスッキリ。
}

head, body, footはそれぞれ、
hd, bd, ftと省略。

&__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. 無断引用・転載禁止

31.

32.

33.

34.

やり方色々 Block, elementごとに記述 .ErrorPanel { 赤枠、赤背景、アイコン付き太赤字 } .NotePanel { 赤枠、赤背景 } .NotePanel̲̲hd { アイコン付き赤太字、下点線 } .NotePanel̲̲ft { 閉じるボタン } Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

35.

36.

37.

38.

39.

構成 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. 無断引用・転載禁止

40.

41.

elements MCSSでいうベースレイヤーボタン、ラベルなどの汎用パーツ階層構造を持たず、それ自体で完結 .lowerCamel(.button, .iconLabel, …) 外部に影響するレイアウト情報は持たない(margin, ﬂoatなど) Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

42.

modules MCSSでいうプロジェクトレイヤー複数要素からなるBEMコンポーネント群 .UpperCamel (.NotePanel, .SearchBox) 内側に対してのみレイアウトを変更できる（paddingを持ってよい、elementはmarginも持ってよい） Copyright (C) 2015 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

43.

44.

45.

46.

47.

48.

49.

50.

51.

52.