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
Keycloak を使った SSO で CockroachDB にログインする / CockroachDB SSO with Keycloak
Avatar for kota2and3kan kota2and3kan
0
170
OSC仙台プレ勉強会　AlmaLinuxとは
Avatar for koedoyoshida koedoyoshida
0
200
生成AI活用でQAエンジニアにどのような仕事が生まれるか/Support Required of QA Engineers for Generative AI
Avatar for Hiroki Iseri goyoki
1
310
実践 Datadog MCP Server
Avatar for 株式会社ヌーラボ nulabinc
PRO
2
250
Laravelで学ぶOAuthとOpenID Connectの基礎と実装
Avatar for Koji Yoshida kyoshidaxx
1
820
会社紹介資料 / Sansan Company Profile
Avatar for Sansan, Inc. sansan33
PRO
16
410k
AI時代のSaaSとETL
Avatar for Shu Suzuki shoe116
1
200
ABEMAのバグバウンティの取り組み
Avatar for Kurochan kurochan
1
140
中央集権型を脱却した話　分散型をやめて、連邦型にたどり着くまで
Avatar for SansanTech sansantech
PRO
1
110
社内レビューは機能しているのか
Avatar for Jun Matsuba matsuba
0
160
バクラク最古参プロダクトで重ねた技術投資を振り返る
Avatar for ypresto ypresto
0
190
Microsoft “Adaptive Cloud” Update 2026年3月版
Avatar for osamut sdosamut
0
100

Featured

See All Featured
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.7k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.4k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
450
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.6k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.4k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.7k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
210
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
0
270
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
110
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.4k

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