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.7k
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
380
Introduction to PostCSS
morishitter
6
1.7k
Yet Another CSS Preprocessor
morishitter
1
5.5k
Other Decks in Technology
See All in Technology
ObsidianをLLM時代のナレッジベースに! クリッピング→Markdown→CLI連携の実践
srvhat09
7
8.2k
RapidPen: AIエージェントによる高度なペネトレーションテスト自動化の研究開発
laysakura
1
350
Figma Dev Mode MCP Serverを用いたUI開発
zoothezoo
1
280
ClaudeCodeにキレない技術
gtnao
1
940
Shadow DOM & Security - Exploring the boundary between light and shadow
masatokinugawa
0
620
Amazon SNSサブスクリプションの誤解除を防ぐ
y_sakata
3
200
AIでテストプロセス自動化に挑戦する
sakatakazunori
1
630
BEYOND THE RAG🚀 ~とりあえずRAG?を超えていけ! 本当に使えるAIエージェント&生成AIプロダクトを目指して~ / BEYOND-THE-RAG-Toward Practical-GenerativeAI-Products-AOAI-DevDay-2025
jnymyk
4
200
全部AI、全員Cursor、ドキュメント駆動開発 〜DevinやGeminiも添えて〜
rinchsan
11
5.6k
AI Ready API ─ AI時代に求められるAPI設計とは?/ AI-Ready API - Designing MCP and APIs in the AI Era
yokawasa
20
5.4k
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
tomzoh
2
360
本当にわかりやすいAIエージェント入門
segavvy
9
5k
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Writing Fast Ruby
sferik
628
62k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Art, The Web, and Tiny UX
lynnandtonic
300
21k
Automating Front-end Workflow
addyosmani
1370
200k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Documentation Writing (for coders)
carmenintech
72
4.9k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Side Projects
sachag
455
43k
Typedesign – Prime Four
hannesfritz
42
2.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
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_