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

CSS – You’ve Been Doing It Wrong

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
560
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
600
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.9k
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
PAMPHLET.pdf
Avatar for M-HAND,Inc. mhand01
0
1.8k
1000人規模の組織でデザインハーネスを導入するための第一歩
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
5
3.9k
Debiasing Your Software Design Decision-Making @ Flowcon '26
Avatar for Kenny Baas-Schwegler baasie
1
170
明日から真似できる、AIでデザインシステムを活用する方法
Avatar for viviON vivion
0
400
空間アプリ開発のフィードバックをCodexにするための抽象的なデザインツールの模索
Avatar for kazuhiro hara karad
0
190
いいUIとは？初心者向けに事例をもとにUIデザインを分解
Avatar for 原 佑一｜クリエイティブディレクター yuichi_hara7
11
6k
凡庸を落とすハーネス
Avatar for Hiromi Maeo hiromimaeo
2
830
なぜ、インサイトを貯めるのか？
Avatar for 田島佳穂 tajima_kaho
3
2.7k
decksh object reference
Avatar for Anthony Starks ajstarks
2
1.8k
工房としてのAI ── デザイナー、作家、ビルダー
Avatar for hiranotomoki hiranotomoki
0
450
Rethinking IFUs: What Board Game Rulebooks Contribute to IFU Usability
Avatar for Chris Hass deadlinepoet
0
370
20260309_3月ICTデザイン勉強会_地域創生2.0
Avatar for Kimura Atsunobu a2k
0
180

Featured

See All Featured
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
870
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
464
34k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.8k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
3
1.2k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7.2k
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
550
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
680
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
330
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.7k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.7k

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 @