Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS Wranglin'

Avatar for Joe Ellis Joe Ellis
March 01, 2013
Technology
130
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
370
Barcamp 5 - A Website's Tale
Avatar for Joe Ellis notjoeellis
2
210

Other Decks in Technology

See All in Technology
2026年度新卒技術研修 サイバーエージェントのデータベース 活用事例とパフォーマンス調査入門
Avatar for CyberAgent cyberagentdevelopers
PRO
1
170
仕様通り動くの先へ。Claude Codeで「使える」を検証する
Avatar for Gota gotalab555
8
2.6k
Tour of Agent Protocols: MCP, A2A, AG-UI, A2UI with ADK
Avatar for Mete Atamel meteatamel
1
210
AI前提とはどういうことか
Avatar for どすこい daisuketakeda
0
110
ハーネスエンジニアリング×AI適応開発
Avatar for Ryohei Kamiya aictokamiya
3
1.5k
すごいぞManaged Kubernetes
Avatar for Haruka Sakihara harukasakihara
1
330
Data Enabling Team立ち上げました
Avatar for SansanTech sansantech
PRO
0
280
スクラムを支える内部品質の話
Avatar for IIJ_PR iij_pr
0
280
Cortex Code君、今日から内製化支援担当ね。
Avatar for あべ coco_se
0
280
バックオフィスPJのPjMをコーポレートITが担うとうまくいく3つの理由
Avatar for chama yueda256
1
280
OpenClawでPM業務を自動化
Avatar for 西岡 賢一郎 (Kenichiro Nishioka) knishioka
2
390
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
11k

Featured

See All Featured
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
140
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
410
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
170
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
160
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
3
3.1k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
280
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
280
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.2k
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
430
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
860
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k

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