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.6k
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
790
PostCSS and cssnext
morishitter
11
1.7k
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
350
Introduction to PostCSS
morishitter
6
1.7k
Yet Another CSS Preprocessor
morishitter
1
5.5k
Other Decks in Technology
See All in Technology
株式会社EventHub・エンジニア採用資料
eventhub
0
4.3k
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
1.5k
Active Directory攻防
cryptopeg
PRO
7
4.3k
2.5Dモデルのすべて
yu4u
2
930
30分でわかる『アジャイルデータモデリング』
hanon52_
10
2.8k
データマネジメントのトレードオフに立ち向かう
ikkimiyazaki
6
1.1k
2024.02.19 W&B AIエージェントLT会 / AIエージェントが業務を代行するための計画と実行 / Algomatic 宮脇
smiyawaki0820
14
4k
深層学習と古典的画像アルゴリズムを組み合わせた類似画像検索内製化
shutotakahashi
1
220
Building Products in the LLM Era
ymatsuwitter
10
6k
AI エージェント開発を支える MaaS としての Azure AI Foundry
ryohtaka
6
620
エンジニアの育成を支える爆速フィードバック文化
sansantech
PRO
3
1.1k
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
1.3k
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
350
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building an army of robots
kneath
303
45k
Six Lessons from altMBA
skipperchong
27
3.6k
Statistics for Hackers
jakevdp
797
220k
Done Done
chrislema
182
16k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Become a Pro
speakerdeck
PRO
26
5.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_