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

Other Decks in Technology

See All in Technology
クラウドセキュリティの進化 — AWSの20年を振り返る
Avatar for kei4eva4 kei4eva4
0
130
スクラムマスターが
スクラムチームに入って取り組む5つのこと
- スクラムガイドには書いてないけど入った当初から取り組んでおきたい大切なこと -
Avatar for scrummasudar scrummasudar
3
2.3k
Security Hub と出会ってから 1年半が過ぎました
Avatar for rch850 rch850
0
150
形式手法特論：コンパイラの「正しさ」は証明できるか？ #burikaigi / BuriKaigi 2026
Avatar for y_taka_23 ytaka23
17
6.3k
歴史から学ぶ、Goのメモリ管理基礎
Avatar for Takuto Nagami logica0419
14
2.9k
スクラムを一度諦めたチームにアジャイルコーチが入ってどう変化したか / A Team's Second Try at Scrum with an Agile Coach
Avatar for 株式会社カオナビ kaonavi
0
260
プロンプトエンジニアリングを超えて：自由と統制のあいだでつくる Platform × Context Engineering
Avatar for yuriemori yuriemori
0
480
GitHub Copilot CLI 現状確認会議
Avatar for Toru Makabe torumakabe
8
2.4k
Oracle Database@Azure：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
3
390
Introduction to Bill One Development Engineer
Avatar for Sansan, Inc. sansan33
PRO
0
350
田舎で20年スクラム（後編）：一個人が企業で長期戦アジャイルに挑む意味
Avatar for Tomonori Fukuta chinmo
1
1.6k
kintone開発のプラットフォームエンジニアの紹介
Avatar for Cybozu cybozuinsideout
PRO
0
540

Featured

See All Featured
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
0
2M
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.8k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.9k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
1
1.3k
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
1
100
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
9
1.1k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
66k
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
42
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
1.8k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k

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