How do you write and organize your CSS? Do you prefer to use a structured method or not? With CSS, you can choose to use an existing method or develop your own. Some CMSes like WordPress have their own styles. When you use them, you need to follow their rules and guidelines.

Your styles can get big, messy and convoluted over time. It can be hard to maintain. You don’t know what you can delete or change because you aren’t sure what problems it will cause. Without a method for organizing, it may get harder and harder to keep things straight. You can choose to use BEM, OOCSS, SMACSS, Atomic CSS or build your own.

BEM

BEM is a way of writing CSS created by Yandex. It is a very structured style of writing CSS. BEM has a component-based approach. This approach divides the user interface into separate components. BEM uses the structure of Block, Element and Modifier. It makes development easy and fast to update.

OOCSS

OOCSS (object-oriented CSS) applies principles of object-oriented languages to help you write CSS. It encourages code reuse and makes it easier to maintain. OOCSS uses the object-oriented principle of abstraction to make the code reusable. It helps you to separate visual elements like color, fonts and borders from the content. This separation makes your code easier to update. Especially when you need to change colors, fonts or other branding-related items.

SMACSS

SMACSS is more of a style guide than a CSS architecture. Scalable and Modular Architecture for CSS provides guidelines for writing CSS. This style guide helps you build CSS that is flexible and maintainable. With SMACSS, you create your own rules for writing CSS.

Atomic CSS

Atomic CSS focuses on small, single-purposed classes. You build well-structured HTML templates, so that your changes doesn’t break your design.

Your Own Style

When you build a website on your own or part of a small team, you can choose how you write your CSS. You may combine methods to help solve certain design problems.

How do you choose a method?

It depends. When you are working on your own project, you can choose which one you want to use. When you are working on a project that uses a CSS framework, it may be easier to use the method that the framework uses.

The best way to learn which one you like is to read the documentation and build a project with it. Then, you’ll know when to use these methods.