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.1k
Scalable CSS
notjoeellis
5
350
Barcamp 5 - A Website's Tale
notjoeellis
2
180

Other Decks in Technology

See All in Technology
2024.02.19 W&B AIエージェントLT会 / AIエージェントが業務を代行するための計画と実行 / Algomatic 宮脇
smiyawaki0820
10
1.6k
データ資産をシームレスに伝達するためのイベント駆動型アーキテクチャ
kakehashi
PRO
2
470
OpenID Connect for Identity Assurance の概要と翻訳版のご紹介 / 20250219-BizDay17-OIDC4IDA-Intro
oidfj
0
160
ユーザーストーリーマッピングから始めるアジャイルチームと並走するQA / Starting QA with User Story Mapping
katawara
0
170
開発組織のための セキュアコーディング研修の始め方
flatt_security
3
1.4k
Datadogとともにオブザーバビリティを布教しよう
mego2221
0
130
一度 Expo の採用を断念したけど、 再度 Expo の導入を検討している話
ichiki1023
1
160
なぜ私は自分が使わないサービスを作るのか？ / Why would I create a service that I would not use?
aiandrox
0
510
Platform Engineeringは自由のめまい
nwiizo
4
2k
トラシューアニマルになろう ～開発者だからこそできる、安定したサービス作りの秘訣～
jacopen
2
1.8k
30分でわかる『アジャイルデータモデリング』
hanon52_
9
2.5k
7日間でハッキングをはじめる本をはじめてみませんか？_ITエンジニア本大賞2025
nomizone
2
1.7k

Featured

See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
How to Ace a Technical Interview
jacobian
276
23k
A designer walks into a library…
pauljervisheath
205
24k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
How GitHub (no longer) Works
holman
313
140k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
Typedesign – Prime Four
hannesfritz
40
2.5k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
We Have a Design System, Now What?
morganepeng
51
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