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

CSS Wranglin'

Avatar for Joe Ellis Joe Ellis
March 01, 2013
Technology
130
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
Redmine次期バージョン7.0の注目新機能解説 — UI/UX強化と連携強化を中心に
Avatar for MAEDA Go vividtone
1
180
Gaussian Splattingの実用化 - 映像制作への展開
Avatar for GPU UNITE gpuunite_official
0
200
AsyncStreamでマルチブロードキャストを実装する
Avatar for 1mash0 1mash0
1
150
Oracle Base Database Service 技術詳細
Avatar for oracle4engineer oracle4engineer
PRO
15
100k
20260516_SecJAWS_Days
Avatar for Takuya Yonezawa takuyay0ne
2
500
パーソルキャリア IT/テクノロジー職向け 会社紹介資料｜Company Introduction Deck
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
220
Purview Endpoint DLP 動かしてみた
Avatar for kozakigh kozakigh
1
440
全社統制を維持しながら現場負担をどう減らすか〜プラットフォームチームとセキュリティチームで進めたSecurity Hub活用によるAWS統制の見直し〜/secjaws-security-hub-custom-insights
Avatar for みずほリサーチ&テクノロジーズ株式会社 先端技術研究部 mhrtech
1
590
CARTA HOLDINGS エンジニア向け 採用ピッチ資料 / CARTA-GUIDE-for-Engineers
Avatar for CARTA Engineering carta_engineering
0
47k
オライリーイベント登壇資料「鉄リサイクル・産廃業界におけるAI技術実応用のカタチ」
Avatar for Takumi Karasawa takarasawa_
0
420
Fラン学生が考える、AI時代のデザインに執着した突破口
Avatar for husensan husengs7
1
210
クラウドからエッジまで ~ 1,700台を支える監視設計~
Avatar for OptFit Corp. optfit
0
110

Featured

See All Featured
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
17k
HDC tutorial
Avatar for Michiel Stock michielstock
2
660
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
5.5k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
570
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
560
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.5k
New Earth Scene 8
Avatar for Sydney Stone popppiees
3
2.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
510
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
300
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.4k

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