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

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
Level Up Your CDK DX: 5 Tools I’ve Been Building
Avatar for k.goto gotok365
2
160
Bill One 開発エンジニア 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
7
20k
markdown-poster Introduction
Avatar for kazamori kazamori
0
450
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
54k
Genie Code ワークショップ 基礎編 / Genie-Code-Workshop-fundamental
Avatar for Databricks Japan databricksjapan
PRO
0
240
Sansan Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
5k
アクセスキー流出時の対応で再認識した攻撃側と防御側の非対称性について
Avatar for kazzpapa3 kazzpapa3
1
500
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
Avatar for Sansan, Inc. sansan33
PRO
0
3.2k
Introduction to Sansan for Engineers / エンジニア向け会社紹介
Avatar for Sansan, Inc. sansan33
PRO
6
77k
現場の暗黙知を継承するAIエージェント — 対話から生まれる長期記憶と Skills
Avatar for Atsuki Shirasawa atsukish
0
200
『自分で判断できるか』を基準に、プロダクトのハンズオン研修でAI利用の線を引いてみた / Where We Drew the Line on AI in Hands-on Training
Avatar for yuki honyanya
1
650
Introduction to Sansan Meishi Maker Development Engineer
Avatar for Sansan, Inc. sansan33
PRO
0
470

Featured

See All Featured
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
2
3.8k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
6.2k
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
1.1k
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
490
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.7k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.7k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
19k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.8k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.6k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
210
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k

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