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
家族の思い出を形にする 〜 １秒動画の生成を支えるインフラアーキテクチャ
Avatar for Ojima Hikaru ojima_h
1
570
帳票構造化タスクにおけるLLMファインチューニングの性能評価
Avatar for yosukeyoshida yosukeyoshida
1
240
GMOペパボのデータ基盤とデータ活用の現在地 / Current State of GMO Pepabo's Data Infrastructure and Data Utilization
Avatar for Hiroka Zaitsu zaimy
3
210
金融サービスにおける高速な価値提供とAIの役割 #BetAIDay
Avatar for LayerX layerx
PRO
1
770
Agent Development Kitで始める生成 AI エージェント実践開発
Avatar for danishi danishi
0
130
専門分化が進む分業下でもユーザーが本当に欲しかったものを追求するプロダクトマネジメント/Focus on real user needs despite deep specialization and division of labor
Avatar for moriyuya moriyuya
1
1.2k
MCP認可の現在地と自律型エージェント対応に向けた課題 / MCP Authorization Today and Challenges to Support Autonomous Agents
Avatar for Yoichi Kawasaki yokawasa
5
2k
Findy Freelance 利用シーン別AI活用例
Avatar for nesskazu ness
0
340
Rubyの国のPerlMonger
Avatar for AnaTofuZ anatofuz
3
730
Foundation Model × VisionKit で実現するローカル OCR
Avatar for SansanTech sansantech
PRO
1
320
僕たちが「開発しやすさ」を求め 模索し続けたアーキテクチャ #アーキテクチャ勉強会_findy
Avatar for 弁護士ドットコム bengo4com
0
2.1k
生成AI時代におけるAI・機械学習技術を用いたプロダクト開発の深化と進化 #BetAIDay
Avatar for LayerX layerx
PRO
1
1.1k

Featured

See All Featured
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.4k
Done Done
Avatar for chrislema chrislema
185
16k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
8
430
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
3.9k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
83
9.1k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
69
4.8k
Making Projects Easy
Avatar for Brett Harned brettharned
117
6.3k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
30
6k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
33
2.4k

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