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
1
47

Object-Oriented CSS

Avatar for Rachel Ober

Rachel Ober

April 12, 2013
Tweet

More Decks by Rachel Ober

See All by Rachel Ober
So, You Want to Organize a Conference
Avatar for Rachel Ober rachelober
0
57
Front End Workshop 2015
Avatar for Rachel Ober rachelober
0
72
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
52
IE Classes
Avatar for Rachel Ober rachelober
0
53
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
60
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
84
Responsive Emails
Avatar for Rachel Ober rachelober
0
47
What I Learned About SVG
Avatar for Rachel Ober rachelober
0
67
Paperless Post Sass
Avatar for Rachel Ober rachelober
1
94

Other Decks in Programming

See All in Programming
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios @OOP 2026, Munic
Avatar for Manfred Steyer manfredsteyer
PRO
0
170
Oxlintはいいぞ
Avatar for Yuji Yamaguchi yug1224
5
1.4k
文字コードの話
Avatar for Masaki Hara qnighy
35
12k
izumin5210のプロポーザルのネタ探し #tskaigi_msup
Avatar for izumin5210 izumin5210
1
340
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
100
NOT A HOTEL - 建築や人と融合し、自由を創り出すソフトウェア
Avatar for Hokuto Shimokawa not_a_hokuts
2
390
AIフル活用時代だからこそ学んでおきたい働き方の心得
Avatar for shinoyu shinoyu
0
150
Oxlint JS plugins
Avatar for kazupon kazupon
1
1.1k
AWS re:Invent 2025参加 直前 Seattle-Tacoma Airport(SEA)におけるハードウェア紛失インシデントLT
Avatar for tetutetu214 tetutetu214
2
120
PJのドキュメントを全部Git管理にしたら、一番喜んだのはAIだった
Avatar for oga_aiichiro nanaism
0
200
OSSとなったswift-buildで Xcodeのビルドを差し替えられるため 自分でXcodeを直せる時代になっている ダイアモンド問題編
Avatar for yimajo yimajo
3
650
AIと一緒にレガシーに向き合ってみた
Avatar for nyafunta9858 nyafunta9858
0
330

Featured

See All Featured
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
150
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
0
210
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
2
790
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
160
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
63
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
0
370
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
5.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.7k
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
140

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