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

CSS Wranglin'

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Joe Ellis Joe Ellis
March 01, 2013
Technology
130
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
370
Barcamp 5 - A Website's Tale
Avatar for Joe Ellis notjoeellis
2
210

Other Decks in Technology

See All in Technology
コードや知識を組み込む / Incorporate Code and Knowledge
Avatar for Kenji Saito ks91
PRO
0
180
Class.new is all you need
Avatar for Shia riseshia
1
190
AI와 협업하는 조직으로의 여정
Avatar for Arawn Park arawn
0
530
VespaのParent Childを用いたフィードパフォーマンスの改善
Avatar for 小野崇之 taking
0
120
Hacobu Tech Deck
Avatar for Hacobu hacobu
PRO
0
130
AWS Transform CustomでIaCコードを自由自在に変換しよう
Avatar for k-kun duelist2020jp
0
160
ハーネスエンジニアリングの概要と設計思想
Avatar for sergicalsix sergicalsix
9
5.4k
AIが自律的に働く時代へ Amazon Quick で実現するAIエージェント紹介
Avatar for こーへい koheiyoshikawa
0
140
Agents CLI と Gemini Enterprise Agent Platform で マルチエージェント開発が楽しくなる！
Avatar for Kaz kaz1437
0
160
色を視る
Avatar for yuzneri yuzneri
0
150
Arcana: Production-Ready RAG in Elixir @ ElixirConf EU 2026
Avatar for georgeguimaraes georgeguimaraes
0
120
今年注目する！データ分析プラットフォームでのAIの活用
Avatar for Nayuta S. nayuts
0
160

Featured

See All Featured
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
260
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
900
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.2k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.6k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
350
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2k

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