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
Javaで学ぶSOLID原則
Avatar for Negima negima
1
230
GitHub Copilot CLI の Rubber Duck 機能を使ってコーディングの品質をあげよう #techbaton_findy
Avatar for すてにゃん stefafafan
2
1.2k
AI駆動開発でなんでもハンズオン環境をつくってみた
Avatar for yoshimi0227 yoshimi0227
0
170
oracle-to-databricks-migration-with-llm-and-dbt
Avatar for case-k-git casek
1
350
開発を止めない CI/CD ~CI Visibilityによる継続的最適化~
Avatar for Ryosuke Tsuruda pensuke628
0
160
大規模環境でどのように監視を実現する？
Avatar for Yuto Obayashi yuobayashi
2
310
Platform engineering for developers, architects & the rest of us (AI agents)
Avatar for danielbryantuk danielbryantuk
0
100
Claude code Orchestra
Avatar for Taisei Ozaki ozakiomumkj
2
260
CloudFront VPCオリジンとVPC Latticeサービスの内部ALBをマルチアカウントで一元利用しよう
Avatar for k-kun duelist2020jp
5
260
『家族アルバム みてね』における インシデント対応との向き合い方 / Approach incident response in Family Album
Avatar for kohbis kohbis
2
240
20260528_生成AIを専属DSに_Howの次にすべきことを考える
Avatar for NobuakiOshiro doradora09
PRO
0
250
【ハノーバーメッセ振り返りイベントat名古屋】データは集約からAI起点の収集に ～組織内・組織間でのデータ連携～
Avatar for 田中 聖也 tanakaseiya
0
140

Featured

See All Featured
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
210
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.1k
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
180
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9.1k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
107
240k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
370
Visualization
Avatar for Eitan Lees eitanlees
152
17k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
390
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
200
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
160

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