🧹

Template: CSS Style Guide

Keep your CSS manageable and scalable even when coding an MVP.

When creating an MVP (for a website or app) it’s healthy to still keep the CSS files in a manageable state. Some of the CSS coding may be spaghetti but a CSS style guide can help contain the messiness.

It can also make it easier should you need to get someone else involved in your solo dev project.

What Do We Want From This Style Guide?

Speed! I wanted to create a template CSS style guide to use for each new web development project I started. So that’s the idea, this example can just be copied and pasted! The key thing being that the guide is short so it’s quick to read but still act as an easy reminder of important things. To achieve this it’s kept intentionally simple.

How To Use It

I personally like to store it in a separate file and link to it as a comment at the top of my stylesheet. The comment can then be removed before the website is pushed live. But you can use it however suits you best.

This template is designed for smaller solo projects but if the minimum viable product launch goes well and the development snowballs then this CSS style guide can still be improved before the stylesheet(s) get tidied up and have more coding added.

So here it is. Copy it, paste it, edit it (you’ll need to because I only use vanilla CSS and have some bad habits you’ll want to change!), and you have your own template for each new project.

Style Guide For CSS

Follow these guidelines to keep clean, maintainable CSS code that is easy to read, understand, and scale. Don’t let the spaghetti get too out of hand. Time is important in this MVP though!

General Guidelines

Use vanilla CSS only. No frameworks, libraries or preprocessors.
Avoid the use of resets.
Use rems units, don’t use em units.
Use the spacing system set at the top of the stylesheet.
Use the custom properties set at the top of the stylesheet.
Try to avoid IDs unless they’re used in a JavaScript file, otherwise only use classes.
Use concise comments to explain your code when necessary but avoid over-commenting.
Use longhand properties so I don’t get confused!
Avoid using !important unless it’s a last resort.

Formatting

Use tabs for consistent indentation.
Use a space after each property’s colon (e.g., font-size: 1rem).
Use a semicolon at the end of each declaration.
Use one declaration per line.
Use single quotes for attribute values.

Naming Conventions

Use lowercase and hyphens to separate words in class names.
Use descriptive class names that reflect the content or function of the element they are attached to.
Use short, one-word class names when appropriate (e.g., .btn or buttons).

End of style guide.