CSS Architecture (BEM - OOCSS - Functional CSS - CSS in Js) - EN

When talking about software architecture, we usually focus on the architecture of the frontend or backend, but there is an equally important architecture that developers often overlook: CSS architecture

Although many people believe that CSS is just a set of visual styling rules, the truth is that it also needs to be organized and structured in a clear and coherent way to ensure long-term code maintenance and evolution.

CSS architecture involves defining standards and guidelines for organizing, naming, and structuring style rules in order to create cohesive and sustainable code. The most commonly used techniques include the use of methodologies such as BEM, OOCSS, Functional CSS, and CSS-in-JS, which propose ways to divide the code into reusable and independent modules, as well as the use of preprocessors such as Sass and Less, which allow for more modular and dynamic CSS writing.

A good CSS architecture can bring many benefits to a project, such as reducing code duplication, making maintenance easier, increasing team productivity, and significantly improving application performance. Therefore, it is important to value CSS architecture and invest in good practices for organizing and structuring code.

Here is an image summarizing some of the characteristics of each architecture:

Font: PUC

BEM Style Guide

*BEM *(Block-Element-Modifier) is a Style Guide where we do not need an external library and it has compatibility with any kind of frameworks. It is used to standardize class names:

Block: Header, Container, Menu, Checkbox, Input...
Element: Menu item, list item, header title...
Modifier: Disabled, Active, Fixed...
Example:

<style>
.main-nav {...}
.main-nav__item {...}
.main-nav__item--is-active {...}
</style>

<nav class="main-nav" >
  <li class="main-nav__item">Item menu</li>
  <li class="main-nav__item--is-active">Item menu Active</li>
</nav>

Pros:

Clear and intuitive organization
Reusability
Standardized and consistent naming
Scalability

Cons:

Very verbose
Overuse of BEM can lead to code redundancy
The need to define many classes can lead to increased CSS file size

OOCSS Style Guide

*OOCSS *(Object Oriented CSS) is a CSS development methodology that focuses on creating reusable and context-independent classes. The idea is to separate the style properties into classes that can be applied to any HTML element, regardless of the context in which they appear.

The goal of **OOCSS **is to create scalable, sustainable, and easy-to-maintain CSS code. It aims to reduce code duplication, improve code readability, and allow for more efficient creation of new styles.

Example:

<style>
.button {
  font-size: 14px;
  font-weight: 600;
}

.button--primary {
  background-color: #007bff;
  color: #fff;
}

.button--secondary {
  background-color: #fff;
  border: 1px solid #007bff;
  color: #007bff;
}

.button--alert {
  background-color: #dc3545;
  color: #fff;
}
</style>

<button class="button button--primary">primary</button>
<button class="button button--secondary">secondary</button>
<button class="button button--alert">alert</button>

OOCSS is a CSS writing methodology, not a library or framework. However, some CSS libraries adopt the principles of OOCSS:

Bootstrap
Foundation
Semantic UI
Materialize CSS
Bulma

Pros:

Code reusability
Flexibility
Scalability
Maintainability

Cons:

Learning curve
Complexity
Inconsistency
File size

CSS Functional Style Guide

This Style Guide uses micro classes to compose other components, where each micro class modifies a single CSS property.

Example:

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1em;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -0.5em;
}

.col {
  flex: 1;
  margin: 0 0.5em;
}

Algumas bibliotecas que utilizam o CSS Funcional:

Tachyons
Tailwind CSS
Basscss
Functional CSS
Primer CSS

Pros:

Reduced CSS file size
Style reusability
Flexibility
Clarity

Cons:

High learning curve
Difficulty in control
Limitations
Need for planning

Style-in-JS Style Guide

This Style Guide is the styling technique using Javascript. Instead of separating CSS into an external file or embedding it in a separate HTML document, the style is created and applied directly to the component using a JavaScript styling library or framework.

Example using Styled Components:

import styled from 'styled-components';

const Button = styled.button`
  background-color: #007bff;
  &:hover {
    background-color: #0069d9;
  }
`

function App() {
  return (
    <div>
      <Button>Click me!</Button>
    </div>
  )
}

Some libraries that use CSS-IN-JS: