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
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
150
RSNA2024振り返り
nanachi
0
500
Datadogとともにオブザーバビリティを布教しよう
mego2221
0
130
[2025-02-07]生成AIで変える問い合わせの未来 〜チームグローバル化の香りを添えて〜
tosite
1
290
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
890
「海外登壇」という 選択肢を与えるために 〜Gophers EX
logica0419
0
500
自動テストの世界に、この5年間で起きたこと
autifyhq
10
7.1k
『AWS Distinguished Engineerに学ぶ リトライの技術』 #ARC403/Marc Brooker on Try again: The tools and techniques behind resilient systems
quiver
0
130
スクラムのイテレーションを導入してチームの雰囲気がより良くなった話
eccyun
0
110
データの品質が低いと何が困るのか
kzykmyzw
6
1k
20250208_OpenAIDeepResearchがやばいという話
doradora09
PRO
0
170
トラシューアニマルになろう ～開発者だからこそできる、安定したサービス作りの秘訣～
jacopen
2
1.5k

Featured

See All Featured
Testing 201, or: Great Expectations
jmmastey
41
7.2k
Code Reviewing Like a Champion
maltzj
521
39k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
RailsConf 2023
tenderlove
29
1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Building an army of robots
kneath
302
45k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Optimizing for Happiness
mojombo
376
70k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k

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