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

Other Decks in Technology

See All in Technology
Biz職でもDifyでできる！ 「触らないAIワークフロー」を実現する方法
Avatar for kanacan igarashikana
3
2.8k
Databricks AI/BI Genie の「値ディクショナリー」をAmazonの奥地（S3）まで見に行く
Avatar for camay kameitomohiro
1
400
OCIjp_Oracle AI World_Recap
Avatar for Shinya Omori shinpy
1
170
「魔法少女まどか☆マギカ Magia Exedra」の多様なバトルの開発を柔軟かつ効率的に実現するためのPure C#とUnityの分離について
Avatar for gree_tech gree_tech
PRO
0
290
Claude Code Subagents 再入門 ~cc-sddの実装で学んだこと~
Avatar for Gota gotalab555
10
17k
Introduction to Sansan Meishi Maker Development Engineer
Avatar for Sansan, Inc. sansan33
PRO
0
310
だいたい分かった気になる 『SREの知識地図』 / introduction-to-sre-knowledge-map-book
Avatar for katsuhisa_ katsuhisa91
PRO
3
1.3k
「魔法少女まどか☆マギカ Magia Exedra」におけるバックエンドの技術選定
Avatar for gree_tech gree_tech
PRO
0
120
Data Hubグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
2.2k
様々なファイルシステム
Avatar for Satoru Takeuchi sat
PRO
0
230
OSSで50の競合と戦うためにやったこと
Avatar for yamadashy / やまだし yamadashy
3
960
Dify on AWS 環境構築手順
Avatar for Hiroaki Yoshimura yosse95ai
0
120

Featured

See All Featured
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.7k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
10k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
8
300
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
49
51k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
285
14k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
140
34k
Fireside Chat
Avatar for paigeccino paigeccino
40
3.7k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
7
580
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
23
1.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
9
930
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
209
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