$30 off During Our Annual Pro Sale. View Details »

Object-Oriented CSS

Avatar for Rachel Ober Rachel Ober
April 12, 2013
Programming
1
45

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
54
Front End Workshop 2015
Avatar for Rachel Ober rachelober
0
69
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
48
IE Classes
Avatar for Rachel Ober rachelober
0
50
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
53
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
79
Responsive Emails
Avatar for Rachel Ober rachelober
0
43
What I Learned About SVG
Avatar for Rachel Ober rachelober
0
61
Paperless Post Sass
Avatar for Rachel Ober rachelober
1
91

Other Decks in Programming

See All in Programming
AIコードレビューがチームの"文脈"を 読めるようになるまで
Avatar for Takumi Maruyama marutaku
0
350
認証・認可の基本を学ぼう前編
Avatar for kaza kouyuume
0
190
30分でDoctrineの仕組みと使い方を完全にマスターする / phpconkagawa 2025 Doctrine
Avatar for Takashi Kanemoto ttskch
3
800
AIの誤りが許されない業務システムにおいて“信頼されるAI” を目指す / building-trusted-ai-systems
Avatar for Yuya Matsumura yuya4
6
2.6k
全員アーキテクトで挑む、 巨大で高密度なドメインの紐解き方
Avatar for Agata Naomichi agatan
8
20k
CSC509 Lecture 14
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
220
【Streamlit x Snowflake】データ基盤からアプリ開発・AI活用まで、すべてをSnowflake内で実現
Avatar for Ayumu Yamaguchi ayumu_yamaguchi
1
120
新卒エンジニアのプルリクエスト with AI駆動
Avatar for Yuta Fukunaga fukunaga2025
0
200
リリース時」テストから「デイリー実行」へ！開発マネージャが取り組んだ、レガシー自動テストのモダン化戦略
Avatar for goataka (GOAMI Takaaki) goataka
0
120
Socio-Technical Evolution: Growing an Architecture and Its Organization for Fast Flow
Avatar for Chris Richardson cer
PRO
0
320
手軽に積ん読を増やすには？/読みたい本と付き合うには？
Avatar for hideki kinjyo o0h
PRO
1
170
S3 VectorsとStrands Agentsを利用したAgentic RAGシステムの構築
Avatar for とすり tosuri13
6
300

Featured

See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.2k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
62k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.6k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.5k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
790
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.9k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
700

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