Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

CSS – You’ve Been Doing It Wrong

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Harry Roberts Harry Roberts
June 04, 2013
Design
3k
14

CSS – You’ve Been Doing It Wrong

CSS – You’ve Been Doing It Wrong, Hey!Stac, Leeds. June 2013.

Avatar for Harry Roberts

Harry Roberts

June 04, 2013

More Decks by Harry Roberts

See All by Harry Roberts
Build for the Web, Build on the Web, Build With the Web
Avatar for Harry Roberts csswizardry
0
580
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.5k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.8k
cache rules everything
Avatar for Harry Roberts csswizardry
5
3.9k
My Website Is Slow!
 Where Do I Start?
Avatar for Harry Roberts csswizardry
5
610
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
4k
Get Your Head Straight
Avatar for Harry Roberts csswizardry
15
21k
From Milliseconds
 to Millions: A Look at the Numbers Powering Web Performance
Avatar for Harry Roberts csswizardry
1
2.8k
More Than You Ever Wanted to Know About Resource Hints
Avatar for Harry Roberts csswizardry
6
11k

Other Decks in Design

See All in Design
Техники структурирования беседы с собой, заказчиком и командо
Avatar for Andrew Shapiro ashapiro
0
300
「おすすめ」はなぜ信用されないのか - 信頼を築くUI/UX設計
Avatar for ryu ryu1013
0
290
StartDesignEngineering
Avatar for uchiyama886 uchiyama886
0
110
日経電子版を支えていく Kasane Design System
Avatar for Taito Tanaka taitotnk
0
330
富山デザイン勉強会_デザイン思考.pdf
Avatar for keita keita_yoshikawa
3
180
LP制作のための熱量ハーネス -人の熱量を、AIとの制作につなぐ-
Avatar for niccy niccy
0
1.3k
TOPOSTOPOS
Avatar for Shohei Yoshida shoheyey
0
210
開閉UIのアニメーション設計
Avatar for hiro hiro0218
2
1.1k
【CEDEC2026】『Shadowverse: Worlds Beyond』続編開発におけるUIデザイン・アニメーション演出の「超進化」 ～継承と挑戦を両立するデザイン手法～
Avatar for Cygames, Inc. cygames
PRO
3
5.2k
root COMPANY DECK / We are hiring！
Avatar for 株式会社ルート root_recruit
4
30k
UI生成の鍵は要件整理 -デザインプロセスのエッセンスを プロンプト作成に取り入れよう-
Avatar for 都村　美帆 abokadotyann
4
1.1k
もっともらしさ生成器と暮らす – AI懐疑派の試行錯誤
Avatar for sekig(ojiee) sekiguchiy
0
190

Featured

See All Featured
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
53k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2.2k
Between Models and Reality
Avatar for mayunak mayunak
4
460
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
23k
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
3
1.4k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
1k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
306
120k
Done Done
Avatar for chrislema chrislema
186
16k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
56
3.5k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
12k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
2
280
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
570

Transcript

  1. CSS – You’ve Been Doing It Wrong

  2. Harry Roberts @csswizardry @

  3. None

  4. CSS – You’ve Been Doing It Wrong

  5. Should designers code?

  6. Sure! But not as designers.

  7. ‘We all know developers shouldn’t design.’

  8. 1955: FORTRAN

  9. 1996: CSS

  10. Programmers have had a 41 year head start!

  11. We should listen to developers.

  12. Abstractions

  13. Object orientation

  14. Performance first

  15. DRY

  16. Single Responsibility Principle

  17. KISS

  18. CSS != ‘Code’

  19. DRYness

  20. DRYness Robustness

  21. DRYness Scalability Robustness

  22. DRYness Scalability Robustness Performance

  23. DRYness Scalability Maintainability Robustness Performance

  24. DRYness Efficiency Scalability Maintainability Robustness Performance

  25. DRYness Efficiency Scalability Maintainability Modularity Robustness Performance

  26. DRYness Efficiency Scalability Maintainability Modularity Robustness Portability Performance

  27. DRYness Efficiency Scalability Maintainability Readability Modularity Robustness Portability Performance

  28. Over engineered

  29. Complex

  30. Spaghetti code

  31. Developers have been listening to designers :(

  32. <?= date("Y") ?>

  33. ‘No extra markup!’

  34. ‘Semantic classes!’

  35. Prettiness

  36. Hand crafting

  37. Gold plating

  38. Complexity

  39. CSS is pretty poor…

  40. …but you can write it better.

  41. Write CSS with a developer’s mind.

  42. CSS – You’ve Been Doing It Wrong

  43. Harry Roberts @csswizardry @