$30 off During Our Annual Pro Sale. View Details »

CSS – You’ve Been Doing It Wrong

Avatar for Harry Roberts 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.

Avatar for Harry Roberts

Harry Roberts

June 04, 2013
Tweet

More Decks by Harry Roberts

See All by Harry Roberts
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.4k
cache rules everything
Avatar for Harry Roberts csswizardry
5
3.6k
My Website Is Slow!
 Where Do I Start?
Avatar for Harry Roberts csswizardry
5
520
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.5k
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.6k
More Than You Ever Wanted to Know About Resource Hints
Avatar for Harry Roberts csswizardry
6
9.6k
It’s My (Third) Party, and I’ll Cry if I Want To
Avatar for Harry Roberts csswizardry
13
5.7k

Other Decks in Design

See All in Design
デザイナーがAIを使い倒して爆速プロダクト開発！社内ハッカソンでの取り組み紹介
Avatar for 都村　美帆 abokadotyann
9
2.8k
Goodpatch Tour💙 / We are hiring!
Avatar for Goodpatch Inc. goodpatch
31
930k
プラットフォームに馴染むモバイルアプリデザイン / Mobile App UI Design Lunch LT
Avatar for Hiroki Nagasawa pixyzehn
0
110
Installing and Running decksh/pdfdeck
Avatar for Anthony Starks ajstarks
1
900
街・都市という眼差し。まちづくりにおける規範と実践
Avatar for S.SAKAMON sakamon
1
240
デザインを信じていますか
Avatar for sekig(ojiee) sekiguchiy
1
660
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
Avatar for Hiromi Morikawa hiromitsuuuuu
1
1.1k
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
Avatar for Aki spring_aki
1
240
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
Avatar for 株式会社ルート root_recruit
0
320
大きな変化の中で、わたしが向き合ったこと #もがく中堅デザイナー
Avatar for 弁護士ドットコム bengo4com
1
1.4k
ユーザー体験は細部に宿る -ウィジェットQAの挑戦と気づき- / UX is in the details: Challenges and Learnings from Widget QA
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
120
Memory Man v3 (WIP)
Avatar for Chad Welson storybychad
PRO
0
2.9k

Featured

See All Featured
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
57k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.3k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.4k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
9.8k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
19k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
970
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.9k
Docker and Python
Avatar for Tania Allard trallard
47
3.7k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.6k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k

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 @