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

CSS Wranglin'

Avatar for Joe Ellis Joe Ellis
March 01, 2013
Technology
140
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
390
Barcamp 5 - A Website's Tale
Avatar for Joe Ellis notjoeellis
2
220

Other Decks in Technology

See All in Technology
1000⼈規模のClaude Enterprise運⽤を「Oktaのグループ」と「Slack」に集約する
Avatar for SansanTech sansantech
PRO
1
560
Backstageでつくるセルフサービスな社内開発基盤
Avatar for Sakazaki Kikunosuke kikunosuke75
1
150
All About Sansan – for New Global Engineers
Avatar for Sansan, Inc. sansan33
PRO
1
1.5k
Does an AI Watermark Survive Translation?
Avatar for Es C machinetranslation
0
510
Jetpack Compose で挑む新聞紙面UI ─ 複合ジェスチャー・ポリゴン記事領域・適応的ページ構成という3つの壁/droidkaigi2026
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
110
Introduction to Sansan for Engineers / エンジニア向け会社紹介
Avatar for Sansan, Inc. sansan33
PRO
6
77k
Bet AI Day 2026丨バクラク Autopilot、業務システムの再設計
Avatar for LayerX layerx
PRO
1
600
Hub & Spoke 環境のネットワークルーティングを分解してみる
Avatar for Tsuyataku tsuyataku
1
490
Nav2、Nav3 ... はたまた自作？〜 作って理解する Nav3 の設計意図 〜 / Nav2, Nav3 ... or Build Your Own? — Understanding Nav3's design intent by building it from scratch
Avatar for Yuki Anzai yanzm
0
120
「面白い！」を信じ抜け。激動の時代を貫く、オンリーワン・エンジニアの条件
Avatar for t.kizawa kizawa2020
2
600
Microsoft MVP プログラムを紹介するから目指す人増えてくれ
Avatar for Yuta Matsumura tsubakimoto_s
0
160
いま、生成AIにKaggleをどこまで 任せられるか — ROGIIコンペでの進め方とTips
Avatar for monnu k951286
0
510

Featured

See All Featured
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
270
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
76
5.3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.8k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3.2k
Design in an AI World
Avatar for tapps tapps
1
290
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
260
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
67k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.3k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
370
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
1
34k

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