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

Object-Oriented CSS

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Rachel Ober Rachel Ober
April 12, 2013
Programming
1
50

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
62
Front End Workshop 2015
Avatar for Rachel Ober rachelober
0
76
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
55
IE Classes
Avatar for Rachel Ober rachelober
0
56
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
63
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
85
Responsive Emails
Avatar for Rachel Ober rachelober
0
49
What I Learned About SVG
Avatar for Rachel Ober rachelober
0
71
Paperless Post Sass
Avatar for Rachel Ober rachelober
1
96

Other Decks in Programming

See All in Programming
[PHPerKaigi 2026]PHPerKaigi2025の企画CodeGolfが最高すぎて社内で内製して半年運営して得た内製と運営の知見
Avatar for Z.O.E. ikezoemakoto
0
310
我々はなぜ「層」を分けるのか〜「関心の分離」と「抽象化」で手に入れる変更に強いシンプルな設計〜 #phperkaigi / PHPerKaigi 2026
Avatar for shogogg shogogg
2
710
Strategy for Finding a Problem for OSS: With Real Examples
Avatar for Chikahiro Tokoro kibitan
0
120
Everything Claude Code OSS詳細 — 5層構造の中身と導入方法
Avatar for techs-targe targe
0
160
AIと共にエンジニアとPMの “二刀流”を実現する
Avatar for Naruo Yoshiki naruogram
0
110
Codex CLIのSubagentsによる並列API実装 / Parallel API Implementation with Codex CLI Subagents
Avatar for 冨澤宝斗 takatty
2
720
Migration to Signals, Signal Forms, Resource API, and NgRx Signal Store @Angular Days 03/2026 Munich
Avatar for Manfred Steyer manfredsteyer
PRO
0
190
Understanding Apache Lucene - More than just full-text search
Avatar for Alexander Reelsen spinscale
0
140
Tamach-sre-3_ANDPAD-shimaison93
Avatar for shimaison93 mane12yurks38
0
200
見せてもらおうか、 OpenSearchの性能とやらを！
Avatar for shunta ichikawa shunta27
1
160
テレメトリーシグナルが導くパフォーマンス最適化 / Performance Optimization Driven by Telemetry Signals
Avatar for shiro seike seike460
PRO
2
200
Nuxt Server Components
Avatar for wattanx wattanx
0
210

Featured

See All Featured
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
97
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.1k
Amusing Abliteration
Avatar for ianozsvald ianozsvald
0
150
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.1k
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
4
500
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
1
3.2k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
190
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
390
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.9k
Fireside Chat
Avatar for paigeccino paigeccino
42
3.9k
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
3.8k

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