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.5k
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
140
Agile sprint etiquette
rstacruz
1
360
Modular Future of CSS
rstacruz
7
690
Move fast, don't break things: how we built a solid tech infrastructure
rstacruz
3
260
Using CSS flexbox to save your sanity
rstacruz
10
940
Why is it so hard to be a web developer?
rstacruz
8
1.1k
Js Camp Asia 2012 draft
rstacruz
0
170
Breaking instincts: how to fight bad design habits
rstacruz
1
240
Other Decks in Technology
See All in Technology
20250913_JAWS_sysad_kobe
takuyay0ne
2
180
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
270
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
170
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
5
1.6k
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
9.9k
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
370
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
210
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
400
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
2
540
データアナリストからアナリティクスエンジニアになった話
hiyokko_data
2
440
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
240
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
1
240
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Embracing the Ebb and Flow
colly
87
4.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Being A Developer After 40
akosma
90
590k
BBQ
matthewcrist
89
9.8k
Docker and Python
trallard
45
3.6k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
A better future with KSS
kneath
239
17k
Git: the NoSQL Database
bkeepers
PRO
431
66k
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