Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS – You’ve Been Doing It Wrong

Harry Roberts
June 04, 2013
Design
14
3k

CSS – You’ve Been Doing It Wrong

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

Harry Roberts

June 04, 2013
Tweet

More Decks by Harry Roberts

See All by Harry Roberts
Site-Speed That Sticks
csswizardry
0
19
How to Think Like a Performance Engineer
csswizardry
20
1.1k
cache rules everything
csswizardry
3
3k
My Website Is Slow!
 Where Do I Start?
csswizardry
5
390
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Get Your Head Straight
csswizardry
14
18k
From Milliseconds
 to Millions: A Look at the Numbers Powering Web Performance
csswizardry
1
2.3k
More Than You Ever Wanted to Know About Resource Hints
csswizardry
6
9k
It’s My (Third) Party, and I’ll Cry if I Want To
csswizardry
13
5.3k

Other Decks in Design

See All in Design
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
300
SpectrumTokyoMeetup12_自動貯金アプリ『finbee』での取り組みについて
shihorishimazu
2
390
デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス
shuzo
14
6.2k
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
300
ピクシブにおける「ビジョン」の取り扱われ方 #pixivdevmeetup / 20240920
minamitary
1
1.3k
想像するためのデザイン - LARPの可能性を探求してみた話
okabemy
0
550
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
takanorip
5
670
ZKK_001.pdf
nicholaspegu
0
1.4k
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
170
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
160
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
350
Improve a service workshop
mastervicedesign
1
110

Featured

See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
A Tale of Four Properties
chriscoyier
156
23k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
Embracing the Ebb and Flow
colly
84
4.5k
RailsConf 2023
tenderlove
29
900
What's in a price? How to price your products and services
michaelherold
243
12k
How STYLIGHT went responsive
nonsquared
95
5.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
What's new in Ruby 2.0
geeforr
343
31k

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 @