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!
- 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.
- 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.
- 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.
- 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.
And that’s it. It’s ideal for when starting a new solo web development project! Or even if you have a client you want to send it to (here it is in image format if required). No need to muck around with a generator or download a complicated example. Just quickly edit this simple template to your own needs and get coding quickly.
If you’re still learning (aren’t we all!) about CSS and want more info on keeping your CSS organized then here’s an MDN doc I keep bookmarked that can really help. It will givew you more examples so give it a try. And if you want to really dive deep into the topic I recommend this awesome advice by Harry Roberts.