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
ざっくり学ぶ 『エンジニアリングリーダー 技術組織を育てるリーダーシップと セルフマネジメント』 / 50 minute Engineering Leader
Avatar for iwashi iwashi86
7
3.7k
SREのキャリアから経営に近づく - Enterprise Risk Managementを基に -
Avatar for shonansurvivors shonansurvivors
1
500
DMMの検索システムをSolrからElasticCloudに移行した話
Avatar for 小山凌太 hmaa_ryo
0
300
.NET 10のBlazorの期待の新機能
Avatar for tkym htkym
0
160
어떤 개발자가 되고 싶은가?
Avatar for Arawn Park arawn
1
320
実践マルチモーダル検索！
Avatar for shibuiwilliam shibuiwilliam
2
460
AWS re:Invent 2025事前勉強会資料 / AWS re:Invent 2025 pre study meetup
Avatar for Masanori Yamaguchi kinunori
0
890
Oracle Base Database Service 技術詳細
Avatar for oracle4engineer oracle4engineer
PRO
14
82k
AIを使ってテストを楽にする
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
0
350
20251027_findyさん_音声エージェントLT
Avatar for Almondoイベント担当 almondo_event
2
510
re:Invent 2025の見どころと便利アイテムをご紹介 / Highlights and Useful Items for re:Invent 2025
Avatar for Yuji Oshima yuj1osm
0
450
dbtとAIエージェントを組み合わせて見えたデータ調査の新しい形
Avatar for 10xinc 10xinc
7
1.6k

Featured

See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
10
630
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.9k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.2k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
84
9.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4k
Code Review Best Practice
Avatar for Trisha Gee trishagee
72
19k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.6k

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