Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

CSS Wranglin'

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

Other Decks in Technology

See All in Technology
Karate+Database RiderによるAPI自動テスト導入工数をCline＋GitLab MCPを使って2割削減を目指す！ / 20251206 Kazuki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
750
【AWS re:Invent 2025速報】AIビルダー向けアップデートをまとめて解説！
Avatar for みのるん minorun365
4
520
30分であなたをOmniのファンにしてみせます～分析画面のクリック操作をそのままコード化できるAI-ReadyなBIツール～
Avatar for Sagara sagara
0
140
GitHub Copilotを使いこなす 実例に学ぶAIコーディング活用術
Avatar for 74th(Atsushi Morimoto) 74th
3
3.1k
初めてのDatabricks AI/BI Genie
Avatar for Takaaki Yayoi taka_aki
0
150
mairuでつくるクレデンシャルレス開発環境 / Credential-less development environment using Mailru
Avatar for Issei Naruta mirakui
4
450
乗りこなせAI駆動開発の波
Avatar for Ikko Eltociear Ashimine eltociear
1
1.1k
ガバメントクラウド利用システムのライフサイクルについて
Avatar for 高橋広和 techniczna
0
190
チーリンについて
Avatar for ぐっち hirotomotaguchi
6
2k
業務のトイルをバスターせよ 〜AI時代の生存戦略〜
Avatar for staka staka121
PRO
2
180
Database イノベーショントークを振り返る/reinvent-2025-database-innovation-talk-recap
Avatar for emi emiki
0
170
20251209_WAKECareer_生成AIを活用した設計・開発プロセス
Avatar for syobochim syobochim
7
1.5k

Featured

See All Featured
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
280
24k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.8k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
186
22k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
162
23k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.3k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
5.7k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.6k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.6k

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