$30 off During Our Annual Pro Sale. View Details »

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

Other Decks in Technology

See All in Technology
Overture Maps Foundationの3年を振り返る
Avatar for Toru Mori moritoru
0
170
AWS re:Invent 2025で見たGrafana最新機能の紹介
Avatar for 濱田孝治 hamadakoji
0
330
エンジニアリングをやめたくないので問い続ける
Avatar for estie | エスティ estie
2
1.1k
ガイドラインを軸にしたウェブアクセシビリティ改善
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
100
Kiro Autonomous AgentとKiro Powers の紹介 / kiro-autonomous-agent-and-powers
Avatar for tomoki10 tomoki10
0
400
AI時代の開発フローとともに気を付けたいこと
Avatar for KAMEGAWA Kazushi kkamegawa
0
2.9k
Gemini でコードレビュー知見を見える化
Avatar for ZOZO Developers zozotech
PRO
1
250
チーリンについて
Avatar for ぐっち hirotomotaguchi
6
1.8k
コミューンのデータ分析AIエージェント「Community Sage」の紹介
Avatar for Yusuke Fukasawa fufufukakaka
0
480
因果AIへの招待
Avatar for Shohei SHIMIZU sshimizu2006
0
950
Sansanが実践する Platform EngineeringとSREの協創
Avatar for SansanTech sansantech
PRO
2
790
LLM-Readyなデータ基盤を高速に構築するためのアジャイルデータモデリングの実例
Avatar for Kashira kashira
0
240

Featured

See All Featured
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
162
23k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.1k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.3k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
36
6.2k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
280
24k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
253
22k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
9.8k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.4k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
54
7.9k

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