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
もう怖くないバックグラウンド処理 Background Tasks のすべて - Hakodate.swift #1
Avatar for Kanta Oikawa kantacky
0
190
LINEヤフーにおけるAI駆動開発組織のプロデュース施策
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
180
AI Coding Agentの地殻変動 ～ ai-coding.info の定点観測 ～
Avatar for kotauchisunsun kotauchisunsun
1
480
Snowflakeデータ基盤で挑むAI活用 〜4年間のDataOpsの基礎をもとに〜
Avatar for K.Mitsuhashi kaz3284
1
270
バクラクにおける Document Understanding の挑戦：書類の「読取」から「意思決定」へ / document-understanding-in-bakuraku-2026
Avatar for Yuya Matsumura yuya4
0
130
技術キャッチアップ効率化を実現する記事推薦システムの構築
Avatar for Yudai Hayashi yudai00
2
150
パネルディスカッション資料 (at Tableau Now! - 2026-02-26)
Avatar for Yoshitaka Arakawa yoshitakaarakawa
0
670
大規模な組織におけるAI Agent活用の促進と課題
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
4
6.3k
失敗できる意思決定とソフトウェアとの正しい歩き方_-_変化と向き合う選択肢/ Designing for Reversible Decisions
Avatar for soudai sone soudai
PRO
8
1.2k
【PyCon mini Shizuoka 2026】生成AI時代に画像処理やオーディオ処理のノードエディターを作る理由
Avatar for 高橋かずひと kazuhitotakahashi
0
180
NW構成図の自動描画は何が難しいのか?/netdevnight3
Avatar for m.hagiwara corestate55
2
490
OCI技術資料 : 外部接続 VPN接続 詳細
Avatar for Oracle Cloud Infrastructure ソリューション・エンジニア ocise
1
10k

Featured

See All Featured
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
130
Docker and Python
Avatar for Tania Allard trallard
47
3.7k
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
170
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.9k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.8k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
300
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.5k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.2k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k

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