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
生成AIで速度と品質を両立する、QAエンジニア・開発者連携のAI協調型テストプロセス
Avatar for butatamasoba / Shota Kusaba shota_kusaba
0
240
夢の無限スパゲッティ製造機 #phperkaigi
Avatar for hideki kinjyo o0h
PRO
0
260
(Test) ai-meetup slide creation
Avatar for Oikon oikon48
3
470
AI時代のSaaSとETL
Avatar for Shu Suzuki shoe116
1
200
NewSQL_ ストレージ分離と分散合意を用いたスケーラブルアーキテクチャ
Avatar for hacomono Inc. hacomono
PRO
4
410
Zeal of the Convert: Taming Shai-Hulud with AI
Avatar for Rami McCarthy ramimac
0
160
OSC仙台プレ勉強会　AlmaLinuxとは
Avatar for koedoyoshida koedoyoshida
0
200
Cortex Code CLI と一緒に進めるAgentic Data Engineering
Avatar for あれ __allllllllez__
0
490
形式手法特論：SMT ソルバで解く認可ポリシの静的解析 #kernelvm / Kernel VM Study Tsukuba No3
Avatar for y_taka_23 ytaka23
1
660
Claude Code 2026年 最新アップデート
Avatar for Oikon oikon48
14
11k
LINEヤフーにおけるAIOpsの現在地
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
3
710
猫でもわかるKiro CLI(AI 駆動開発への道編)
Avatar for Hiroo Katoh kentapapa
0
270

Featured

See All Featured
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
0
460
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
150
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9k
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
150
A Soul's Torment
Avatar for Nat Ma seathinner
5
2.5k
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
310
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.1k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
310
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
180
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.8k

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