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

CSS Wranglin'

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

Other Decks in Technology

See All in Technology
大型犬好きによるPugの紹介
Avatar for yamanoku yamanoku
1
120
DWH の限界突破！ AI エージェント向け爆速リアルタイムデータ基盤 ClickHouse
Avatar for jozono jozono
1
380
ハードウェアコンペでもAI駆動開発が進んでいる話
Avatar for misoji engineer iotengineer22
1
680
DevelopersIO 2026 知識の地図を描く ─ オントロジーとは何か？
Avatar for Satoru Ishikawa ishikawa_satoru
1
1.4k
UniFi（ユニファイ）AIカメラの現場活用
Avatar for ludicmind ludicmind
1
410
宣言型部分更新は何を解決しどこへ向かうのか
Avatar for did0es shuta13
0
310
子育てエンジニアの可処分時間が減っても成長を諦めない戦い方
Avatar for aki sudoakiy
6
4.4k
全人類（ほぼ）AWS Organizations の上でAWSを利用している、その世界を知る話
Avatar for Hayato Tan htan
1
130
分析AIエージェントを育てる、動く環境を育てる
Avatar for Codatum codatum
1
870
IoTデバイスを繋げるプロトコルMatterをAndroidで使用する方法
Avatar for harutiro harutiro
0
140
hackers_champloo_2026_tidb
Avatar for makocchi makocchi
0
110
継続的なAIコスト最適化
Avatar for Atsushi Tanaka bgpat
1
280

Featured

See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
230
23k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
184
10k
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
450
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
3k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
22k
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
2
35k
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
270
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
530
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
270
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
320

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