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
「その開発、認知負荷高すぎませんか?」Platform Engineeringで始める開発者体験カイゼン術
sansantech
PRO
2
110
Terraformで構築する セルフサービス型データプラットフォーム / terraform-self-service-data-platform
pei0804
1
190
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
10
75k
エンジニアリングマネージャーの成長の道筋とキャリア / Developers Summit 2025 KANSAI
daiksy
2
440
Rustから学ぶ 非同期処理の仕組み
skanehira
1
150
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
170
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
380k
「Linux」という言葉が指すもの
sat
PRO
4
140
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
310
20250913_JAWS_sysad_kobe
takuyay0ne
2
240
人工衛星のファームウェアをRustで書く理由
koba789
15
8.2k
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
560
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Bash Introduction
62gerente
615
210k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Why Our Code Smells
bkeepers
PRO
339
57k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Large-scale JavaScript Application Architecture
addyosmani
513
110k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Automating Front-end Workflow
addyosmani
1370
200k
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