- Home
- Blog
- Web Design CSS Development at Large-Scale Websites
CSS Development at Large-Scale Websites
- 3 min. read
-
William CraigCEO & Co-Founder
- President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX.
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
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
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
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
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
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
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
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
-
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX.
-
WebFX is a full-service marketing agency with 1,100+ client reviews and a 4.9-star rating on Clutch! Find out how our expert team and revenue-accelerating tech can drive results for you! Learn more
Make estimating web design costs easy
Website design costs can be tricky to nail down. Get an instant estimate for a custom web design with our free website design cost calculator!
Try Our Free Web Design Cost CalculatorWeb Design Calculator
Use our free tool to get a free, instant quote in under 60 seconds.
View Web Design CalculatorMake estimating web design costs easy
Website design costs can be tricky to nail down. Get an instant estimate for a custom web design with our free website design cost calculator!
Try Our Free Web Design Cost Calculator