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
130
Agile sprint etiquette
rstacruz
1
350
Modular Future of CSS
rstacruz
7
680
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
160
Breaking instincts: how to fight bad design habits
rstacruz
1
230
Other Decks in Technology
See All in Technology
Абьюзим random_bytes(). Фёдор Кулаков, разработчик Lamoda Tech
lamodatech
0
310
本当に使える?AutoUpgrade の新機能を実践検証してみた
oracle4engineer
PRO
1
130
フィンテック養成勉強会#54
finengine
0
130
LinkX_GitHubを基点にした_AI時代のプロジェクトマネジメント.pdf
iotcomjpadmin
0
160
Windows 11 で AWS Documentation MCP Server 接続実践/practical-aws-documentation-mcp-server-connection-on-windows-11
emiki
0
790
IIWレポートからみるID業界で話題のMCP
fujie
0
750
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
1
250
VCpp Link and Library - C++ breaktime 2025 Summer
harukasao
0
220
ObsidianをMCP連携させてみる
ttnyt8701
2
140
Observability infrastructure behind the trillion-messages scale Kafka platform
lycorptech_jp
PRO
0
130
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
2.6k
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
2
180
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Adopting Sorbet at Scale
ufuk
77
9.4k
GitHub's CSS Performance
jonrohan
1031
460k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
A Tale of Four Properties
chriscoyier
160
23k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
The Invisible Side of Design
smashingmag
299
51k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
4
200
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
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