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

Other Decks in Technology

See All in Technology
ここ一年のCCoEとしてのAWSコスト最適化を振り返る / CCoE AWS Cost Optimization devio2025
Avatar for MasahiroKawahara masahirokawahara
1
310
Product Management Conference -AI時代に進化するPdM-
Avatar for Yuta Kojima kojima111
0
260
Understanding Go GC #coefl_go_jp
Avatar for 弁護士ドットコム bengo4com
1
1.1k
Yahoo!ニュースにおけるソフトウェア開発
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
540
小さなチーム 大きな仕事 - 個人開発でAIをフル活用する
Avatar for himaratsu himaratsu
0
140
広島銀行におけるAWS活用の取り組みについて
Avatar for Masaki Mori[JAWS-UG広島] masakimori
0
160
「守る」から「進化させる」セキュリティへ ~AWS re:Inforce 2025参加報告~ / AWS re:Inforce 2025 Participation Report
Avatar for Yuji Oshima yuj1osm
1
170
[CV勉強会@関東 CVPR2025 読み会] MegaSaM: Accurate, Fast, and Robust Structure and Motion from Casual Dynamic Videos (Li+, CVPR2025)
Avatar for abemii_ abemii
0
200
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
30k
退屈なことはDevinにやらせよう〜〜Devin APIを使ったVisual Regression Testの自動追加〜
Avatar for ryo kawamataryo
4
910
Oracle Cloud Infrastructure：2025年8月度サービス・アップデート
Avatar for oracle4engineer oracle4engineer
PRO
0
120
コスト削減の基本の「キ」～ コスト消費3大リソースへの対策 ～
Avatar for Makky12 smt7174
2
280

Featured

See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
830
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
328
39k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
31
2.2k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1.1k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
3
600
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.4k
Code Review Best Practice
Avatar for Trisha Gee trishagee
70
19k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
614
210k

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