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
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
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/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.