dotCSS 2015 — (S)CSS at Dropbox

Alternative title: “Move Slow and Fix Things”

Transcript

1. A STORY IN TWO PARTS (S)CSS AT DROPBOX Daniel Eden, @_dte
2. A STORY IN TWO PARTS (S)CSS AT DROPBOX SCALING (S)CSS AT DROPBOX
3. A STORY IN TWO PARTS (S)CSS AT DROPBOX SCALING (S)CSS AT DROPBOX (S)CSS AT DROPBOX SUCKS
4. MOVE SLOW AND FIX THINGS
5. (S)CSS at Dropbox dotCSS, December 2015
6. Who the heck are you? Designer/“Design Engineer” at Dropbox 7 years of FED experience I ❤ CSS (S)CSS at Dropbox dotCSS, December 2015
7. I’m here to tell a story. (S)CSS at Dropbox dotCSS, December 2015
8. CHAPTER 1: DROPBOX IS BAD AT CSS
9. (S)CSS at Dropbox sucks As of 11/03: • 1220 (S)CSS files on metaserver • 149,958 SLOC (6% of the codebase) • main.css stats (S)CSS at Dropbox dotCSS, December 2015
10. How did this happen to us? • Lots of people touching (S)CSS each day • All-or-nothing default styles • Lack of abstraction • Specificity, cascade & inheritance problems • Misunderstanding of rule behaviour (S)CSS at Dropbox dotCSS, December 2015
11. How did this really happen to us? • Dropbox engineers hate writing CSS • Dropbox engineers aren’t good at writing CSS • Dropbox engineers write a lot of CSS (S)CSS at Dropbox dotCSS, December 2015
12. (S)CSS at Dropbox dotCSS, December 2015 800 875 950 1025 1100 120000 125000 130000 135000 140000 Jun 2015 Jul 2015 Aug 2015 Sep 2015 (S)CSS growth in Dropbox web from June–September 2015 Showing SLOC (left, points) and No. of files (right, bars)
13. (S)CSS at Dropbox dotCSS, December 2015
14. How does this happen to everyone? • Primitive CSS debugging tools (eyeballing) • Varying levels of browser support • Specificity is confusing • The box model is confusing • CSS “best practices” are a very new concept (S)CSS at Dropbox dotCSS, December 2015
15. The problem with CSS is that it’s easy to write more of it to fix existing problems. (S)CSS at Dropbox dotCSS, December 2015
16. The problem with CSS is that it’s easy to write it badly. (S)CSS at Dropbox dotCSS, December 2015
17. The problem with CSS is that it’s easy to write. (S)CSS at Dropbox dotCSS, December 2015
18. (S)CSS at Dropbox dotCSS, December 2015
19. Writing CSS at scale • Object-Oriented CSS (OOCSS) • Block, Element, Modifier (BEM) • Inverted Triangle CSS (ITCSS) • Namespacing (S)CSS at Dropbox dotCSS, December 2015
20. (S)CSS at Dropbox dotCSS, December 2015
21. (S)CSS at Dropbox dotCSS, December 2015
22. (S)CSS at Dropbox dotCSS, December 2015
23. (S)CSS at Dropbox dotCSS, December 2015
24. (S)CSS at Dropbox dotCSS, December 2015
25. (S)CSS at Dropbox dotCSS, December 2015
26. CHAPTER 2: DROPBOX IS GETTING BETTER AT CSS
27. Enacting Change • Quantify everything • Make a noise • Scale yourself (S)CSS at Dropbox dotCSS, December 2015
28. Quantify Everything • CLOC (brew/apt-get install cloc) • Parker (github.com/katiefenn/parker) • CSSStats (cssstats.com) (S)CSS at Dropbox dotCSS, December 2015
29. Make a Noise • Become a blocking* reviewer (S)CSS at Dropbox dotCSS, December 2015 *This might piss off some people
30. (S)CSS at Dropbox dotCSS, December 2015
31. (S)CSS at Dropbox dotCSS, December 2015
32. Make a Noise • Become a blocking* reviewer • Give engineering teams CSS updates (knowledge is power) • Encourage engineers to ask for help (S)CSS at Dropbox dotCSS, December 2015 *This might piss off some people
33. Scale Yourself • Linters • Style guides (github.com/dropbox/css-style-guide) • CI Testing (houndci.com) (S)CSS at Dropbox dotCSS, December 2015
34. (S)CSS at Dropbox dotCSS, December 2015 1000 1050 1100 1150 1200 130000 137500 145000 152500 160000 Sep 2015 Oct 2015 Nov 2015 (S)CSS growth in Dropbox web from August–December 2015 Showing SLOC (left, points) and No. of files (right, bars)
35. (S)CSS at Dropbox dotCSS, December 2015 dropbox.github.io/scooter
36. Implementing CSS Methodologies Expectation Reality
37. fin