Source: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing
As you start to work on larger stylesheets and big projects you will discover that maintaining a huge CSS file can be challenging. In this article we will take a brief look at some best practices for writing your CSS to make it easily maintainable, and some of the solutions you will find in use by others to help improve maintainability.
Here are some general suggestions for ways to keep your stylesheets organized and tidy.
If you are working with a team on an existing project, the first thing to check is whether the project has an existing style guide for CSS. The team style guide should always win over your own personal preferences. There often isn't a right or wrong way to do things, but consistency is important.
For example, have a look at the CSS guidelines for MDN code examples.
If you get to set the rules for the project or are working alone, then the most important thing to do is to keep things consistent. Consistency can be applied in all sorts of ways, such as using the same naming conventions for classes, choosing one method of describing color, or maintaining consistent formatting (for example will you use tabs or spaces to indent your code? If spaces, how many spaces?)
Having a set of rules you always follow reduces the amount of mental overhead needed when writing CSS, as some of the decisions are already made.
There are a couple of ways you will see CSS formatted. Some developers put all of the rules onto a single line, like so:
.box { background-color: #567895; }
h2 { background-color: black; color: white; }
Other developers prefer to break everything onto a new line:
.box {
background-color: #567895;
}
h2 {
background-color: black;
color: white;
}
CSS doesn't mind which one you use. We personally find it is more readable to have each property and value pair on a new line.