Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

CSS Wranglin'

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Joe Ellis Joe Ellis
March 01, 2013
Technology
140
6

CSS Wranglin'

How to wrangle and organize CSS in a sane way for medium to large applications.

Avatar for Joe Ellis

Joe Ellis

March 01, 2013

More Decks by Joe Ellis

See All by Joe Ellis
Sass vs Less vs Stylus vs Rework
Avatar for Joe Ellis notjoeellis
3
2.2k
Scalable CSS
Avatar for Joe Ellis notjoeellis
5
410
Barcamp 5 - A Website's Tale
Avatar for Joe Ellis notjoeellis
2
220

Other Decks in Technology

See All in Technology
ALBのLCU予約とトラフィックの波によるプロダクト理解 / Understanding ALB LCU and Traffic Spikes
Avatar for mito mito201
1
130
Vibe-to-Spec開発_実践ガイド
Avatar for コロッケそば happysamurai294
0
140
Flutter Widget Previewerで始めるUIプレビューとVRTの自動化
Avatar for Aokiti sakusaku3939
0
190
AIがGISを代替する日：〜すべてをAIが創る時代に、私たちがFOSS4Gに関わる意味〜
Avatar for Yuji Kobayashi lehupa
0
190
構造で守らせる　データ・法務・セキュリティ・開発チームとつくる AI時代のデータガバナンスとデータ基盤のリアル
Avatar for LegalOn Technologies, Inc legalontechnologies
PRO
3
720
デザインレビューは自動化できるのか？─ Flutter × Figma で UI 品質保証を考える
Avatar for Hirokazu Tanaka techiro
2
720
LLMの知識とAIエージェント
Avatar for コロッケそば happysamurai294
0
150
eBPF 簡介 2026 版
Avatar for shunghsiyu shunghsiyu
0
140
reInvent2026stby LT00 "Change your life!"
Avatar for Shinichiro Kawano shinichirokawano
1
530
複雑な業務システムを高速でつくるため、チーム全員をつくれる人へ
Avatar for AyaKurabuchi ayakurabuchi
0
120
なぜAI時代に技術記事を書くのか？どう書くのか？ 〜bunの場合〜
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
0
3.5k
AIエージェント統制はAPIから——押さえるべき5つの要素
Avatar for 草薙昭彦 nagix
0
110

Featured

See All Featured
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.3k
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
5
5.6M
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
31k
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4.2k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
1
600
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.6k
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
990
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
280
24k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
1
490
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
1
3.7k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.5k
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
540

Transcript

  1. CSS Wranglin’ Friday, March 1, 13

  2. by Joe Ellis @notjoeellis [email protected] Developer at Audiosocket Friday, March

    1, 13

  3. Disclaimer Friday, March 1, 13

  4. This is for medium to large applications Rules may not

    make sense for small sites. Friday, March 1, 13

  5. YMMV Friday, March 1, 13

  6. Use a CSS precompiler Friday, March 1, 13

  7. File Structure Friday, March 1, 13

  8. Friday, March 1, 13

  9. General Goals Friday, March 1, 13

  10. • Predictable • Reusable • Maintainable • Scalable Good CSS

    is: How to do this? Friday, March 1, 13

  11. Avoid overly specific selectors and parent selectors Friday, March 1,

    13

  12. BAD Friday, March 1, 13

  13. GOOD Friday, March 1, 13

  14. Avoid #IDS Friday, March 1, 13

  15. Avoid overly generic class names Friday, March 1, 13

  16. BAD Friday, March 1, 13

  17. GOOD Friday, March 1, 13

  18. Avoid having classes do too much. Abstract where possible. Friday,

    March 1, 13

  19. BAD Friday, March 1, 13

  20. NOT BAD Friday, March 1, 13

  21. BEST Friday, March 1, 13

  22. Separate CSS styles from JS hooks Friday, March 1, 13

  23. BAD Friday, March 1, 13

  24. GOOD Friday, March 1, 13

  25. Got questions /tips? Friday, March 1, 13

  26. FIN Friday, March 1, 13