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.7k
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.6k
Houdini: Abracadabra CSS
morishitter
1
820
PostCSS and cssnext
morishitter
11
1.8k
PostCSS 5.0: for Custom CSS Preprocessing
morishitter
10
1.1k
PostCSS for beginners
morishitter
6
1.4k
CSSfmt
morishitter
2
220
Introduction to CSS Architecture
morishitter
3
370
Introduction to PostCSS
morishitter
6
1.7k
Yet Another CSS Preprocessor
morishitter
1
5.5k
Other Decks in Technology
See All in Technology
全部AI、全員Cursor、ドキュメント駆動開発 〜DevinやGeminiも添えて〜
rinchsan
10
5.1k
Digitization部 紹介資料
sansan33
PRO
1
4.5k
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
660
LLM拡張解体新書/llm-extension-deep-dive
oracle4engineer
PRO
23
6.2k
無理しない AI 活用サービス / #jazug
koudaiii
0
100
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
6.9k
三視点LLMによる複数観点レビュー
mhlyc
0
230
セキュアな社内Dify運用と外部連携の両立 ~AIによるAPIリスク評価~
zozotech
PRO
0
120
ABEMAの本番環境負荷試験への挑戦
mk2taiga
5
1.3k
Rethinking Incident Response: Context-Aware AI in Practice
rrreeeyyy
2
940
本当にわかりやすいAIエージェント入門
segavvy
1
340
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
230
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Practical Orchestrator
shlominoach
189
11k
We Have a Design System, Now What?
morganepeng
53
7.7k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Typedesign – Prime Four
hannesfritz
42
2.7k
KATA
mclloyd
30
14k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Building Applications with DynamoDB
mza
95
6.5k
How STYLIGHT went responsive
nonsquared
100
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_