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

Object-Oriented CSS

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Rachel Ober Rachel Ober
April 12, 2013
Programming
55
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
66
Front End Workshop 2015
Avatar for Rachel Ober rachelober
0
83
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
60
IE Classes
Avatar for Rachel Ober rachelober
0
72
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
78
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
89
Responsive Emails
Avatar for Rachel Ober rachelober
0
56
What I Learned About SVG
Avatar for Rachel Ober rachelober
0
80
Paperless Post Sass
Avatar for Rachel Ober rachelober
1
100

Other Decks in Programming

See All in Programming
開発体験を左右するライブラリの API 設計 - GraphQL スキーマ構築ライブラリから考える #tskaigi
Avatar for izumin5210 izumin5210
2
1.3k
関係性から理解する"同一性"の型用語たち
Avatar for pvcresin pvcresin
2
610
RTSPクライアントを自作してみた話
Avatar for simotin13 simotin13
0
320
Swiftのレキシカルスコープ管理
Avatar for kntk kntkymt
0
200
oxlintはeslint/typescript-eslintを置き換えられるのか
Avatar for shoma-fujita shomafujita
2
290
~ 秘伝のタレ化した『神スプシ』と戦う ~ 関数型パラダイムで壊れない仕組みへ
Avatar for ほりしょー h0r15h0
1
140
TSKaigi2026-静的解析への投資がAI時代のコード品質を支える ── カスタムESLintルールの設計と運用
Avatar for HayatoKudou hayatokudou
6
1.3k
Agentic UI beyond Chats Architecture Patterns & Open Standards @ngMunich 05/2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
170
tsserverとは何だったのか、これからどうなるのか
Avatar for Ryota Nakamura nowaki28
1
420
Skillは並べた。動かなかった。契約で繋いだ。— 65個のSkillから、自走する開発サイクルへ
Avatar for じゅん junholee
0
790
バックエンドにElysiaJSを採用して気付いた、良い点・悪い点
Avatar for わんこ(Wanko_IT) wanko_it
1
190
Composerを使ったサプライチェーン攻撃の様子を眺めてみる #phpstudy
Avatar for hideki kinjyo o0h
PRO
2
190

Featured

See All Featured
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
8k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
52k
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
240
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
370
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.6k
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
210
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
220
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
850
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
300
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
4k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
190
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k

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