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
cache rules everything
csswizardry
0
360
My Website Is Slow!
 Where Do I Start?
csswizardry
0
99
Optimising Largest Contentful Paint
csswizardry
6
1.8k
Get Your Head Straight
csswizardry
13
15k
From Milliseconds
 to Millions: A Look at the Numbers Powering Web Performance
csswizardry
1
1.9k
More Than You Ever Wanted to Know About Resource Hints
csswizardry
6
8k
It’s My (Third) Party, and I’ll Cry if I Want To
csswizardry
13
4.8k
FaCSSt: CSS & Performance
csswizardry
26
3.4k
Vim for Front-end Developers
csswizardry
12
5.7k

Other Decks in Design

See All in Design
decksh object reference
ajstarks
2
610
<form>があればゴルフもできる / If a <form> is there, you can play golf.
akwkm
0
660
東京女子プロレス「愛される団体」のためのリブランディング
cyberagentdevelopers
PRO
0
370
ユーザーのペルソナを元にしたアクセシビリティガイドラインを作りたいというアイデア - レバレジーズ x ココナラ x ニフティ 合同フロントエンド勉強会
niftycorp
0
110
SHM Illustration
thebloggart
0
260
Figmaの思想と新機能
sakito
17
6.4k
使いやすいをデザインする［DevelopersIO 2023 岡山］
littlebusters
2
450
Behavioural Science + Product Innovation = ❤️
bermonpainter
0
160
Diederick Geers - Story Portfolio 2024 (in progress)
dieckg
0
240
デザイナー向けLoglass会社紹介
loglass2019
2
220
企業のための言葉えらび 〜Ameba リブランディングプロジェクト〜
cyberagentdevelopers
PRO
1
430
2023年度 尾道市立大学 特別講義「デザインと編集」
ikuhotamura
0
160

Featured

See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
780
250k
The Art of Programming - Codeland 2020
erikaheidi
39
12k
Unsuck your backbone
ammeep
660
56k
Fireside Chat
paigeccino
18
2.2k
In The Pink: A Labor of Love
frogandcode
135
21k
Stop Working from a Prison Cell
hatefulcrawdad
265
18k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
239
1.2M
Testing 201, or: Great Expectations
jmmastey
26
6k
Writing Fast Ruby
sferik
615
59k
Making the Leap to Tech Lead
cromwellryan
119
8.1k
Automating Front-end Workflow
addyosmani
1354
200k
Building Adaptive Systems
keathley
29
1.6k

Transcript

  1. CSS – You’ve Been
    Doing It Wrong

    View Slide

  2. Harry Roberts
    @csswizardry
    @

    View Slide

  3. View Slide

  4. CSS – You’ve Been
    Doing It Wrong

    View Slide

  5. Should designers code?

    View Slide

  6. Sure!
    But not as designers.

    View Slide

  7. ‘We all know developers
    shouldn’t design.’

    View Slide

  8. 1955: FORTRAN

    View Slide

  9. 1996: CSS

    View Slide

  10. Programmers have had
    a 41 year head start!

    View Slide

  11. We should
    listen to developers.

    View Slide

  12. Abstractions

    View Slide

  13. Object orientation

    View Slide

  14. Performance first

    View Slide

  15. DRY

    View Slide

  16. Single Responsibility
    Principle

    View Slide

  17. KISS

    View Slide

  18. CSS != ‘Code’

    View Slide

  19. DRYness

    View Slide

  20. DRYness
    Robustness

    View Slide

  21. DRYness
    Scalability
    Robustness

    View Slide

  22. DRYness
    Scalability
    Robustness
    Performance

    View Slide

  23. DRYness
    Scalability
    Maintainability
    Robustness
    Performance

    View Slide

  24. DRYness
    Efficiency
    Scalability
    Maintainability
    Robustness
    Performance

    View Slide

  25. DRYness
    Efficiency
    Scalability
    Maintainability
    Modularity
    Robustness
    Performance

    View Slide

  26. DRYness
    Efficiency
    Scalability
    Maintainability
    Modularity
    Robustness
    Portability
    Performance

    View Slide

  27. DRYness
    Efficiency
    Scalability
    Maintainability
    Readability
    Modularity
    Robustness
    Portability
    Performance

    View Slide

  28. Over engineered

    View Slide

  29. Complex

    View Slide

  30. Spaghetti code

    View Slide

  31. Developers have been
    listening to designers :(

    View Slide

  32. = date("Y") ?>

    View Slide

  33. ‘No extra markup!’

    View Slide

  34. ‘Semantic classes!’

    View Slide

  35. Prettiness

    View Slide

  36. Hand crafting

    View Slide

  37. Gold plating

    View Slide

  38. Complexity

    View Slide

  39. CSS is pretty poor…

    View Slide

  40. …but you can
    write it better.

    View Slide

  41. Write CSS with a
    developer’s mind.

    View Slide

  42. CSS – You’ve Been
    Doing It Wrong

    View Slide

  43. Harry Roberts
    @csswizardry
    @

    View Slide