Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS – You’ve Been Doing It Wrong
Search
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
Share
More Decks by Harry Roberts
See All by Harry Roberts
Site-Speed That Sticks
csswizardry
2
190
How to Think Like a Performance Engineer
csswizardry
22
1.2k
cache rules everything
csswizardry
3
3k
My Website Is Slow! Where Do I Start?
csswizardry
5
410
Optimising Largest Contentful Paint
csswizardry
33
3k
Get Your Head Straight
csswizardry
15
19k
From Milliseconds to Millions: A Look at the Numbers Powering Web Performance
csswizardry
1
2.4k
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
GAtechnologies_Designer_Culture_Deck_会社紹介資料
gatechnologies
0
110
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
4.1k
The Very Small Creatures - dressing up warm sequence
lizziestoryboards
0
100
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 組織横断のデザインの 取り組みについて
sig
1
210
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
300
発表資料テンプレート / My slide template
thatblue
0
140
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
220
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
470
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
4
270
今日から始める グラレコ チャレンジ DevRel/Tokyo #94 〜グラレコ チャレンジ〜
moshimoshiyuki
0
140
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
560
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
220
Featured
See All Featured
Building Adaptive Systems
keathley
38
2.3k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.6k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
The Invisible Side of Design
smashingmag
298
50k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.2k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
32
2.7k
Fireside Chat
paigeccino
34
3.1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
530
Transcript
CSS – You’ve Been Doing It Wrong
Harry Roberts @csswizardry @
None
CSS – You’ve Been Doing It Wrong
Should designers code?
Sure! But not as designers.
‘We all know developers shouldn’t design.’
1955: FORTRAN
1996: CSS
Programmers have had a 41 year head start!
We should listen to developers.
Abstractions
Object orientation
Performance first
DRY
Single Responsibility Principle
KISS
CSS != ‘Code’
DRYness
DRYness Robustness
DRYness Scalability Robustness
DRYness Scalability Robustness Performance
DRYness Scalability Maintainability Robustness Performance
DRYness Efficiency Scalability Maintainability Robustness Performance
DRYness Efficiency Scalability Maintainability Modularity Robustness Performance
DRYness Efficiency Scalability Maintainability Modularity Robustness Portability Performance
DRYness Efficiency Scalability Maintainability Readability Modularity Robustness Portability Performance
Over engineered
Complex
Spaghetti code
Developers have been listening to designers :(
<?= date("Y") ?>
‘No extra markup!’
‘Semantic classes!’
Prettiness
Hand crafting
Gold plating
Complexity
CSS is pretty poor…
…but you can write it better.
Write CSS with a developer’s mind.
CSS – You’ve Been Doing It Wrong
Harry Roberts @csswizardry @