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 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’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’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
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 has CSS coding conventions documented at the site’s online style guide (called Rizzo).
6. 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, 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.
If you’re interested in developing a CSS style guide, the following resources will point you in the right direction.
- Style Guide Boilerplate
- CSS Coding Conventions
- CSS Guidelines
- Structural Naming Convention in CSS
- Principles of Writing Consistent, Idiomatic CSS
- Scalable and Modular Architecture for CSS
- 5 Standardized Methods for Writing CSS
- A Close Look at CSS Box Shadow
- CSS Link Pseudo-classes
- Introduction to CSS Colors
- A Look at Some CSS Methodologies
- 13 Best Responsive CSS Grid Systems for Your Web Designs
- Popular Logos Recreated Using Only CSS
- 30 Exceptional CSS Techniques and Examples
Resources by Industry
- Web Design for Excavation Companies: Top 5 Tips (With Examples!)
- 5 Web Design Tips for Fence Installers
- 5 Simple and Successful Web Design Tips for Auto Parts Retailers
- Tips for Medical Website Designs
- Medical Website Design from an Award Winning Agency
- Top 10 Effective Web Design Tips for Auto Service Centers
- Web Design for Renewable Energy: Tips for a Site That Shines
- Insurance Website Design Services
- 5 Web Design Tips for Fertility Clinics
How is your website’s SEO?
Use our free tool to get your score calculated in under 60 seconds.
Get posts by email
Join 200,000 marketing managers and subscribe to Revenue Weekly!
"*" indicates required fields
Join our mission to provide industry-leading digital marketing services to businesses around the globe - all while building your personal knowledge and growing as an individual.