Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS Wranglin'

Avatar for Joe Ellis Joe Ellis
March 01, 2013
Technology
140
6

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

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

Other Decks in Technology

See All in Technology
AIチャット検索改善の3週間
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
2
170
ロボティクスの技術 / Robotics Technology
Avatar for Kenji Saito ks91
PRO
0
130
WebGIS AI Agentの紹介
Avatar for _shimizu _shimizu
0
560
コミュニティの有益性 ~JAWS Days 2026 での体験を通して~ / The Benefits of a Community ~Through My Experience at JAWS Days 2026~
Avatar for shiro seike seike460
PRO
0
270
「ビジネスがわかるエンジニア」とは何か？
Avatar for ryooob ryooob
0
310
徹底討論！ECS vs EKS！
Avatar for 高棹大樹 daitak
3
1.7k
水を運ぶ人としてのリーダーシップ
Avatar for izumii19 izumii19
4
1k
本当の”仕事”を手放せる未来が見えた
Avatar for mu7889yoon / Yuta Nakamura mu7889yoon
0
130
40代で“やっとエンジニアになれた”――閉じた学びを開き、空の青さを知る / 20260628 Naoki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
4
870
飲食店もAIで。レジ締めやハンディシステムをつくってる話 / Using AI for restaurant management
Avatar for VTRyo vtryo
0
180
レガシーな広告配信システムでのAI駆動開発/運用の挑戦
Avatar for りゅうせい i16fujimoto
0
120
作る力から、見極める力へ — AI時代に広がるエンジニアの価値と役割
Avatar for rince rince
0
330

Featured

See All Featured
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.4k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
7
36k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
123
22k
Fireside Chat
Avatar for paigeccino paigeccino
42
4k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
210
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
220
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.5k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
220k
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
260
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.3k

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