400,000 lines of CSS at Etsy

(written by lawrence krubner, however indented passages are often quotes). You can contact lawrence at: lawrence@krubner.com


When Etsy announces their switch to SCSS to make their styles more maintainable the finding should not be “SASS beats CSS”, but it would be interesting to learn what lead to over 400,000 lines of CSS in over 2000 files for an actually not that complex site in the first place. The article is very interesting and shows some great differences in people dealing with code:

CSS enthusiasts love the fact that CSS doesn’t stop executing when it encounters errors — it just skips them, which allows, for example, for browser prefixes. For Etsy, this was an issue, as it was impossible to pin-point where things went wrong in the CSS. Instead of digging, people just wrote more CSS with a higher number or selectors to overwrite existing styles. I love that the article also mentions the dangers of SCSS, and especially @extends allowing for the final CSS to bloat again. It doesn’t mention the gains that came from switching to SCSS, all it explains is that now they are thinking properly about how to write the styles for the product to avoid bloat.