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
49

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
58
Front End Workshop 2015
Avatar for Rachel Ober rachelober
0
73
Front End Overview for Interns 2015
Avatar for Rachel Ober rachelober
1
54
IE Classes
Avatar for Rachel Ober rachelober
0
54
Front End Overview (2014)
Avatar for Rachel Ober rachelober
0
61
Team Communication Through Code
Avatar for Rachel Ober rachelober
0
85
Responsive Emails
Avatar for Rachel Ober rachelober
0
48
What I Learned About SVG
Avatar for Rachel Ober rachelober
0
68
Paperless Post Sass
Avatar for Rachel Ober rachelober
1
95

Other Decks in Programming

See All in Programming
AIとペアプロして処理時間を97%削減した話 #pyconshizu
Avatar for Kashun Yoshida kashewnuts
1
220
米国のサイバーセキュリティタイムラインと見る Goの暗号パッケージの進化
Avatar for tom twinkle tomtwinkle
2
560
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
440
受け入れテスト駆動開発(ATDD)×AI駆動開発 AI時代のATDDの取り組み方を考える
Avatar for Takasaki Kazunari kztakasaki
2
560
AI時代のシステム設計：ドメインモデルで変更しやすさを守る設計戦略
Avatar for 増田 亨 masuda220
PRO
5
900
Docコメントで始める簡単ガードレール
Avatar for Keisuke Ikeda keisukeikeda
1
110
Agentic AI: Evolution oder Revolution
Avatar for Lars Roewekamp mobilelarson
PRO
0
160
LangChain4jとは一味違うLangChain4j-CDI
Avatar for Kenji Kazumura kazumura
1
170
Vuetify 3 → 4 何が変わった？差分と移行ポイント10分まとめ
Avatar for kouki.miura koukimiura
0
120
Goの型安全性で実現する複数プロダクトの権限管理
Avatar for ishikawa-pro ishikawa_pro
1
250
20260228_JAWS_Beginner_Kansai
Avatar for Takuya Yonezawa takuyay0ne
5
490
AIコードレビューの導入・運用と AI駆動開発における「AI4QA」の取り組みについて
Avatar for ハゲワシ hagevvashi
0
430

Featured

See All Featured
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
250
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
84
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.1k
Designing for Performance
Avatar for Lara Hogan lara
611
70k
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
2
980
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
220
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
470

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