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
120

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

Other Decks in Technology

See All in Technology
Как мы автоматизировали интеграционное тестирование с Gonkey и не пожалели. Паша Егорычев, Кирилл Поляков
Avatar for Lamoda Tech lamodatech
0
2.1k
RubyKaigi NOC 近況 2025
Avatar for Sorah Fukumori sorah
1
740
Google Cloud Next 2025 Recap 生成AIモデルとマーケティングでのコンテンツ生成 / Generative AI models and content creation in marketing
Avatar for Kyohei Saito kyou3
0
100
AOAI で AI アプリを開発する時にまず考えたいこと
Avatar for Yuji Masaoka | まっぴぃ mappie_kochi
1
650
社内 Web システムのフロントエンド技術刷新: React Router v7 vs. TanStack Router
Avatar for Shuntaro Murakami musasabibyun
0
140
AIとSREで「今」できること
Avatar for HonMarkHunt honmarkhunt
3
720
AIと共同執筆してより質の高い記事を書こう
Avatar for Riya Amemiya riyaamemiya
1
300
大規模サーバーレスプロジェクトのリアルな零れ話
Avatar for mai miya maimyyym
3
210
250510 StepFunctionのテスト自動化始めました vol.1
Avatar for Takumi Abe east_takumi
1
210
伝わるコードレビュー
Avatar for abenben abenben
1
100
2025年8月から始まるAWS Lambda INITフェーズ課金/AWS Lambda INIT phase billing changes
Avatar for quiver quiver
1
940
テストって楽しい！開発を加速させるテストの魅力 / Testing is Fun! The Fascinating of Testing to Accelerate Development
Avatar for END aiandrox
0
170

Featured

See All Featured
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
3.8k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
28
5.3k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.7k
Making Projects Easy
Avatar for Brett Harned brettharned
116
6.2k
Building Applications with DynamoDB
Avatar for Matt Wood mza
94
6.4k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
268
20k
Fireside Chat
Avatar for paigeccino paigeccino
37
3.4k
KATA
Avatar for Megan Lloyd mclloyd
29
14k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
3.8k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.3k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
31
8.6k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
41
2.3k

Transcript

  1. CSS Wranglin’ Friday, March 1, 13

  2. by Joe Ellis @notjoeellis joe@joeellis.la 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