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
Yahoo!ショッピングにおけるQAエンジニア
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
130
LLM時代のパフォーマンスチューニング：MongoDB運用で試したコンテキスト活用の工夫
Avatar for ishikawa-pro ishikawa_pro
0
200
iOSDJ2025 - Stream Deck Plugin using Swift
Avatar for h.crane hcrane
0
130
2025/09/16 仕様駆動開発とAI-DLCが導くAI駆動開発の新フェーズ
Avatar for オカムラ masahiro_okamura
0
250
テストコードすら書けなかったレガシーアプリがAIと上手に協働できるようになるまでの軌跡
Avatar for ディップ株式会社 dip_tech
PRO
0
170
はじめてのOSS開発からみえたGo言語の強み
Avatar for shibutani shibukazu
4
1.1k
AIの最新技術＆テーマをつまんで紹介＆フリートークするシリーズ：はじめてのローカルLLM
Avatar for Shunsuke Tanaka stanaka26
0
140
20250912_RPALT_データを集める→とっ散らかる問題_Obsidian紹介
Avatar for Naoko Shinagawa ratsbane666
0
110
いま注目のAIエージェントを作ってみよう
Avatar for Marimo supermarimobros
0
420
Snowflake×dbtを用いたテレシーのデータ基盤のこれまでとこれから
Avatar for Sagara sagara
0
200
IoT x エッジAI - リアルタイ ムAI活用のPoCを今すぐ始め る方法 -
Avatar for niizawat niizawat
0
170
AIフレンドリーなコードベースを目指して/登壇資料（高橋 悟生）
Avatar for Hacobu hacobu
PRO
3
550

Featured

See All Featured
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
13k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.5k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
303
21k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
84
9.2k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.4k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
352
21k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.7k
KATA
Avatar for Megan Lloyd mclloyd
32
14k

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