Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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
評価駆動開発で不確実性を制御する - MLflow 3が支えるエージェント開発
Avatar for Databricks Japan databricksjapan
1
110
AWS Trainium3 をちょっと身近に感じたい
Avatar for Yasutaka OHMURA bigmuramura
1
140
EM歴1年10ヶ月のぼくがぶち当たった苦悩とこれからへ向けて
Avatar for maaaato maaaato
0
270
[JAWS-UG 横浜支部 #91]DevOps Agent vs CloudWatch Investigations -比較と実践-
Avatar for sh_fk2 sh_fk2
1
250
「Managed Instances」と「durable functions」で広がるAWS Lambdaのユースケース
Avatar for Lamaglama39 lamaglama39
0
290
MapKitとオープンデータで実現する地図情報の拡張と可視化
Avatar for ZOZO Developers zozotech
PRO
1
130
Sansanが実践する Platform EngineeringとSREの協創
Avatar for SansanTech sansantech
PRO
2
770
ログ管理の新たな可能性？CloudWatchの新機能をご紹介
Avatar for Ikumi Ono ikumi_ono
1
630
Uncertainty in the LLM era - Science, more than scale
Avatar for Gael Varoquaux gaelvaroquaux
0
820
ガバメントクラウド利用システムのライフサイクルについて
Avatar for 高橋広和 techniczna
0
190
ChatGPTで論⽂は読めるのか
Avatar for Spatial AI Network spatial_ai_network
2
2.2k
RAG/Agent開発のアップデートまとめ
Avatar for sakai taka0709
0
150

Featured

See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.8k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.6k
Fireside Chat
Avatar for paigeccino paigeccino
41
3.7k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
8
1.3k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.3k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
14k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
196
70k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.2k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
51k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.8k

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