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

Object-Oriented CSS

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

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
53
Front End Workshop 2015
Avatar for Rachel Ober rachelober
0
67
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
47
IE Classes
Avatar for Rachel Ober rachelober
0
49
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
48
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
77
Responsive Emails
Avatar for Rachel Ober rachelober
0
41
What I Learned About SVG
Avatar for Rachel Ober rachelober
0
55
Paperless Post Sass
Avatar for Rachel Ober rachelober
1
89

Other Decks in Programming

See All in Programming
Java_プロセスのメモリ監視の落とし穴_NMT_で見抜けない_glibc_キャッシュ問題_.pdf
Avatar for NTTドコモソリューションズ　Java担当 ntt_dsol_java
0
220
Agentに至る道 〜なぜLLMは自動でコードを書けるようになったのか〜
Avatar for mackee mackee
5
1.9k
AI 時代だからこそ抑えたい「価値のある」PHP ユニットテストを書く技術 #phpconfuk / phpcon-fukuoka-2025
Avatar for shogogg shogogg
1
580
しっかり学ぶ java.lang.*
Avatar for nagise nagise
1
410
歴史から学ぶ「Why PHP？」 PHPを書く理由を改めて理解する / Learning from History: “Why PHP?” Rediscovering the Reasons for Writing PHP
Avatar for shiro seike seike460
PRO
0
160
Claude Code on the Web を超える!? Codex Cloud の実践テク5選
Avatar for スナガク sunagaku
0
590
詳細の決定を遅らせつつ実装を早くする
Avatar for shimabox shimabox
1
1.3k
関数の挙動書き換える
Avatar for takato fukui takatofukui
4
740
問題の見方を変える「システム思考」超入門
Avatar for panda_program panda_program
0
300
物流DXを支える“意味”の設計：セマンティックレイヤーとAIで挑むデータ基盤/登壇資料（飯塚 大地）
Avatar for Hacobu hacobu
PRO
0
110
アーキテクチャと考える迷子にならない開発者テスト
Avatar for irof irof
9
3.2k
AI時代もSEOを頑張っている話
Avatar for しらはま shirahama_x
0
130

Featured

See All Featured
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
7.8k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.5k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
162
23k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.1k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
359
30k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
15k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.2k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.8k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
24
3.8k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k

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