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
210
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
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
5
530
rubygem開発で鍛える設計力
joker1007
2
220
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
lycorptech_jp
PRO
0
110
ドメイン特化なCLIPモデルとデータセットの紹介
tattaka
1
170
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
3
230
OpenHands🤲にContributeしてみた
kotauchisunsun
1
470
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
4
550
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
470
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
200
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
140
“社内”だけで完結していた私が、AWS Community Builder になるまで
nagisa53
1
400
Github Copilot エージェントモードで試してみた
ochtum
0
110
Featured
See All Featured
Embracing the Ebb and Flow
colly
86
4.7k
Building an army of robots
kneath
306
45k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Making Projects Easy
brettharned
116
6.3k
Why Our Code Smells
bkeepers
PRO
337
57k
Music & Morning Musume
bryan
46
6.6k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Building Adaptive Systems
keathley
43
2.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Visualization
eitanlees
146
16k
The Invisible Side of Design
smashingmag
300
51k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
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_