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
S3 Glacier のデータを Athena からクエリしようとしたらどうなるのか/try-to-query-s3-glacier-from-athena
Avatar for emi emiki
0
210
Jamf Connect ZTNAとMDMで実現! 金融ベンチャーにおける「デバイストラスト」実例と軌跡 / Kyash Device Trust
Avatar for Jun Watanabe rela1470
1
190
dipにおけるSRE変革の軌跡
Avatar for ディップ株式会社 dip_tech
PRO
1
260
LLMでAI-OCR、実際どうなの？ / llm_ai_ocr_layerx_bet_ai_day_lt
Avatar for sbrf248 sbrf248
0
450
専門分化が進む分業下でもユーザーが本当に欲しかったものを追求するプロダクトマネジメント/Focus on real user needs despite deep specialization and division of labor
Avatar for moriyuya moriyuya
1
1.3k
Amazon Q Developerを活用したアーキテクチャのリファクタリング
Avatar for k1nakayama k1nakayama
2
210
AWS DDoS攻撃防御の最前線
Avatar for R.Kondo ryutakondo
1
150
[OCI Technical Deep Dive] OracleのAI戦略(2025年8月5日開催)
Avatar for oracle4engineer oracle4engineer
PRO
1
110
Bet "Bet AI" - Accelerating Our AI Journey #BetAIDay
Avatar for LayerX layerx
PRO
4
1.7k
生成AI導入の効果を最大化する データ活用戦略
Avatar for ham ham0215
0
140
データモデリング通り #2オンライン勉強会 ～方法論の話をしよう～
Avatar for データ横丁 datayokocho
0
150
いかにして命令の入れ替わりについて心配するのをやめ、メモリモデルを 愛するようになったか（改）
Avatar for Takaya Saeki nullpo_head
7
2.5k

Featured

See All Featured
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.4k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
183
54k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
329
21k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
18
1.1k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
3.9k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.7k
Code Review Best Practice
Avatar for Trisha Gee trishagee
69
19k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.8k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
6.8k
Navigating Team Friction
Avatar for Lara Hogan lara
188
15k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
695
190k

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