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

CSS Wranglin'

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.

Joe Ellis

March 01, 2013
Tweet

More Decks by Joe Ellis

See All by Joe Ellis
Sass vs Less vs Stylus vs Rework
notjoeellis
3
2.2k
Scalable CSS
notjoeellis
5
350
Barcamp 5 - A Website's Tale
notjoeellis
2
190

Other Decks in Technology

See All in Technology
10分でわかるfreeeのQA
freee
1
12k
.mdc駆動ナレッジマネジメント/.mdc-driven knowledge management
yodakeisuke
24
11k
GitHub MCP Serverを使って Pull Requestを作る、レビューする
hiyokose
2
710
SREが実現する開発者体験の革新
sansantech
PRO
0
180
クォータ監視、AWS Organizations環境でも楽勝です✌️
iwamot
PRO
1
240
50人の組織でAIエージェントを使う文化を作るためには / How to Create a Culture of Using AI Agents in a 50-Person Organization
yuitosato
6
3.2k
TopAppBar Composableをカスタムする
hunachi
0
170
LangfuseでAIエージェントの 可観測性を高めよう！/Enhancing AI Agent Observability with Langfuse!
jnymyk
0
170
Android는 어떻게 화면을 그릴까?
davidkwon7
0
100
古き良き Laravel のシステムは関数型スタイルでリファクタできるのか
leveragestech
1
640
Рекомендации с нуля: как мы в Lamoda превратили главную страницу в ключевую точку входа для персонализированного шоппинга. Данил Комаров, Data Scientist, Lamoda Tech
lamodatech
0
330
20250408 AI Agent workshop
sakana_ai
PRO
15
3.5k

Featured

See All Featured
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Code Review Best Practice
trishagee
67
18k
Statistics for Hackers
jakevdp
798
220k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.7k
Unsuck your backbone
ammeep
670
57k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.2k
Why Our Code Smells
bkeepers
PRO
336
57k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
390

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