Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Other Decks in Technology

See All in Technology
Autonomous AI Lakehouse - Live AI Hubから始めるセキュアなAIデータ活用 -
Avatar for oracle4engineer oracle4engineer
PRO
2
180
SLOを阻む不安
Avatar for sraku sraku2159
0
200
複雑な業務システムを高速でつくるため、チーム全員をつくれる人へ
Avatar for AyaKurabuchi ayakurabuchi
0
120
1週間、Opus封印でお願いします
Avatar for KintoTech_Dev kintotechdev
1
430
これだけは抑えておきたい！後悔しない re:Invent の過ごし方 / AWS re:Invent 2026 prestudy
Avatar for Masanori Yamaguchi kinunori
2
650
Vibe-to-Spec開発_実践ガイド
Avatar for コロッケそば happysamurai294
0
140
Deep Data Security 機能解説
Avatar for oracle4engineer oracle4engineer
PRO
3
990
増え続けるプロダクトの品質をどう担保するか。ProductSpecとTypeScriptによる取り組み
Avatar for joe_re joere
3
320
AIエージェント統制はAPIから——押さえるべき5つの要素
Avatar for 草薙昭彦 nagix
0
110
AI時代のエンジニアの情報発信〜個人の発信を組織の力に変える〜
Avatar for かわまた ryo_kawamata
0
6.6k
書き手が人でもAIでも正しくなる道、 SREを埋め込んだDeveloper Platform / tech drivers day8
Avatar for mekka chmikata
4
890
20261031_IoTLT_vol140_kitazaki_v1.pdf
Avatar for Zakkiea kitazaki
0
150

Featured

See All Featured
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
570
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
600
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
16k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2.2k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
520
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
331
25k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.4k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
210k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
280
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
2
12k
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
550
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
610

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