Many developers are often required to implement new functionality on the website. It is obvious that it is not possible to avoid CSS editing in this case.

So how does it all happen? The developer finds a CSS file titled as “style.css”, “main.css” or “layout.css”. Then he scrolls it down and add his own styles.

There is another example. Let’s imagine that it is necessary to modify a block which contains styles from different classes. Not giving it another thought the developer creates his own class with required styles and overlaps the previous code by adding “!important”.

In the course of time the project is assigned to other developer and new functionality is added. So the same scenario happens again. Eventually, CSS becomes a real mess difficult to cope with.

This situation is not new. 

What’s the best way to structure styles in a project?

I often use Sass* preprocessor and add a minified file to the project after compilation and compression.  Therefore, I would like to talk about Sass files structure in this article. 

Each project has its own logic. So I will try to review style organization taking one of my previous projects as an example. 

Conclusion

Create new pages from the components that have already been made. It’s better not to make growing snowballs from style files. 

*Sass is a scripting language compiled into CSS (Cascading Style Sheets).

Compass is often used for compilation. It is written in Ruby and installed from a gem.