Skip to main content ↓
Screenshot of GitHub's CSS Styleguide webpage, displaying coding style guidelines for spacing and formatting with a navigation sidebar on the left.

A List of CSS Style Guides for Inspiration

Creating a set of CSS conventions — often called a CSS style guide — can streamline your web development workflow. It’s useful for large teams and solo developers alike. CSS style guides are a group of documents that outline the coding style, best practices, and visual design properties (e.g.

colors, layout grid dimensions, etc.) of a site. The goal of having a style guide is to maintain consistency across a product. If you’re in the process of creating a CSS style guide, or if you want to learn about the CSS practices that large-scale websites use, check out the following list of style guides.

1. GitHub’s CSS Styleguide

GitHub's CSS Styleguide GitHub’s CSS style guide covers everything from code-indentation style and when to use line breaks all the way to the company’s brand colors.

2. WordPress CSS Coding Standards

WordPress CSS Coding Standards WordPress’s CSS coding standards outlines things such as how to organize CSS properties, how to group media queries, its CSS best practices, and more.

3. Google HTML/CSS Style Guide

Google HTML/CSS Style Guide Google’s HTML and CSS style guide is comprehensive but written in a succinct manner, which makes it easy to use as a reference.

4. Bootstrap CSS Code Guide

Bootstrap CSS Code Guide The CSS style guide of Bootstrap follows Code Guide by @mdo, which is a set of HTML and CSS guidelines developed by Mark Otto, Bootstrap’s co-creator.

5. Lonely Planet CSS

Lonely Planet CSS Lonely Planet has CSS coding conventions documented at the site’s online style guide (called Rizzo).

6. ThinkUp’s CSS Code Style Guide

ThinkUp's CSS Code Style Guide ThinkUp, a social media analytics app, has a CSS coding style guide which they have published on GitHub. The guide outlines the company’s basic CSS conventions, such as indentation style, class- and id-naming style, and more.

7. Mapbox’s CSS and Styling

Mapbox's CSS and Styling Mapbox, a web-based tool for creating interactive maps, has a public style guide that documents the app’s CSS. The style guide documents coding style, how the grid system works, the website’s color property values, and so forth.

Further Reading

If you’re interested in developing a CSS style guide, the following resources will point you in the right direction.

Related Content

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 Calculator
Project Quote Calculator