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

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
[2025-09-30] Databricks Genie を利用した分析基盤とデータモデリングの IVRy の現在地
Avatar for 和田 悠佑 wxyzzz
0
510
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
Avatar for Hiromu Shioya kwappa
4
290
about #74462 go/token#FileSet
Avatar for tom twinkle tomtwinkle
1
470
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
Avatar for Preferred Networks pfn
PRO
2
910
そのWAFのブロック、どう活かす？ サービスを守るための実践的多層防御と思考法 / WAF blocks defense decision
Avatar for 株式会社カミナシ kaminashi
0
100
ZOZOのAI活用実践〜社内基盤からサービス応用まで〜
Avatar for ZOZO Developers zozotech
PRO
0
210
Azure SynapseからAzure Databricksへ 移行してわかった新時代のコスト問題！？
Avatar for Databricks Japan databricksjapan
0
150
空間を設計する力を考える / 20251004 Naoki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
4
430
Escaping_the_Kraken_-_October_2025.pdf
Avatar for Maarten Dalmijn mdalmijn
0
150
英語は話せません！それでも海外チームと信頼関係を作るため、対話を重ねた2ヶ月間のまなび
Avatar for ニイオカ niioka_97
0
130
Adapty_東京AI祭ハッカソン2025ピッチスライド
Avatar for shino shinoyamada
0
130
GopherCon Tour 概略
Avatar for Takuto Nagami logica0419
2
190

Featured

See All Featured
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.8k
Making Projects Easy
Avatar for Brett Harned brettharned
119
6.4k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.2k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
189
55k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
890
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
73
11k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
185
22k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
525
40k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
127
53k

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