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
RSCSS: Writing CSS without losing your sanity
Search
Rico Sta. Cruz
November 10, 2015
Technology
7
1.4k
RSCSS: Writing CSS without losing your sanity
First presented at MelbCSS Nov 2015.
Rico Sta. Cruz
November 10, 2015
Tweet
Share
More Decks by Rico Sta. Cruz
See All by Rico Sta. Cruz
Optimizing developer happiness
rstacruz
0
120
Agile sprint etiquette
rstacruz
1
330
Modular Future of CSS
rstacruz
7
640
Move fast, don't break things: how we built a solid tech infrastructure
rstacruz
3
230
Using CSS flexbox to save your sanity
rstacruz
10
920
Why is it so hard to be a web developer?
rstacruz
8
1.1k
Js Camp Asia 2012 draft
rstacruz
0
150
Breaking instincts: how to fight bad design habits
rstacruz
1
200
Other Decks in Technology
See All in Technology
「自動テストのプラクティスを効果的に学ぶためのカードゲーム」 ( #sqip2024 )
teyamagu
PRO
2
190
『GRANBLUE FANTASY: Relink』専任エンジニアチームで回す大規模開発QAサイクル
cygames
0
100
『GRANBLUE FANTASY: Relink』クオリティと物量の両立に挑戦したフェイシャルアニメーション事例 ~カットシーンからランタイムまで~
cygames
0
110
Discovering AI Models
picardparis
4
3.9k
内製化を目指す事業会社が、システム開発会社と共に進める「開発生産性改善」の取り組み事例 #devsumi
yuwji
1
130
リアルお遍路+SORACOM IoT
ozk009
1
140
突撃! 隣のAmazon Bedrockユーザー 〜YouはどうしてAWSで?〜
minorun365
PRO
3
390
どこよりも遅めなWinActor Ver.7.5.0 新機能紹介
tamai_63
0
210
技術的負債解消の取り組みと専門チームのお話
bengo4com
0
340
アプリをリリースできる状態に保ったまま 段階的にリファクタリングするための 戦略と戦術 / Strategies and tactics for incremental refactoring
yanzm
6
1.4k
AIで変わるテスト自動化:最新ツールの多様なアプローチ/ 20240910 Takahiro Kaneyama
shift_evolve
0
250
DevRelの始め方
moongift
PRO
2
400
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
24
610
Debugging Ruby Performance
tmm1
72
12k
A Modern Web Designer's Workflow
chriscoyier
692
190k
BBQ
matthewcrist
83
9.2k
It's Worth the Effort
3n
182
27k
Agile that works and the tools we love
rasmusluckow
327
20k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
230
17k
How to Ace a Technical Interview
jacobian
274
23k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
Transcript
CSS is complicated. MYTH:
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU Modern CSS makes it easy
to style components, such as this one. However, not everyone writes CSS the same way. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIU UIUNUN INU UIN
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU HTML makes it intuitive to
write classes and nest them properly. article
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU HTML makes it intuitive to
write classes and nest them properly. article div.image
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU HTML makes it intuitive to
write classes and nest them properly. article div.heading div.image
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU HTML makes it intuitive to
write classes and nest them properly. article div.heading div.description div.image
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU HTML makes it intuitive to
write classes and nest them properly. article div.heading div.description div.actions div.image
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU HTML makes it intuitive to
write classes and nest them properly. article div.heading div.description div.actions div.image img
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU HTML makes it intuitive to
write classes and nest them properly. article div.heading div.description div.actions div.image img h2.title h2.description
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU HTML makes it intuitive to
write classes and nest them properly. article div.heading div.description div.actions div.image img h2.title h2.description p
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU HTML makes it intuitive to
write classes and nest them properly. article div.heading div.description div.actions div.image img h2.title h2.description p a.button
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU article div.image img div.heading h2.title
h2.description div.description p div.actions a.button "Semantic"
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card { }
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card { .image { ...
} }
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card { .image { ...
} .text { padding: 24px; } }
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card { .image { ...
} .text { padding: 24px; .heading { font-size: 2em; } } }
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card { .image { ...
} .text { padding: 24px; .heading { font-size: 2em; @media (min-width: 768px) { font-size: 3em; } } } }
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card { .image { ...
} .text { padding: 24px; .heading { font-size: 2em; @media (min-width: 768px) { font-size: 3em; } } .subheading { font-size: 2em; @media (min-width: 768px) { font-size: 3em; } } } }
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU article div.image img div.heading h2.title
h2.description div.description p div.actions a.button "Semantic" The naïve approach
This approach makes you prone to have very complicated CSS.
CSS feels complicated. REALLY:
It doesn't have to. TRUTH:
@rstacruz Rico Sta. Cruz
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card { .photo { img
{ ... } } .text { .heading { .title { ... } .subtitle { ... } } .description { p { ... } } .action { .btn { ... } } } } Over-nesting is a common problem with this approach, though. CSS becomes hard to read.
Block-element-modifier http://bem.info
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU BEM Makes this a little
easier. .photo_card .photo_card--photo .photo_card--heading .photo_card--subheading .photo_card--description .photo_card--action
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU BEM Makes this a little
easier. Block Element .photo_card .photo_card--photo .photo_card--heading .photo_card--subheading .photo_card--description .photo_card--action
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo_card { &--photo { ...
} &--heading { ... } &--subheading { ... } &--description { ... } &--action { ... } } BEM Makes this a little easier.
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU It comes at the price
of dirtier markup. <div class='photo-card'> <div class='photo-card--photo'> <img src='foo.jpg' class='photo-card--image'> </div> <div class='photo-card--text'> <h2 class='photo-card--heading'>...</h2> <p class='photo-card--subheading'>...</p> </div> <div class='photo-card--description'> <p>...</p> </div> <div class='photo-card--actions'> <a class='photo-card--button'></a> </div> </div> UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIU UIUNUN INU UIN
Bootstrap http://getbootstrap.com Bootstrap
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU Bootstrap has its own convention
in class names. .panel .panel-head .panel-body .btn .btn-primary .btn-small UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIU UIUNUN INU UIN
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card-image .photo-card-title .photo-card-subtitle .photo-card-description .photo-card-action
Bootstrap would probably suggest something like this.
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU Bootstrap's approach is almost equivalent
to BEM, anyway. .photo-card .photo-card-photo .photo-card-heading .photo-card-subheading .photo-card-description .photo-card-action
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU Bootstrap's approach is almost equivalent
to BEM, anyway. Block Element .photo-card .photo-card-photo .photo-card-heading .photo-card-subheading .photo-card-description .photo-card-action
Naïve BEM Cleanliness (or Bootstrap)
Naïve BEM Cleanliness CSS cleanliness (or Bootstrap)
Naïve BEM Cleanliness Markup cleanliness CSS cleanliness (or Bootstrap)
Naïve BEM Cleanliness Markup cleanliness CSS cleanliness ?
What if... there is a way to make a compromise
between both?
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card What if... there's a
way to keep this semantic structure, yet have clean CSS?
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card .image What if... there's
a way to keep this semantic structure, yet have clean CSS?
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card .heading .image What if...
there's a way to keep this semantic structure, yet have clean CSS?
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card .heading .description .image What
if... there's a way to keep this semantic structure, yet have clean CSS?
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card .heading .description .actions .image
What if... there's a way to keep this semantic structure, yet have clean CSS?
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card .heading .description .actions .image
.title .description What if... there's a way to keep this semantic structure, yet have clean CSS?
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card .heading .description .actions .image
.title .description .button What if... there's a way to keep this semantic structure, yet have clean CSS?
rscss Reasonable System for CSS Stylesheet Structure http://rscss.io
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card .photo-card > .image {
... }
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card .photo-card > .heading {
... }
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card .photo-card > .description {
... }
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card .photo-card > .actions {
... }
UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card { > .image {
... } > .heading { ... } > .action { ... } > .action > .btn { ... } }
Always think in components.
.photo-card .search-field .buy-box Components are named with two (or more)
words with a dash. Components
Components are made of elements.
.field .action .info Are always one word— no dashes. Elements
They can have variants.
.-compact .-large .-primary Variants start with a dash. Variants .photo-card
.search-field .buy-box
Place one component per file.
.photo-card { ... ... } components/photo-card.scss
@import 'components/*'
@rstacruz Rico Sta. Cruz rscss.io