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
57
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
67
Front End Workshop 2015
Avatar for Rachel Ober rachelober
0
86
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
62
IE Classes
Avatar for Rachel Ober rachelober
0
79
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
82
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
90
Responsive Emails
Avatar for Rachel Ober rachelober
0
57
What I Learned About SVG
Avatar for Rachel Ober rachelober
0
82
Paperless Post Sass
Avatar for Rachel Ober rachelober
1
110

Other Decks in Programming

See All in Programming
Language Server 使ってる？ 〜VSCode と Zed の場合〜 / Are you using a Language Server? ~For VS Code and Zed~
Avatar for NAGATA Hiroaki handlename
0
800
Even G2とAWSで推しのエージェントを召喚しよう！
Avatar for Har1101 har1101
1
120
Datadog × OpenTelemetry 入門と実践のあいだ
Avatar for Max Kento kn_to_maxpno
1
160
Claspは野良GASの夢をみるか
Avatar for てらうちたかし takter00
0
200
Snowflake Summitでの新機能 CoCo / CoWork / snowflake-summit-2026-overall-what-new-coco
Avatar for Tatsuhiro tatsuhiro
1
160
TSKaigi Night Talks 2026_TypeScriptでサプライチェーンの整合性を型に閉じ込める
Avatar for ギークプラス ソフトウェア事業部 geekplus_tech
0
400
DynamoDBには集計系のクエリがないけどなんとかしたい
Avatar for 村上優稀 musan
1
180
Inside Stream API
Avatar for Yuichi.Sakuraba skrb
1
740
その問い、本当に正しいですか？AI時代のエンジニアに必要な哲学と認知科学 / ai-philosophy-cognitive-science
Avatar for MinoDriven minodriven
11
5.9k
さぁV100、メモリをお食べ・・・
Avatar for nilpe nilpe
0
150
「なぜそう決めたのか」を残し続ける仕組み ― Notion AI カスタムエージェント × Slack連携による設計判断の自動記録 - NIKKEI Tech Talk #47
Avatar for ニフティ株式会社 niftycorp
PRO
0
210
TAKTでAI駆動開発の品質を設計する
Avatar for かとじゅん j5ik2o
7
1.4k

Featured

See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.2k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
62
54k
Design in an AI World
Avatar for tapps tapps
1
250
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.2k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
310
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
420
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
390
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.9k
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.5k
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.5k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.5k

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