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
作るべきものと向き合う - ecspresso 8年間の開発史から学ぶ技術選定 / 技術選定con findy 2026
Avatar for FUJIWARA Shunichiro fujiwara3
6
1.5k
AIで 浮いた時間で 何をする？ 2026春 #devsumi
Avatar for konifar konifar
16
3.4k
What's new in Go 1.26?
Avatar for Koya IWAMURA ciarana
2
250
三菱UFJ銀行におけるエンタープライズAI駆動開発のリアル / Enterprise AI_Driven Development at MUFG Bank: The Real Story
Avatar for 三菱UFJインフォメーションテクノロジー株式会社 muit
10
20k
「静的解析」だけで終わらせない。 SonarQube の最新機能 × AIで エンジニアの開発生産性を本気で上げる方法
Avatar for Wenhan Shi xibuka
2
340
AI Agentにおける評価指標とAgent GPA
Avatar for tsho tsho
1
220
【SLO】"多様な期待値" と向き合ってみた
Avatar for kaita z63d
2
230
primeNumber DATA MANAGEMENT CAMP #2：
Avatar for 阿部 昌利 masatoshi0205
1
620
Lookerの最新バージョンv26.2がやばい話
Avatar for Yuta Ozaki waiwai2111
1
140
Devinを導入したら予想外の人たちに好評だった
Avatar for Takafumi Omuro tomuro
0
420
大規模な組織におけるAI Agent活用の促進と課題
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
4
6.4k
Data Hubグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
2.8k

Featured

See All Featured
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
530
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
88
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
670
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.2k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon szymonslowik
1
940
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
190
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
700
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
110
Claude Code のすすめ
Avatar for schroneko schroneko
67
210k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
140
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
850

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