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
LLM翻訳ツールの開発と海外のお客様対応等への社内導入事例
Avatar for gree_tech gree_tech
PRO
0
440
Language Update: Java
Avatar for Yuichi.Sakuraba skrb
2
220
Kubernetes における cgroup driver のしくみ: runwasi の bugfix より
Avatar for z63d z63d
2
120
ヘブンバーンズレッドのレンダリングパイプライン刷新
Avatar for gree_tech gree_tech
PRO
0
450
実践データベース設計 ①データベース設計概論
Avatar for Recruit recruitengineers
PRO
4
2k
RSCの時代にReactとフレームワークの境界を探る
Avatar for uhyo uhyo
9
2.1k
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
Avatar for Masaya Kudo msykd
PRO
1
240
実運用で考える PGO
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
0
130
Vault meets Kubernetes
Avatar for mochizuki875 mochizuki875
0
170
Jaws-ug名古屋_LT資料_20250829
Avatar for Azoo azoo2024
3
210
衝突して強くなる！ BLUE GIANTと アジャイルチームの共通点とは ― いきいきと活気に満ちたグルーヴあるチームを作るコツ ― / BLUE GIANT and Agile Teams
Avatar for naiban naitosatoshi
0
290
7月のガバクラ利用料が高かったので調べてみた
Avatar for 高橋広和 techniczna
3
820

Featured

See All Featured
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7.1k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.8k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
358
30k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
3
610
Scaling GitHub
Avatar for Zach Holman holman
463
140k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
45
7.6k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.6k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
73
5k

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