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

CSS Wranglin'

Joe Ellis
March 01, 2013
Technology
6
120

CSS Wranglin'

How to wrangle and organize CSS in a sane way for medium to large applications.

Joe Ellis

March 01, 2013
Tweet

More Decks by Joe Ellis

See All by Joe Ellis
Sass vs Less vs Stylus vs Rework
notjoeellis
3
2.1k
Scalable CSS
notjoeellis
5
350
Barcamp 5 - A Website's Tale
notjoeellis
2
180

Other Decks in Technology

See All in Technology
Unsafe.BitCast のすゝめ。
nenonaninu
0
200
WantedlyでのKotlin Multiplatformの導入と課題 / Kotlin Multiplatform Implementation and Challenges at Wantedly
kubode
0
250
.NET 最新アップデート ～ AI とクラウド時代のアプリモダナイゼーション
chack411
0
200
Accessibility Inspectorを活用した アプリのアクセシビリティ向上方法
hinakko
0
180
JuliaTokaiとJuliaLangJaの紹介 for NGK2025S
antimon2
1
120
今年一年で頑張ること / What I will do my best this year
pauli
1
220
Cloudflareで実現する AIエージェント ワークフロー基盤
kmd09
0
290
KMP with Crashlytics
sansantech
PRO
0
240
20250116_自部署内でAmazon Nova体験会をやってみた話
riz3f7
1
100
機械学習を「社会実装」するということ 2025年版 / Social Implementation of Machine Learning 2025 Version
moepy_stats
5
1.1k
技術に触れたり、顔を出そう
maruto
1
150
0→1事業こそPMは営業すべし / pmconf #落選お披露目 / PM should do sales in zero to one
roki_n_
PRO
1
1.5k

Featured

See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
GitHub's CSS Performance
jonrohan
1030
460k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Raft: Consensus for Rubyists
vanstee
137
6.7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
570
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.7k
BBQ
matthewcrist
85
9.4k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Adopting Sorbet at Scale
ufuk
74
9.2k
Documentation Writing (for coders)
carmenintech
67
4.5k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k

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