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
250
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
BPaaSにおける人と協働する前提のAIエージェント-AWS登壇資料
kentarofujii
0
110
役割は変わっても、変わらないもの 〜スクラムマスターからEMへの転身で学んだ信頼構築の本質〜 / How to build trust
shinop
0
160
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
250
実践アプリケーション設計 ①データモデルとドメインモデル
recruitengineers
PRO
5
1.5k
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
190
JuniorからSeniorまで: DevOpsエンジニアの成長ロードマップ
yuriemori
2
350
TypeScript入門
recruitengineers
PRO
35
11k
Grafana MCPサーバーによるAIエージェント経由でのGrafanaダッシュボード動的生成
hamadakoji
1
1.1k
Grafana Meetup Japan Vol. 6
kaedemalu
1
200
エラーとアクセシビリティ
schktjm
0
570
おやつは300円まで!の最適化を模索してみた
techtekt
PRO
0
260
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
1
490
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Building Adaptive Systems
keathley
43
2.7k
KATA
mclloyd
32
14k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Building an army of robots
kneath
306
46k
Automating Front-end Workflow
addyosmani
1370
200k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
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