CSS Architecture (BEM - OOCSS - Functional CSS - CSS in Js) - EN
Published: 2023-05-04 01:00:29

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_
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cm1064p1rbgg3ob6rqam.png)

---
##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:

- styled-components
- Emotion
- JSS
- Glamorous
- Radium

---
##How to improve the performance of your CSS code:

- Avoid overriding repeated styles
- Avoid using !important as it causes multiple re-renders in the "Painting" phase
- Reduce the size of the CSS file
- Use specific selectors
- Use separate files
- Minimize the number of reflows and repaints
- Use caching techniques
- Always use image optimization techniques

I hope this has been helpful.

Author: Gustavo Scarpim
Linkedin: [https://www.linkedin.com/in/gustavoscarpim/](https://www.linkedin.com/in/gustavoscarpim/)
GitHub: [https://github.com/guscarpim](https://github.com/guscarpim)
Portfolio: [https://gustavoscarpim.com/](https://gustavoscarpim.com/)