CSS Modulesのベストプラクティスを探る #scripty06

1.2K Views

September 14, 16

#scripty06 #スライド

スライド概要

2016/9/14の勉強会にて発表された資料です。

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

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

@ydnjp

スライド一覧

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

またはPlayer版

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

（ダウンロード不可）

関連スライド

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

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

ゼロから始める転移学習

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

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

idcon fidcon

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

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

openid openid_tokyo

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

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

devsumi

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

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

ml_kubernetes

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

各ページのテキスト

CSS Modules のベストプラクティスを探るヤフー株式会社メディア・マーケティングソリューションズグループマーケティングソリューションズカンパニープロモーション広告開発本部マーケッターPF開発部 UIエンジニアリング柴田和祈 / @shibe97

React: CSS in JS Christopher "vjeux" Chedeau I'm Christopher Chedeau, working at Facebook in the front-end infrastructure team and among other things helping build React

[beta]

// Thumbnail.css.js
export default {
image : {
borderRadius : '3px'
}
}
// Thumbnail.js
import styles from './Thumbnail.css.js';
render() {
return (<img style={styles.image} />);
}
Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

10.

[beta]

// Thumbnail.css
.image {
border-radius : 3px;
}
// Thumbnail.js
import styles from './Thumbnail.css';
render() {
return (<img className= {styles.image} />);
}
Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

11.

12.

13.

内部的な動き・webpackのcss-loaderによって最終的に HTMLの<head>タグ内の<style>としてインライン挿入される・セレクタ名がBase64変換されるため、他とセレクタと被りを心配する必要がなくなる・webpack.config.jsで以下のように形式を指定することもできる [ファイル名]__[クラス名]__[ランダム値] Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

14.

[beta]

// Thumbnail.css
.image {
border-radius : 3px;
}
// Thumbnail.js
import styles from './Thumbnail.css';
render() {
return (<img className= {styles.image} />);
}
Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

15.

[beta]

// HTMLの<head>タグ内
.Thumbnail__image__1z6i8 {
border-radius : 3px;
}
// HTMLの<body>タグ内の該当箇所
<img class="Thumbnail__image__1z6i8" />
Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

16.

17.

18.

BEMとは <div class="block"> <div class="block__element"></div> <div class="block__element block__element--modifier"></div> </div> <div class="block block--modifier"> <div class="block__element"></div> </div> Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

19.

// Nav.scss .Nav { display: flex; &__item { width: 100px; &--rounded { border-radius: 3px; } } } // Nav.css .Nav { display: flex; } .Nav__item { width: 100px; } .Nav__item--rounded { border-radius: 3px; } Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

20.

21.

22.

[beta]

// Nav.css
.Nav {
display: flex;
&__item {
width: 100px;
&--rounded {
border-radius: 3px;
}
}
}
// <head>タグ内
.Nav__Nav__1GXYJ { display: flex; }
.Nav__Nav__item__2H3QS { width: 100px; }
.Nav__Nav__item--rounded__BwfvB { border-radius: 3px; }
Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

23.

24.

25.

[beta]

// Nav.css
.Nav {
display: flex;
&__item {
width: 100px;
&--rounded {
border-radius: 3px;
}
}
}
// <head>タグ内
.Nav__1GXYJ { display: flex; }
.Nav__item__2H3QS { width: 100px; }
.Nav__item__rounded__BwfvB { border-radius: 3px; }
Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

26.

27.

[beta]

import styles from './styles/nav.css';
render() {
return (
<ul className={styles.Nav}>
<li className={styles.Nav__item}>hoge</li>
<li className={styles.Nav__item--rounded}>fuga</li>
</ul>
);
}
Syntax Error
Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

28.

29.

30.

[beta]

import styles from './styles/nav.css';
render() {
return (
<ul className={styles.Nav}>
<li className={styles.Nav__item}>hoge</li>
<li className={styles.Nav__item__rounded}>fuga</li>
</ul>
);
}
Compiled successfully!
Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

31.

32.

33.

[beta]

import nav from './styles/nav.css';
render() {
return (
<ul className={nav.Nav}>
<li className={nav.Nav__item}>hoge</li>
<li className={nav.Nav__item__rounded}>fuga</li>
</ul>
);
}
Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

34.

35.

36.

[beta]

// Nav.css
.Nav {
display: flex;
&__item {
width: 100px;
&__rounded {
border-radius: 3px;
}
}
}
// <head>タグ内
.Nav--1GXYJ { display: flex; }
.Nav__item--2H3QS { width: 100px; }
.Nav__item__rounded--BwfvB { border-radius: 3px; }
Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

37.

[beta]

// Nav.css
.wrapper {
display: flex;
}
.item {
width: 100px;
&__rounded {
border-radius: 3px;
}
}
// <head>タグ内
.wrapper--1GXYJ { display: flex; }
.item--2H3QS { width: 100px; }
.item__rounded--BwfvB { border-radius: 3px; }
Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

38.

[beta]

import nav from './styles/nav.css';
render() {
return (
<ul className={nav.wrapper}>
<li className={nav.item}>hoge</li>
<li className={nav.item__rounded}>fuga</li>
</ul>
);
}
Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

39.

40.

41.

42.

43.

44.

45.

46.

47.

48.

49.

50.

51.

52.

53.

54.

55.

56.

57.