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

Other Decks in Technology

See All in Technology
システム思考で問題に対処する
Avatar for yussak yussak
0
190
Eight Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
3
8.1k
SO-101×VLAによる3色キューブのピック＆プレース
Avatar for ABEJA abeja
0
110
Pavlokで始める電撃駆動開発
Avatar for 佐藤陽威 sgrsn
0
180
攻撃と防御で学ぶAI時代のプロダクトセキュリティ演習
Avatar for Recruit recruitengineers
PRO
6
1.9k
SmartHR Engineering Team Deck
Avatar for SmartHR Recruit smarthr
0
670
Invisible to AI? Making TYPO3 Sites Quotable by AI Search Systems
Avatar for Wolfgang Wagner wolfgangwagner
0
160
つくって納得、つかって実感！ 大規模言語モデルことはじめ ver2.0
Avatar for Recruit recruitengineers
PRO
3
1.1k
AI ネイティブな組織に Gemini Enterprise Agent Platform がなぜ必要なのか
Avatar for Asei Sugiyama asei
1
190
モノリス Rails でも日中に rails db:migrate を走らせたい！ / Daytime rails db:migrate on Monolithic Rails!
Avatar for Shintani Teppei euglena1215
4
540
研究開発部の紹介 / Sansan R&D Profile
Avatar for Sansan, Inc. sansan33
PRO
4
24k
事業価値と Engineering 2026年度版
Avatar for Recruit recruitengineers
PRO
42
22k

Featured

See All Featured
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
2
240
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.7k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
440
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
2k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
1
2.3k
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
780
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.8k
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
2
630
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
4.3M
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
1
170
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
430
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
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