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
Core Audio tapを使ったリアルタイム音声処理のお話
Avatar for Sloth yuta0306
0
150
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
Avatar for K.Osawa kkuv
1
360
Oracle Audit Vault and Database Firewall 20 概要
Avatar for oracle4engineer oracle4engineer
PRO
3
1.7k
Should Our Project Join the CNCF? (Japanese Recap)
Avatar for whywaita whywaita
PRO
0
280
論文紹介：LLMDet (CVPR2025 Highlight)
Avatar for tattaka tattaka
0
200
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
Avatar for 弁護士ドットコム bengo4com
1
3.2k
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
26k
MySQL5.6から8.4へ 戦いの記録
Avatar for Koji Yoshida kyoshidaxx
1
290
CursorによるPMO業務の代替 / Automating PMO Tasks with Cursor
Avatar for Motoyoshi Kosei motoyoshi_kakaku
2
660
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
Avatar for Yoshiki Iida yoshikiiida
0
220
Amazon Bedrockで実現する 新たな学習体験
Avatar for Kazuki Maeda kzkmaeda
2
660
あなたの声を届けよう！ 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
Avatar for kondoyuko kondoyuko
4
490

Featured

See All Featured
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
39
1.9k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.3k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
8
680
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.6k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
124
52k
The Language of Interfaces
Avatar for Des Traynor destraynor
158
25k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
207
24k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
270
20k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.8k

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