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

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
960
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.3k
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.5k
It’s My (Third) Party, and I’ll Cry if I Want To
Avatar for Harry Roberts csswizardry
13
5.6k

Other Decks in Design

See All in Design
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
550
kintone Style Book
Avatar for kintone kintone
5
5.5k
Yahoo!フリマ：生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
550
CMS管理画面のアクセシビリティ
Avatar for Rikiya Ihara / magi magi1125
8
2.6k
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
Avatar for インクルーシブデザインスタジオCULUMU culumu
1
480
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
290
第4回関東Kaggler会LT HCD-Net人間中心設計スペシャリストが語るNotebookメダルの取り方
Avatar for Isao utm529f
0
1.4k
高卒公務員から Webデザイナーになるまで
Avatar for kinomi kinomidesign
0
130
Goodpatch Tour💙 / We are hiring!
Avatar for Goodpatch Inc. goodpatch
31
910k
CursorでAI活用のナレッジベースを構築する
Avatar for 神崎 kanzaki
0
890
プラットフォームに馴染むモバイルアプリデザイン / Mobile App UI Design Lunch LT
Avatar for Hiroki Nagasawa pixyzehn
0
110
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
Avatar for Hiromi Morikawa hiromitsuuuuu
1
910

Featured

See All Featured
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.2k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
54
7.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
34
2.3k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
Done Done
Avatar for chrislema chrislema
186
16k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.3k

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 @