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

Other Decks in Technology

See All in Technology
なぜ あなたはそんなに re:Invent に行くのか？
Avatar for Kazuki Miura miu_crescent
PRO
0
230
2025年 山梨の技術コミュニティを振り返る
Avatar for しみず ゆうき yuukis
0
120
株式会社ビザスク_AI__Engineering_Summit_Tokyo_2025_登壇資料.pdf
Avatar for VISASQ eikohashiba
1
140
_第4回__AIxIoTビジネス共創ラボ紹介資料_20251203.pdf
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
150
20251203_AIxIoTビジネス共創ラボ_第4回勉強会_BP山崎.pdf
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
150
AIエージェントを5分で一気におさらい！ AIエージェント「構築」元年に備えよう
Avatar for やくも yakumo
1
120
2025年のデザインシステムとAI 活用を振り返る
Avatar for Tech Leverages leveragestech
0
530
Introduce marp-ai-slide-generator
Avatar for Itaru Tomita itarutomy
0
150
Claude Skillsの テスト業務での活用事例
Avatar for Sammy(MoritaMasami) moritamasami
1
120
20251219 OpenIDファウンデーション・ジャパン紹介 / OpenID Foundation Japan Intro
Avatar for OpenID Foundation Japan oidfj
0
590
AWSの新機能をフル活用した「re:Inventエージェント」開発秘話
Avatar for みのるん minorun365
2
510
Entity Framework Core におけるIN句クエリ最適化について
Avatar for tkym htkym
0
140

Featured

See All Featured
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
86
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.9k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.9k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
0
260
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
130
HDC tutorial
Avatar for Michiel Stock michielstock
1
280
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
46
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.5k
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
0
770
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
1.7k
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
590

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