Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

CSS Wranglin'

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
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
アプリログインとWeb認証基盤をつなぐ ASWebAuthenticationSession 作法
Avatar for Go Takagi shimastripe
1
370
EventBridge に「合流」はない ― サーバーレスのワークフローを育てるということ / No Join in EventBridge
Avatar for Yusuke Shimizu yusukeshimizu
2
440
2026-09-08 そのJavaモダナイゼーション、AIに丸投げで大丈夫？IBM Bobで変わる品質と効率
Avatar for YutaNonaka yutanonaka
1
130
AIエージェントの一手は 誰も見ていない - Falco拡張OSS「Prempti」とeBPFで サーバーレス実行基盤を二層防御する
Avatar for がっきー（がっきー） keitah
0
460
AI coding 整合正規方法
Avatar for philipz philipz
0
470
Cloudflare Workers 向けアプリを C# で構築する ～WASM Native AOT への道～
Avatar for neno nenonaninu
1
940
人間はどの意思決定を手放せるのか
Avatar for Yoshitaka Kawashima kawasima
15
7.9k
AIエージェントを最高のパートナーに育てる方法｜評価と判断軸を育てる5つのステップ
Avatar for 青木 晃一｜AI・Copilot活用 koichiaoki
1
160
Railsのように考える: See through the Master
Avatar for Koji SHIMADA snoozer05
PRO
5
1.2k
技術的負債から考える、AI時代のエンジニアリング投資 — ビズリーチの技術的負債と向き合った経験から、変更し続けられるソフトウェアを考える/ technical-debt-con2026
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
4
3.5k
現場で役立つ技術負債の効果的な返済方法
Avatar for 増田 亨 masuda220
PRO
10
5k
「どのログを見ればいい？」 から始めた サーバーレス障害解析
Avatar for y_waka1 y_waka1
1
120

Featured

See All Featured
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
22k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
3k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
250
1.3M
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.6k
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
530
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
41k
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.7k
New Earth Scene 8
Avatar for Sydney Stone popppiees
4
2.6k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
76
5.4k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
12k

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