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 …


This content originally appeared on DEV Community and was authored by Gustavo Scarpim

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

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/
GitHub: https://github.com/guscarpim
Portfolio: https://gustavoscarpim.com/


This content originally appeared on DEV Community and was authored by Gustavo Scarpim


Print Share Comment Cite Upload Translate Updates
APA

Gustavo Scarpim | Sciencx (2023-05-04T01:00:29+00:00) CSS Architecture (BEM – OOCSS – Functional CSS – CSS in Js) – EN. Retrieved from https://www.scien.cx/2023/05/04/css-architecture-bem-oocss-functional-css-css-in-js-en/

MLA
" » CSS Architecture (BEM – OOCSS – Functional CSS – CSS in Js) – EN." Gustavo Scarpim | Sciencx - Thursday May 4, 2023, https://www.scien.cx/2023/05/04/css-architecture-bem-oocss-functional-css-css-in-js-en/
HARVARD
Gustavo Scarpim | Sciencx Thursday May 4, 2023 » CSS Architecture (BEM – OOCSS – Functional CSS – CSS in Js) – EN., viewed ,<https://www.scien.cx/2023/05/04/css-architecture-bem-oocss-functional-css-css-in-js-en/>
VANCOUVER
Gustavo Scarpim | Sciencx - » CSS Architecture (BEM – OOCSS – Functional CSS – CSS in Js) – EN. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/05/04/css-architecture-bem-oocss-functional-css-css-in-js-en/
CHICAGO
" » CSS Architecture (BEM – OOCSS – Functional CSS – CSS in Js) – EN." Gustavo Scarpim | Sciencx - Accessed . https://www.scien.cx/2023/05/04/css-architecture-bem-oocss-functional-css-css-in-js-en/
IEEE
" » CSS Architecture (BEM – OOCSS – Functional CSS – CSS in Js) – EN." Gustavo Scarpim | Sciencx [Online]. Available: https://www.scien.cx/2023/05/04/css-architecture-bem-oocss-functional-css-css-in-js-en/. [Accessed: ]
rf:citation
» CSS Architecture (BEM – OOCSS – Functional CSS – CSS in Js) – EN | Gustavo Scarpim | Sciencx | https://www.scien.cx/2023/05/04/css-architecture-bem-oocss-functional-css-css-in-js-en/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.