Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS Wranglin'

Avatar for Joe Ellis Joe Ellis
March 01, 2013
Technology
130
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
370
Barcamp 5 - A Website's Tale
Avatar for Joe Ellis notjoeellis
2
210

Other Decks in Technology

See All in Technology
Oracle AI Database@Google Cloud：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
6
1.3k
Strands Agents × Amazon Bedrock AgentCoreで パーソナルAIエージェントを作ろう
Avatar for yoko / Naoki Yokomachi yokomachi
2
170
ブラックボックス化したMLシステムのVertex AI移行 / mlops_community_62
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
1
280
AWSで2番目にリリースされたサービスについてお話しします(諸説あります)
Avatar for Yuuki Yamashita yama3133
0
120
Tour of Agent Protocols: MCP, A2A, AG-UI, A2UI with ADK
Avatar for Mete Atamel meteatamel
1
210
今年60歳のおっさんCBになる
Avatar for Hiroo Katoh kentapapa
1
170
不確実性と戦いながら見積もりを作成するプロセス/mitsumori-process
Avatar for hiro@miraito hirodragon112
1
190
AgentCore RuntimeからS3 Filesをマウントしてみる
Avatar for Har1101 har1101
2
280
AI時代に新卒採用、はじめました/junior-engineer-never-die
Avatar for dmnlk dmnlk
0
140
解剖"React Native"
Avatar for hacusk hacusk
0
110
レガシーシステムをどう次世代に受け継ぐか
Avatar for 立入 tachiiri
0
260
「決め方」の渡し方 / How to hand over the "decision-making process"
Avatar for Pauli pauli
7
1.2k

Featured

See All Featured
Done Done
Avatar for chrislema chrislema
186
16k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
310
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
310
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
250
Between Models and Reality
Avatar for mayunak mayunak
3
260
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
270
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
880
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
220
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.8k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.2k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k

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