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

Other Decks in Technology

See All in Technology
失敗できる意思決定とソフトウェアとの正しい歩き方_-_変化と向き合う選択肢/ Designing for Reversible Decisions
Avatar for soudai sone soudai
PRO
8
1.4k
LINEアプリ開発のための Claude Code活用基盤の構築
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
1.1k
AI Agentにおける評価指標とAgent GPA
Avatar for tsho tsho
1
250
Digitization部 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
6.9k
Webアクセシビリティ技術と実装の実際
Avatar for tomokusaba tomokusaba
0
150
社内でAWS BuilderCards体験会を立ち上げ、得られた気づき / 20260225 Masaki Okuda
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
150
Microsoft Fabric のワークスペースと容量の設計原則
Avatar for Ryoma Nagata ryomaru0825
2
210
【PyCon mini Shizuoka 2026】生成AI時代に画像処理やオーディオ処理のノードエディターを作る理由
Avatar for 高橋かずひと kazuhitotakahashi
0
210
論文検索を日本語でできるアプリを作ってみた
Avatar for sai-lens sailen2
0
150
バクラクのSREにおけるAgentic AIへの挑戦/Our Journey with Agentic AI
Avatar for SadayoshiTada taddy_919
2
780
Vertex AI Agent Engine で学ぶ「記憶」の設計
Avatar for t-kikuchi tkikuchi
0
110
AI が Approve する開発フロー / How AI Reviewers Accelerate Our Development
Avatar for Hiroka Zaitsu zaimy
1
250

Featured

See All Featured
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
1
140
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
190
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
66k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.7k
A Soul's Torment
Avatar for Nat Ma seathinner
5
2.4k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
130
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
77
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
75
5.1k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.4k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k

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