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

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
6
130

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
Tweet

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
370
Barcamp 5 - A Website's Tale
Avatar for Joe Ellis notjoeellis
2
200

Other Decks in Technology

See All in Technology
3分でわかる！新機能 AWS Transform custom
Avatar for sato4mi sato4mi
1
270
Regional_NAT_Gatewayについて_basicとの違い_試した内容スケールアウト_インについて_IPv6_dual_networkでの使い分けなど.pdf
Avatar for clouddev-code cloudevcode
1
190
AI開発をスケールさせるデータ中心の仕組みづくり
Avatar for Kazuyuki Miyazawa kzykmyzw
0
190
【Oracle Cloud ウェビナー】[Oracle AI Database + Azure] AI-Ready データ戦略の最短ルート：Azure AIでビジネス データの価値を最大化
Avatar for oracle4engineer oracle4engineer
PRO
2
140
Amazon Bedrock AgentCore 認証・認可入門
Avatar for iganin hironobuiga
2
450
AI開発の落とし穴 〜馬には乗ってみよAIには添うてみよ〜
Avatar for SansanTech sansantech
PRO
10
5.5k
GCASアップデート（202510-202601）
Avatar for 高橋広和 techniczna
0
210
名刺メーカーDevグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
1k
Claude Codeベストプラクティスまとめ
Avatar for みのるん minorun365
53
30k
ゼロから始めたFindy初のモバイルアプリ開発
Avatar for Takahiro Kato grandbig
2
530
全員が「作り手」になる。職能の壁を溶かすプロトタイプ開発。
Avatar for hokuto hokuo
1
630
Mosaic AI Gatewayでコーディングエージェントを配るための運用Tips / JEDAI 2026 新春 Meetup! AIコーディング特集
Avatar for GENDA genda
0
130

Featured

See All Featured
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
350
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
400
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
740
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
8.6k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
0
340
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
0
130
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
0
190
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
570
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
1
430

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