CSS Development at Large-Scale Websites

A slew of posts about CSS development at websites like GitHub, Groupon, and CodePen came out recently. They’re interesting to read, and will provide you with many tips and ideas for creating your own CSS development guidelines.

Here are links to seven blog posts that give an overview of the tools, philosophies, and techniques being used to develop CSS at large-scale sites and apps.

1. CSS at Groupon

CSS at Groupon

Mike Aparicio, UI engineer at Groupon, recalls how the popular daily-deals site created their own CSS framework called Toolstrap, after debating whether or not they should use Bootstrap. They use SMACSS as a development philosophy.

2. CodePen’s CSS

CodePen's CSS

This blog post by Chris Coyier outlines the CSS at CodePen. CodePen uses SCSS as its preprocessor and Autoprefixer to deal with vendor-prefixing of CSS properties.

3. GitHub’s CSS

GitHub's CSS

According to Mark Otto, co-creator of Bootstrap and designer at GitHub, the code-hosting site uses SCSS as its preprocessor. The site has over 100 individual source stylesheets that then gets compiled down to only two stylesheets for production.

4. CSS at Lonely Planet

CSS at Lonely Planet

Ian Feather wrote about CSS development at Lonely Planet (the travel guide publisher). The site uses Sass and follows a modified BEM and OOCSS approach to CSS architecture. The site also maintains a design style guide called Rizzo.

5. CSS at Hootsuite

CSS at Hootsuite

Hootsuite, a social-media-management app, has over 40 engineers, and four of them are dedicated to HTML and CSS. The app’s preprocessor is LESS, follows a CSS philosophy inspired by BEM and SUIT CSS, according to Steve Mynett, designer and developer at Hootsuite.

6. Buffer’s CSS

Buffer's CSS

Brian Lovin, Product Manager at Buffer, wrote about their app’s CSS where he mentions they use idiomatic CSS as a style guide. The site’s core stylesheet has 3,094 selectors and (heftily) weighs in at 271kb. They use LESS as the preprocessor of choice.

7. CSS at Trello

CSS at Trello

This blog post by Bobby Grace, designer at Trello, a web-based project management application, talks about the app’s CSS. The post outlines the stylesheet file structure, the tools they use (like CSS Shrink to reduce their stylesheets’ file sizes) their CSS-coding style, and more.

Related Content

About the Author

Jacob Gube is the founder of Six Revisions. He’s a front-end web developer. If you’d like to connect with him, head over to the contact page and follow him on Twitter: @sixrevisions.

This was published on Sep 22, 2014


Per Hootsuite:
237 LESS files (63,500 lines of code)
These compile into 144 CSS Files (60,000 lines of code)

This is insane and insanely stupid to have this many CSS files. All you have to do is organize things properly. What this tells me as a coder is that Hootsuite has 0 good coders working for the company. If you need to use 237 files of CSS (and LESS CSS at that) then something is horribly wrong with the way you work and you need to re-examine your processes.
All you need to work efficiently is no more than 5 CSS files, set up a naming convention for all your selectors and then use a good coding app like Espresso, which is able to highlight selectors within the page and automatically to the proper line of code to edit.

Fabien Sep 23 2014

I too think that 237 LESS files compiling 144 CSS files is way too much, but I guess it’s all about reusability of the single components. There must be a better way of breaking these down…

This comment section is closed. Please contact us if you have important new information about this post.