Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Object-Oriented CSS

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Rachel Ober Rachel Ober
April 12, 2013
Programming
52
1

Object-Oriented CSS

Avatar for Rachel Ober

Rachel Ober

April 12, 2013

More Decks by Rachel Ober

See All by Rachel Ober
So, You Want to Organize a Conference
Avatar for Rachel Ober rachelober
0
65
Front End Workshop 2015
Avatar for Rachel Ober rachelober
0
81
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
59
IE Classes
Avatar for Rachel Ober rachelober
0
67
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
72
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
88
Responsive Emails
Avatar for Rachel Ober rachelober
0
53
What I Learned About SVG
Avatar for Rachel Ober rachelober
0
75
Paperless Post Sass
Avatar for Rachel Ober rachelober
1
100

Other Decks in Programming

See All in Programming
サプライチェーン攻撃対策「層を重ねて落ちない壁」を10日間で組み上げた話 #TechLeadConf2026
Avatar for Kashun Yoshida kashewnuts
1
210
Claude Code × Gemini × Ebitengine ゲーム制作素人WebエンジニアがGoでゲームを作った話
Avatar for webzawa webzawa
0
220
第3木曜LT会 #28
Avatar for Tsubasa SEKIGUCHI tinykitten
PRO
0
120
Terraform言語の静的解析 / static analysis of Terraform language
Avatar for Kazuma Watanabe wata727
1
140
PHPでバイナリをパースして理解するASN.1
Avatar for muno92 muno92
PRO
0
420
ハーネスエンジニアリングとは？
Avatar for kinopee kinopeee
13
6.8k
AIベース静的検査器の偽陽性率を抑える工夫3選
Avatar for Kuniwak orgachem
PRO
4
450
WebAssembly を読み込むベストプラクティス 2026年春版 / Best Practices for Loading WebAssembly (Spring 2026)
Avatar for petamoriken / 森建 petamoriken
5
1.1k
いつか誰かが、と思っていた フロントエンド刷新5年間の実践知
Avatar for Kiichi Sugihara kiichisugihara
1
260
ローカルLLMでどこまでコードが書けるか / How much code can be written on a local LLM
Avatar for Naoki Kishida kishida
2
310
2026年のソフトウェア開発を考える（2026/05版） / Software Engineering Scrum Fest Niigata 2026 Edition
Avatar for Takuto Wada twada
PRO
21
11k
cloudnative conference 2026 flyle
Avatar for azihsoyn azihsoyn
0
110

Featured

See All Featured
Between Models and Reality
Avatar for mayunak mayunak
3
280
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.8k
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
1
500
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
200
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
62
54k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
1
2k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
270
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
33k
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
1
12k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.4k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.3k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k

Transcript

  1. Object-Oriented CSS

  2. Grid

  3. None

  4. Padding & Margins

  5. app/styles/styleguide/_spacing.scss

  6. None
  7. None

  8. Does that really help us?

  9. Cascading Style Sheets (CSS) Noun A style sheet language used

    for describing the presentation semantics (the look and formatting) of a document written in a markup language.

  10. When I want to change a style, I should only

    touch the CSS, not the HTML

  11. http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css/

  12. OOCSS + Sass

  13. None
  14. None
  15. None