“Writing CSS is easy but when it comes to maintenance its a mess”

Have you ever faced a situation where your stylesheets are out of control, and you're just adding classes to get the desired result? If so, you're in the right place. In this article, we will explore styling methods that will help you write cleaner and clearer CSS. We will also look into how to structure your CSS effectively.

What is CSS structuring?

CSS is simple when we begin styling our HTML, but as the project grows, many problems arise, like overwritten styles and specificity conflicts. However, well-structured CSS can help you avoid these issues.

CSS structure refers to the intentional way you organize your styles—not just the syntax you write, but how you name, group, and manage your CSS code across a project.

Think of it as the difference between just decorating a house and designing the entire architecture. Let's stop discussing what a good CSS structure ensures and dive into how to achieve it.

Why it matters?

Already tired of discussing why structuring matters? Well, I am too, but let's keep going because if you've written enough CSS, you know the headache of managing it! Plus, a well-structured CSS also boosts the performance of your pages. How exciting is that? Let's dive in and make our CSS shine!

📘CSS Methodologies

CSS methodologies are like the pillars of a building—they provide the essential support for naming and styling classes. If these pillars are well-structured, the entire building (or project) will be stable and organized. Imagine a building where the pillars are poorly arranged; it would create a chaotic and unstable structure. Similarly, a well-organized CSS methodology ensures a clean, consistent and maintainable code-base.

A CSS methodology is a structured approach to writing and organizing CSS to ensure maintainability and scalability, using conventions to avoid issues like specificity conflicts.

Following are some widely adopted CSS methodologies you should be learn about.

BEM (Block, Element, Modifier)

It breaks down interfaces into blocks, elements, and modifiers, making your CSS more modular and easier to maintain. You might be getting some idea of the terminologies but let me make them simpler for you to grasp.

A Block is an independent, reusable component that represents a meaningful part of the UI — like a button, card, navbar, or form.
An Element is a child part of a block that depends on the block and has no standalone meaning outside it.
A Modifier is a flag or variation that changes the appearance, behavior, or state of a block or element.

Here is the example of BEM classes for a button.

<button class="btn btn--primary"> 
  <span class="btn__icon"></span>
  <span class="btn__label">Submit</span>
</button>

In above example the .btn is block while .btn__icon and .btn__label are the elements. And yes are correct --primary is the modifier for the button block.

Advantages

BEM makes styling consistent.
It ensures specificity in styling.
It is scalable for larger projects.
Styles sometimes become too specific, which can break the DRY (Don't Repeat Yourself) principle.

Flaws

A common problem with this methodology is over-nesting.
Another issue is over-modifying using too many modifiers.
Styles some time become much specific which breaks the DRY structure

OOCSS (Object-Oriented CSS)

It makes you think of the styles as the objects, promotes the code reuse and reduces the redundancy. It main motive is to separate the skin from the structure and content from container.

Following are two principles of OOCSS:

Separate structure from skin → keep the layout and style in different classes
Separate content from container → objects should not depend on how and where they are used.

Think of an example of a card the structure includes the padding, spacing, alignments and layouts. While skin includes the colors, backgrounds and shadows.

<div class="media card skin-blue">
  <img class="media__img" src="..." />
  <div class="media__body">
    <h2 class="media__title">Title</h2>
    <p class="media__text">Description</p>
  </div>
</div>

/* Object (structure) */
.media {
  display: flex;
  align-items: flex-start;
  padding: 1rem;
  border-radius: 6px;
}

.media__img {
  margin-right: 1rem;
}

.media__body {
  flex: 1;
}

/* Skin (visual appearance) */
.skin-blue {
  background: #e6f0ff;
  color: #003366;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

Advantages of OOCSS

This approach is really handy for creating themes.
It promotes writing DRY and clean code.
It boosts reusability.

Disadvantages of OOCSS

Some developers like myself find it a bit less accessible than BEM because of its strict naming.
It can lead to many utility-like classes, similar to Tailwind's structure.

SMACSS ( Scalable and Modular Architecture of CSS)

SMACSS is like the chill guy among CSS methodologies — it doesn’t enforce a fixed naming syntax, it just asks you to organize your styles like a sane human being. Instead of styling everything globally and ad hoc, it simply divides the styles in 5 categories:

Base: Default styles for the elements like the body, h1, a etc
Layout: Styles for major page section like main,header, footer etc
Module: Reusable UI components like nav, .card etc
State: Temporary variation like .on-open
Theme: Skins and Theme like dark-theme, accent-theme

<body class="theme-dark">
  <header class="layout-header">
    <nav class="nav module">
      <button class="btn is-active">Home</button>
    </nav>
  </header>
</body>

styles/
├── base/
│   └── _typography.scss
├── layout/
│   └── _grid.scss
├── modules/
│   └── _button.scss
├── state/
│   └── _visibility.scss
├── theme/
│   └── _dark.scss
└── main.scss

The above example would have clearified you the architecture in this methodology. Lets see the pros and cons of this methodology.

Advantages of SMACSS

SMACSS encourages the separation of concerns, making it suitable for larger projects and teamwork.
No naming convention makes it flexible.

Disadvantages of SMACSS

For creating consistency in naming, it should be combined with BEM or OOCSS.
There could be category confusion, like whether card is a module or layout.

Atomic CSS (Utility-Like Flow)

In this type methodology instead apply the styles to the classes we use the classes to style the elements. Yes you’r assumption is correct if you are thinking of something like tailwind css where styles are applied directly in the HTML using the small reusable classes like .p-4 , .d-flex, .bg-white.

.p-4{
    padding: 4rem;
}
.d-flex{
    display: flex;
}
.bg-white{
    background-color: white;
}

Advantages of Atomic CSS

It allows for rapid development with small, reusable classes.
Encourages consistency by using predefined utility classes.
Reduces the need for writing custom CSS, which can speed up styling.

Disadvantages of Atomic CSS

Can result in messy, class-heavy HTML, making it harder to read.
May lead to a lack of semantic meaning in class names.
Requires learning a new set of utility classes, which can have a learning curve.

Choosing A Methodology

After learning about these methodologies, you might be wondering which one to use. Well, the answer is none—hold on, don't call me a heretic just yet! Let me remind you of a few points:

BEM provides a naming convention but can lead to over-nesting and too many modifications.
OOCSS offers separation but can cause confusion and overly complex style sheets.
SMACSS is modular but lacks strict rules.
Atomic CSS is simple but results in messy, class-heavy HTML.

The best approach is to mix and match these methodologies based on your needs and create a custom approach that fits your project. Just remember to stay consistent, and you'll have a well-structured CSS. For larger projects, you can combine BEM or SMACSS with Atomic CSS, using utility classes for general styles and BEM classes for specific styling. I think you get the idea now, and we might even share the same opinion, don't you think?

CSS Methodologies

Table of contents