Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Modern CSS: architecture, future specs and buil...
Search
Masaaki Morishita
October 09, 2016
Technology
13
2.5k
Modern CSS: architecture, future specs and build flow
at DevFest Tokyo 2016.
Masaaki Morishita
October 09, 2016
Tweet
Share
More Decks by Masaaki Morishita
See All by Masaaki Morishita
PostCSS: Build your own CSS processor
morishitter
6
4.5k
Houdini: Abracadabra CSS
morishitter
1
760
PostCSS and cssnext
morishitter
11
1.7k
PostCSS 5.0: for Custom CSS Preprocessing
morishitter
10
1.1k
PostCSS for beginners
morishitter
6
1.3k
CSSfmt
morishitter
2
200
Introduction to CSS Architecture
morishitter
3
330
Introduction to PostCSS
morishitter
6
1.6k
Yet Another CSS Preprocessor
morishitter
1
5.5k
Other Decks in Technology
See All in Technology
スタッフエンジニアの道: The Staff Engineer’s Path
snoozer05
PRO
41
13k
社内の学びの場・コミュニティ形成とエンジニア同士のリレーションシップ構築/devreljapan2024
nishiuma
3
240
疎通2024
sadnessojisan
5
1k
リアルお遍路+SORACOM IoT
ozk009
1
120
Creative UIs with Compose: DroidKaigi 2024
chrishorner
1
230
2024年のナビゲーション・フォーカス対応:Composeでキーボード・ナビゲーションをサポートしよう
tahia910
0
100
Oracle Exadata Database Service(Dedicated Infrastructure):サービス概要のご紹介
oracle4engineer
PRO
0
9.5k
LINEヤフーのフロントエンド組織・体制の紹介
lycorp_recruit_jp
0
330
難しいから面白い!医薬品×在庫管理ドメインの複雑性と向き合い、プロダクトの成長を支えるための取り組み / Initiatives to Support Product Growth
kakehashi
2
190
自社サービスのための独自リリース版Redmine「RedMica」の取り組み
vividtone
0
1.1k
LandingZoneAccelerator と学ぶ 「スケーラブルで安全なマルチアカウントAWS環境」と 私たちにもできるベストプラクティス
maimyyym
1
130
エンジニア向け会社紹介資料
caddi_eng
15
250k
Featured
See All Featured
Code Review Best Practice
trishagee
62
16k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
8.9k
A Philosophy of Restraint
colly
202
16k
Music & Morning Musume
bryan
46
6k
From Idea to $5000 a Month in 5 Months
shpigford
379
46k
Intergalactic Javascript Robots from Outer Space
tanoku
268
26k
Producing Creativity
orderedlist
PRO
340
39k
GraphQLとの向き合い方2022年版
quramy
43
13k
GraphQLの誤解/rethinking-graphql
sonatard
65
9.8k
The Cult of Friendly URLs
andyhume
76
6k
Designing Experiences People Love
moore
138
23k
How to train your dragon (web standard)
notwaldorf
85
5.6k
Transcript
Modern CSS: architecture, future specs and build flow morishi'er @
#Devfest16
ࣗݾհ .about-me { name: Masaaki Morishita; twitter: @morishitter_; github: morishitter;
qiita: morishitter; works-at: 'Increments, inc.'; specializing-in: CSS; }
About Increments We are hiring! h"ps:/ /github.com/increments/job-descrip6ons
1994.10.10
Happy CSS Birthday! ! ໌Ͱ22ࡀ !
CSS: It was twenty years ago today — an interview
with Håkon Wium Lie ʮCSS500ޙಡΉ͜ͱ͕ Ͱ͖Δͣʯ h"ps:/ /dev.opera.com/ar0cles/css-twenty-years- hakon/
࠷ۙͷCSS animation, @keyframes, box-sizing, border-radius currentColor, color(), Custom Properties, @apply,
containment, display: flex, display: grid, em, rem, vw, vh, vmin, vmax, @font-face, object-fit, filter, transition, transform, will-change, writing-mode, etc...
CSS ͰදݱͰ͖Δ͜ͱ૿͑ͨ ͔͠͠ɺࠓੲมΘ͍ͬͯͳ͍͜ͱ͕͋Δ
CSS յΕ͍͢
Agenda 1. CSSͷ 2. CSSͷઃܭख๏ 3. CSSͷ৽͍༷͠ 4. CSSϞμϯϏϧυϑϩʔ
CSSͷ
ͦͷલʹɺCSSͷ"جຊ"ʹ͍ͭͯ • CSS (Cascading Style Sheets) • ͋Δཁૉʹࢦఆ͞Ε͍ͯΔϓϩύςΟએݴ͕ෳଘࡏ͢Δͱ ͖ɺએݴͷڧ͞ͷؔΛఆΊͯɺ1ͭͷએݴͷΈΛ༗ޮʹ͢Δ ͘͠Έ
p { color: black; } p { color: red; }
͕ܧঝ͞ΕΔϓϩύςΟ • color font-size ͳͲ • ཁૉ͔Β͕ܧঝ͞ΕΔ͜ͱͰͳهड़͕ͳ͘ͳΔ
ηϨΫλͷৄࡉ • #id > .class, [attr] > Element • ࠷ڧͷढจ
!important , styleଐੑ h1#title { font-size: 24px; } h1 { font-size: 20px; font-weight: bold; margin-bottom: 1em; }
͜Ε͚ͩ ϦϑΝϨϯεΛݟͳ͕ΒͲΜͲΜॻ͍͍͚ͯΔ
None
CSSͷʢٕज़తଆ໘ʣ • ؆୯ = ߏจ͕ශऑ • நԽɾߏԽ ͕Ͱ͖ͳ͍ • ϧʔϧηοτͷӨڹൣғ͕Θ͔Βͳ͘ͳΔ
• શͯͷϧʔϧ͕ άϩʔόϧείʔϓ
CSSͷʢӡ༻తଆ໘ʣ • σβΠϯͷมΘΒͳ͍webΞϓϦͳ͍ • ͨΓతͳमਖ਼͕܁Γฦ͞ΕΔ
CSSͷʢࣾձతଆ໘ʣ • CSSᢞΊΒΕ͗͢ • ϓϩάϥϚʹܟԕ͞ΕɺσβΠφʔ͕ࡶʹॻ͘ • ยखؒCSS • ίʔυͷైḤͳཧ
CSSͨͩwebͷϏδϡΞϧσβΠϯΛ දݱͰ͖Εྑ͍ͷͰͳ͍
զʑใγεςϜΛ࡞͍ͬͯΔ CSS ιϑτΣΞͷҰ෦ͱͯ͠อक͞ΕΔ͖Ͱ ϦϑΝΫλϦϯάͷର
1. CSSͷʢ·ͱΊʣ • ٕज़తଆ໘ • நԽɾߏԽ͕Ͱ͖ͳ͍ • άϩʔόϧείʔϓ • ӡ༻తଆ໘
• ࣾձతଆ໘
Agenda 1. CSSͷ 2. CSSͷઃܭख๏ 3. CSSͷ৽͍༷͠ 4. CSSϞμϯϏϧυϑϩʔ
CSSͷઃܭख๏ 1. ྑ͍CSSίʔυΛॻͨ͘Ίʹ 2. طଘͷCSSઃܭख๏ 3. CSSઃܭͷຊ࣭
1. ྑ͍CSSίʔυͱ • ಡΜͰɺ࠷࣌ؒͰཧղͰ͖Δ • ୈࡾऀ͕ಡΜͩͱ͖ʹ1ਓ͕ॻ͍͔ͨͷΑ͏ʹ • ϝϯςφϯε͢ΔଞͷਓͷͨΊʹɺະདྷͷࣗͷͨΊʹ
ίʔσΟϯάن • Google HTML/CSS Style Guide (Google) • idioma8c CSS
(Nicolas Gallagher) • Code Guide by @mdo (Mark OBo) • CSS Guidelines (Harry Roberts) ໋໊نଇϑΥʔϚοτ
ෆ٢ͳ͍ • ʮCode smells in CSSʯby Harry Roberts • h5p:/
/csswizardry.com/2012/11/code-smells-in-css/
ελΠϧͷऔΓফ͠ BAD ! h2 { font-size: 2rem; margin-bottom: .5em; padding-bottom:
.5em; border-bottom: 1px solid #ccc; } .no-boader { padding-bottom: 0; border-bottom: none; }
ελΠϧͷऔΓফ͠ GOOD ! h2 { font-size: 2rem; margin-bottom: .5em; }
.headline { padding-bottom: .5em; border-bottom: 1px solid #ccc; }
ϋʔυίʔσΟϯά BAD ! .userIcon { width: 40px; height: 40px; border-radius:
20px; }
ϋʔυίʔσΟϯά GOOD ! .userIcon { width: 40px; height: 40px; border-radius:
50%; }
2. طଘͷCSSઃܭख๏ ઌਓ͕ͨͪங͍ͨ CSSΛ্ख͘ॻ͘ ํ๏ • OOCSS • BEM •
ITCSS
OOCSS Object Oriented CSS by Nicole Sullivan
ߏͱݟͨͷ • CSSͷϓϩύςΟେ͖͘2ͭͷ༻్ʹྨͰ͖Δ • ߏ • display, float, width, margin,
etc.. • ݟͨ • background-color, font-weight, border-radius, etc..
<button class="button button--success">OK</button> <button class="button button--danger">Cancel</button> .button { display: inline-block;
/* with other properties */ } .button--success { color: #fff; background-color: #2e6da4; } .button--danger { color: #fff; background-color: #d43f3a; }
ίϯςϯπͱίϯςφͷ • CSSͷηϨΫλHTMLͷߏʹґଘ͖͢Ͱͳ͍ .list { padding: 12px; list-style: none; }
.list-item { display: block; margin-bottom: 8px; font-size: 12px; text-decoration: none; color: #757575; }
<ul class="list"> <li class="list-item">A</li> <li class="list-item">B</li> <li class="list-item">C</li> </ul> or
<div class="list"> <a class="list-item" href="#">A</a> <a class="list-item" href="#">B</a> <a class="list-item" href="#">C</a> </div>
Create a component library of reusable "legos"
BEM Block, Element, Modifier by Yandex
BEM • ϖʔδΛߏ͢Δཁૉͷׂͱɺͦͷཁૉͷ໊લΛܾΊΔͨΊ ͷࢦ • Block: WebΞϓϦέʔγϣϯΛߏ͢Δཁૉ • Element: BlockΛߏ͢Δཁૉ
• Modifier: BlockElementͷ০ͷύλʔϯঢ়ଶ
BEMͷϚʔΫΞοϓ <ul class="Tab"> <li class="Tab__item Tab__item--active">ΞΫςΟϒ</li> <li class="Tab__item">λϒ</li> <li class="Tab__item">λϒ</li>
</ul>
.Tab { /* Block */ display: flex; align-items: center; }
.Tab__item { /* Element */ display: flex; align-items: center; justify-content: center; flex: 0 0 calc(100% / 3); height: 50px; color: #444; background-color: #eee; } .Tab__item--active { /* Modifier */ color: #fff; background-color: #444; }
BEMͷ໋໊نଇ • MindBEMding • Block__Element • Block--Modifier • Block__Element--Modifier h"p:/
/csswizardry.com/2013/01/mindbemding-ge;ng-your-head-round-bem-syntax/
ITCSS Inverted Triangle CSS by Harry Roberts
ITCSS • ৄࡉΛ͏·͘ཧ͠ɺϧʔϧηοτͷӨڹൣғΛѲ͢͠ ͘͢Δ
ৄࡉάϥϑ • CSSͷෳࡶΛධՁ͢Δࢦඪ
ৄࡉάϥϑ • ԣ࣠: CSSϑΝΠϧͷͦͷϧʔϧηοτ͕ଘࡏ͢ΔҐஔ • ॎ࣠: ͦͷϧʔϧηοτͷৄࡉΛࣔͨ͠ • ৄࡉ͕ӈ্͕ΓʹͳΔΑ͏ʹCSSΛॻ͘ •
ҙਤ͠ͳ͍ελΠϧͷ্ॻ͖Λ͙
ITCSSͷελΠϧׂ • Se$ngs: શମͷઃఆΧϥʔύϨοτϑΥϯταΠζΛSass ͳͲͷมΛͬͯఆٛ • Tools: Mixin Func4on
• Generics: ελΠϧͷϦηοτ (e.g. normalize.css) • Base: ཁૉηϨΫλΛͬͨϧʔϧηοτΛఆٛ
ITCSSͷελΠϧׂ • Objects: ০Λؚ·ͳ͍ϨΠΞτͷύλʔϯ • Components: ০ΛؚΜͩUIͷ1ཁૉ (Objectsʹ০Λ͋ͯΔ ͱ) •
U5li5es: ൚༻Ϋϥε Se#ng -> U*li*es ͷॱʹৄࡉ͕ߴ͘ͳΔ
3. CSSઃܭͷຊ࣭ ݸਓͷײͰ͢
Q. ʮͲ͏͢ΕյΕͳ͍CSS͕ॻ͚Δͷʁʯ
A. σβΠϯཧղ
CSSઃܭͷຊ࣭ • ʮσβΠϯͷҙਤʯ͕Θ͔ΕࣗવͱηϨΫλ໊͕ܾ·Δ • σβΠϯͷҙਤΛਖ਼͘͠ཧղͯ͠ॻ͔ΕͨCSSഁ͠ͳ͍
CSSઃܭͷຊ࣭ɺ ໋໊نଇͰͳ͘ σβΠϯཧղͱελΠϧͷׂཻ
ECSSIST Extensible CSS Idealis0c Structure Theory by morishi*er h"ps:/ /medium.com/@morishi"er/extensible-
css-idealis8c-structure-theory-36bd892d3a50
ʮCSSͷઃܭख๏ͳΜ͍ͯΖ͍ Ζ͋Δ͚Ͳɺࣗࣗͷߟ͑ νʔϜͷ։ൃମ੍ɺσβΠ ϯϓϩηεʹ߹Θͤͯௐ͠ ͍ͯ͘ͷͩͱࢥ͏ɻʯ h"p:/ /morishi"er.hatenablog.com/entry/ 2016/07/29/204642
2. CSSͷઃܭख๏ʢ·ͱΊʣ • ྑ͍CSSίʔυΛॻͨ͘Ίʹ • ίʔσΟϯάنɺCSSͷෆ٢ͳ͍ • طଘͷCSSઃܭख๏ • OOCSS,
BEM, ITCSS • CSSઃܭͷຊ࣭ • σβΠϯཧղͱελΠϧͷׂཻ
Agenda 1. CSSͷ 2. CSSͷઃܭख๏ 3. CSSͷ৽͍༷͠ 4. CSSϞμϯϏϧυϑϩʔ
CSSͷ৽͍༷͠ 1. Flexible Box Layout 2. CSS Custom Proper9es for
Cascading Variables 3. tabatkins / specs
1. Flexible Box Layout • a.k.a Flexbox • ݩʑXULͱ͍͏UIݴޠ͕ϕʔε •
ॊೈͳϨΠΞτΛՄೳʹ͢ΔͨΊͷ༷
FlexboxͷϒϥβରԠঢ়گ
FlexboxͷϞσϧ
FlexίϯςφͱFlexΞΠςϜ <div style="display: flex;"> <div>FlexΞΠςϜ</div> <div>FlexΞΠςϜ</div> <div>FlexΞΠςϜ</div> </div><!-- Flexίϯςφ -->
• display: flex Λࢦఆ͢ΔͱͦͷཁૉFlexίϯςφʹͳΔ • Flexίϯςφͷࢠཁૉ͕FlexΞΠςϜ
FlexίϯςφͷϓϩύςΟ • flex-direction: ϝΠϯ࣠ͷ͖ • flex-wrap: ϝΠϯ࣠ͷऴʹୡͨ͠ͱ͖ʹંΓฦ͔͢Ͳ͏͔ • justify-content: ϝΠϯ࣠ʹରͯ͠ͷྻ
• align-items: Ϋϩε࣠ʹରͯ͠ͷྻ • etc..
FlexΞΠςϜͷϓϩύςΟ • flex-grow: FlexΞΠςϜͷ৳ͼ۩߹ • flex-shrink: FlexΞΠςϜͷॖΈ۩߹ • flex-basis: FlexΞΠςϜͷॳظϝΠϯαΠζΛࢦఆ
• align-self: FlexΞΠςϜͷΫϩε࣠ʹରͯ͠ͷྻ • etc..
FlexboxͷϓϩύςΟΛ֮͑Δίπ • FlexboxͷϞσϧΛཧղ͢Δ • Flexίϯςφ͔FlexΞΠςϜͷϓϩύςΟͳͷ͔Λҙࣝ
Flexboxͷόά • ಛʹIE, Safariʹଟ͍ • h,ps:/ /github.com/philipwalton/flexbugs • Flexboxͷόά·ͱΊ •
※ใࠂ͞Ε͍ͯͳ͍όάଟ͍
2. CSS Custom Proper/es for Cascading Variables • ҎԼ Custom
Proper-es • ϓϩύςΟͷΛมͱͯ͠ཧ͢Δ͘͠Έ • CSSͷʮநԽͰ͖ͳ͍ʯͷͻͱͭͷղܾࡦ
Custom Proper,es ϒϥβରԠঢ়گ
Custom Proper,esͷఆٛͱ༻ :root { --thumbnailSize: 40px; --mainColor: #55acee; } .logo
{ fill: var(--mainColor); } .thumbnail { width: var(--thumbnailSize, 32px); height: var(--thumbnailSize, 32px); border-radius: 100%; }
Custom Proper,esΛ͏্Ͱͷҙ • Custom Proper-esΧεέʔσΟϯάͷର • var()ؔͷ࣮ߦͷλΠϛϯά
Custom Proper,esͷΧεέʔσΟϯά <section> <h1 id="title">λΠτϧ</h1> </section> :root { --textColor: red;
} #title { --textColor: green; } h1 { --textColor: blue; } h1 { color: var(--textColor); /* green */ }
var()ؔͷ࣮ߦͷλΠϛϯά <section> <h1 id="title">λΠτϧ</h1> </section> :root { --textColor: red; }
#title { --textColor: blue; } section { color: var(--textColor); } h1 { color: inherit; /* red */ } var()ؔͷධՁܧঝΑΓઌʹߦΘΕΔ
3. tabatkins / specs • by Tab Atkins Jr. •
in CSSWG, Google • Flexboxͱ͔CustomProper?esͷΤ σΟλ • ࣗͷϦϙδτϦʹCSSͷ༷ΛఏҊ
3. tabatkins / specs • Nes%ng • will-change • font-display
• @apply • @extend • etc...
Ͱ·ͩ·ͩ͑ͳ͍ΜͰ͠ΐʁ
͑·͢ʂ ͦ͏ɺPostCSS ͳΒͶɻ
3. CSSͷ৽͍༷͠ʢ·ͱΊʣ • Flexbox • ॊೈͳϨΠΞτͷͨΊͷ༷ • Custom Proper1es •
CSSͰมΛ͏ͨΊͷػߏ • tabatkins / specs • GoogleΤϯδχΞͷఏҊ
Agenda 1. CSSͷ 2. CSSͷઃܭख๏ 3. CSSͷ৽͍༷͠ 4. CSSϞμϯϏϧυϑϩʔ
4. CSSϞμϯϏϧυϑϩʔ • ϓϦϓϩηοαʔͷར༻͕ͨΓલͷ࣌ʢҟೝΊΔʣ • Sass, Less, Stylus, etc •
ʮநԽɾߏԽ͕Ͱ͖ͳ͍ʯͷղܾࡦ • ࠷దԽ • minify, ΫϩεϒϥβରԠ, ϓϩύςΟͷιʔτ, etc • ϦϯλʔͱϑΥʔϚολʔ
PostCSSͰશ෦Ͱ͖ΔΑʂ
PostCSS ͱ • by Andrey Sitnik • Transforming styles with
JS plugins • PostCSSࣗମCSSύʔαʔ • ASTΛૢ࡞͢ΔAPIΛఏڙ • ASTͷૢ࡞શͯϓϥάΠϯ͕୲
PostCSSͷॲཧͷྲྀΕ
ϓϦϓϩηοαʔͱͯ͠ͷPostCSS • ݴޠ֦ு༻ϓϥάΠϯ • cssnext, precss, atcss, etc
cssnext ະདྷͷCSSͷߏจΛࠓͷϒϥβ͕ղऍͰ͖Δ Α͏ʹτϥϯεύΠϧ͢ΔPostCSSϓϥάΠϯू h"p:/ /cssnext.io/
Custom Proper,es input: :root { --fontSize-m: 18px; } p {
font-size: var(--fontSize-m); } output: p { font-size: 18px; }
Custom media queries input: @custom-media --small-viewport (max-width: 600px); @media (--small-viewport)
{ /* styles for small viewport */ } output: @media (max-width: 600px) { /* styles for small viewport */ }
Custom selectors input: @custom-selector :--heading h1, h2, h3; article :--heading
{ margin-bottom: 2em; } output: article h1, article h2, article h3 { margin-bottom: 2em; }
@apply input: :root { --truncate: { white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; } } p { @apply --truncate; } output: p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@extend input: .error { color: red; } .serious-error { @extend
.error; } output: .error, .serious-error { color: red; }
ϓϦϓϩηοαʔͱͯ͠PostCSSΛ͏ϝϦοτ • ඞཁͳػೳ͚ͩΛબͰ͖Δ • ΧελϚΠζ͕༰қ • ύϑΥʔϚϯε
ඞཁͳػೳ͚ͩΛબ • ʮSassͬͯΔ͚Ͳ@importͱม͚ͩ͋Ε͍͍Θʔʯ • ʮmixinͱ͔extendཧͰ͖ͳ͍͔Βͬͯͳ͍ʯ • PostCSSͳΒඞཁͳϓϥάΠϯ͚ͩΛՃͰ͖Δ
ΧελϚΠζ͕༰қ • ։ൃऀPostCSSͷϓϥάΠϯΛ࡞Δ͜ͱͰࣗ༝ʹCSSʹมॲ ཧΛՃ͑Δ͜ͱ͕Ͱ͖Δ • 1ͭ1ͭͷϓϥάΠϯখ͍͞ͷͰίϯτϦϏϡʔτ͍͢͠ • SassʹίϯτϦϏϡʔτͰ͖·͔͢ʁ
ύϑΥʔϚϯε PostCSS: 42 ms Rework: 68 ms (1.6 times slower)
libsass: 77 ms (1.9 times slower) Less: 142 ms (3.4 times slower) Stylus: 200 ms (4.8 times slower) Stylecow: 259 ms (6.2 times slower) Ruby Sass: 877 ms (21.0 times slower) h"ps:/ /github.com/postcss/benchmark
ͦͷଞPostCSSϓϥάΠϯ
Autoprefixer Can I UseͷσʔλΛࢀরͯ͠ ϕϯμʔϓϦϑΟοΫεΛࣗಈ Ͱ༩͢Δπʔϧ h"ps:/ /github.com/postcss/autoprefixer
cssnano CSSͷminifyπʔϧ h"ps:/ /github.com/ben-eb/cssnano
stylelint ϞμϯCSSϦϯλʔ h"ps:/ /github.com/stylelint/stylelint
stylefmt stylelintͷϧʔϧΛݩʹCSSΛ ϑΥʔϚοτ h"ps:/ /github.com/morishi"er/stylefmt
PostCSS.parts h"p:/ /postcss.parts
4. CSSϞμϯϏϧυϑϩʔʢ·ͱΊʣ • PostCSSͱ • Node.jsCSSύʔαʔ • cssnext • ະདྷͷγϯλοΫεΛτϥϯεύΠϧ
• ଞͷPostCSSϓϥάΠϯ • Autoprefixer, cssnano, stylelint, stylefmt, etc..
Agenda 1. CSSͷ 2. CSSͷઃܭख๏ 3. CSSͷ৽͍༷͠ 4. CSSϞμϯϏϧυϑϩʔ
Thanks :D Any ques)ons? @morishi(er_