For most of my years as a frontend developer, I've had to write my CSS from scratch using SCSS.

If you write CSS from scratch, you should know one thing, it's really easy for things to get messy. Luckily there's the 7-1 architecture and BEM naming convention, to help you get things a bit organized.

But there's still another problem, which is maintaining the codebase, even when you use the 7-1 architecture, it still doesn't fully solve this problem.

Say you have to pass on the codebase to a new developer, One problem they'll definitely face is finding out where specific class names are defined in your codebase, it's usually hard to figure out if a class name is a component or a utility class.

Thinking about how to fix this, I thought of a method to help name classes better. Nothing really badass, but helpful nonetheless.

The method just involves using prefixes, while still retaining our BEM class naming styles.

1. Prefix all component classes with c-
2. Prefix all page classes with p-
3. Prefix all base/general classes with g-
4. Prefix all layout classes with l-
5. Prefix all theme classes with t-
6. Prefix all animation classes with a-
7. Prefix all utility classes with u-

Like i mentioned this is nothing really badass, I just thought to put this out there for people who might find it helpful.

I hope this article helps you.

Let's connect on Twitter