I scraped CSS files from 20,000 websites and compiled them into some charts and graphs that will affect my web development work at Quick Left. I learned about responsive breakpoints, color usage, progressive enhancement, and more.

1. CSSintheWild
Alex McPherson, Engineering Lead
+
Quick Left

2. Website?
Anyone seen one that looks bad?

4. The web moves
fast
Writing CSS is
hard

5. IStudiedHow
WebsitesAreMade
• 20,000 random sites’ CSS Files
• Put into PostgreSQL
• Explored with RStudio

6. Findings!
If you’re a web developer, these are
interesting.
VERY
If you’re a not… they’re
interesting.
sortof

7. Finding#1:Colors!

8. Finding#1:Colors!
Top 10:

9. Finding#1:Colors!
Top 10:
???

10. Finding#1:Colors!
Top 10:
That little guy is #428BCA

11. Finding#1:Colors!
Top 10:
That little guy is #428BCA
He comes from Twitter Bootstrap

12. Finding#1:Colors!
Bootstrapisseeingverywideadoption

13. Finding#1:Colors!
Bootstrapisseeingverywideadoption
Adaptourinternaltraining

14. Finding#2:CSSQuality

15. Finding#2:CSSQuality
CSS looks like this:

16. Finding#2:CSSQuality
CSS looks like this:

17. Finding#2:CSSQuality
CSS looks like this:
Usually…

18. Finding#2:CSSQuality
There are about 80 valid things to control
with CSS

19. Finding#2:CSSQuality
We found people tried to use 300!
There are about 80 valid things to control
with CSS

20. Finding#2:CSSQuality
We found people tried to use 300!
There are about 80 valid things to control
with CSS

21. Finding#2:CSSQuality
We found people tried to use 300!
There are about 80 valid things to control
with CSS

22. Finding#2:CSSQuality
This is both
funny…
and
horrifying

23. Finding#2:CSSQualityisLacking

24. Finding#2:CSSQualityisLacking
PeoplearewritingjunkyCSS

25. Finding#2:CSSQualityisLacking
PeoplearewritingjunkyCSS
Thisleadstojunkywebsites

26. Finding#2:CSSQualityisLacking
PeoplearewritingjunkyCSS
Thisleadstojunkywebsites
WeusetoolstowritelessjunkyCSS

27. Finding#3:Breakpoints

28. Finding#3:Breakpoints
When a site changes layout:

29. Finding#3:Breakpoints
It’s good for the viewer!
Looks right on any device.
It’s called ‘responsive’

30. Finding#3:Breakpoints
Making sites like this is
THEWORST

31. Finding#3:Breakpoints
Welcome to my hell:

32. Finding#3:Breakpoints
I need to pick the widths where it ‘jumps’
from one layout to another.
The more breakpoints I have to take into
account, the harder styling a page is.

33. Finding#3:Breakpoints
You can find breakpoints in CSS
You can graph them!

34. Finding#3:Breakpoints

35. Finding#3:Breakpoints
This is great news!

36. Finding#3:Thereisonly1breakpoint

37. Finding#3:Thereisonly1breakpoint
Mostsites
respect~768px
(This is where most tablets start)

38. Finding#3:Thereisonly1breakpoint
Icantellmy
designertostart
withjust2layouts

39. Finding#3:Thereisonly1breakpoint
Myjobiseasier

40. The web moves
fast
Writing CSS is
hard

41. Seeing how the rest of
the world does it is
valuable

42. Seeing how the rest of
the world does makes us
betteratourjobs

43. Questions?
@alexmcpherson
mcphersonindustries.com/css-scraping