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
タスクの複雑さでモデルを選ぶ ── Thompson Samplingで動かす“トークン/コスト最適化
Avatar for satoh-y-0323 satohy0323
0
600
AmplifyHostingConstructからSSRフレームワークのためのホスティング設計を考察する/amplify-hosting-construct
Avatar for MURAKAMI Masahiko fossamagna
1
270
AIレビューはどこまで任せられるのか？自動化と人が背負うレビューの境界
Avatar for SansanTech sansantech
PRO
3
1.2k
DatabricksにおけるMCPソリューション
Avatar for Takaaki Yayoi taka_aki
1
310
AI Native なプロダクト組織の立ち上げ方 : 生産性 100 倍への挑戦
Avatar for mikesorae mikesorae
0
720
SRE本の知られざる名シーン / The Hidden Gems of Google SRE Book
Avatar for Narimichi Takamura nari_ex
2
440
Webアプリ認証の全体像 / The Big Picture of Web App Authentication
Avatar for Kitano Yuichi kitano_yuichi
1
350
AIと1000本ノックしてたどり着いた、最速のプロダクト開発 ～toC向けAIエージェントUXを、動く選択肢とAIキャパシティで設計する～ 
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
100
AI時代の開発生産性は、個人技からチーム設計へ
Avatar for Atsushi Nakatsugawa moongift
PRO
4
2.4k
大量データに対しても、生成AIを用いてリーズナブルにデータ加工をしたい！Databricksのai_queryについて調べてみた
Avatar for Kamoshika kamoshika
1
230
LLM/Agent評価：トップ営業の発言を「正解」にする 〜暗黙的正解による評価を営業資産に変える〜
Avatar for Hirotaka takkuhiro
1
240
2年前に削除したPHPクラスが、 ある日突然決済をエラーにした
Avatar for ykagano ykagano
1
610

Featured

See All Featured
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
620
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
240
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3.1k
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
390
Visualization
Avatar for Eitan Lees eitanlees
152
17k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
67k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
220
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
18k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
2.2k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
240
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
150

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