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

Other Decks in Technology

See All in Technology
AI時代のAPI開発を加速する品質ガードレール / API Quality Guardrails in the AI Era
Avatar for Yoichi Kawasaki yokawasa
0
180
しろおびから始める！ログ活用の第一歩
Avatar for Shumei Ito shumei_ito
0
890
夫婦で子育てするための育児標準化
Avatar for コドモン開発チーム codmoninc
PRO
0
160
実践！Cloud Run ハンズオン！！ / Cloud Run handson
Avatar for y-ohgi y0hgi
0
190
SDDの運用にめげずに向き合った話
Avatar for SansanTech sansantech
PRO
1
140
無理せず続ける、子育てエンジニアの学び
Avatar for コドモン開発チーム codmoninc
PRO
0
670
MCPゲートウェイを作って運用してわかったこと — Agent時代の権限管理の現在地
Avatar for k.muguruma mtpooh
10
3.3k
転んだ話が背中を預ける理由になる / A_story_about_falling_down_gives_you_a_reason_to_watch_each_other_s_backs.pdf
Avatar for Pauli pauli
3
350
実践！ SRE × AI - ABEMA における AIOps -
Avatar for tetsuya28 tetsuya28
7
2.8k
自主式軟體工廠
Avatar for philipz philipz
0
250
Datadog の学び方 - あるいは、オブザーバビリティを学ぶとは何か
Avatar for iwa mananyuki
1
540
ゲームのリアルタイム通信から見た QUIC と MoQ
Avatar for SEGADevTech segadevtech
0
110

Featured

See All Featured
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
2.2k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
470
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
1k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
540
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
3k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
109
250k
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
520
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
390
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
920
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
2.2k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
3
280

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