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

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
Genieを崇めよ
Avatar for camay kameitomohiro
0
170
Cloudflare Workers 向けアプリを C# で構築する ～WASM Native AOT への道～
Avatar for neno nenonaninu
1
950
AIは推し活である。
Avatar for くらず / Kurazu kurazuuuuuu
1
940
品質と信頼性を地続きにする
Avatar for gr1m0h grimoh
2
910
AIエージェントの一手は 誰も見ていない - Falco拡張OSS「Prempti」とeBPFで サーバーレス実行基盤を二層防御する
Avatar for がっきー（がっきー） keitah
0
460
Issue 駆動でスペシャリストの意図を届ける、AI 実装のアクセシビリティ向上
Avatar for thkt thkt
0
130
AIエージェントを最高のパートナーに育てる方法｜評価と判断軸を育てる5つのステップ
Avatar for 青木 晃一｜AI・Copilot活用 koichiaoki
1
160
研究開発部の紹介 / Sansan R&D Profile
Avatar for Sansan, Inc. sansan33
PRO
5
25k
現場で役立つ技術負債の効果的な返済方法
Avatar for 増田 亨 masuda220
PRO
10
5k
2026-09-08 そのJavaモダナイゼーション、AIに丸投げで大丈夫？IBM Bobで変わる品質と効率
Avatar for YutaNonaka yutanonaka
1
130
その Lambda、8分で 管理者権限まで奪われます
Avatar for k1nakayama k1nakayama
7
3.5k
10Xに技術的負債をもたらした「2つの境界の歪み」その構造と解消への営み
Avatar for 10xinc 10xinc
0
2.3k

Featured

See All Featured
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
240
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
6
1.2k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
530
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.8k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
4.9k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
2
430
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
7k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.4k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
300
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
550

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