Code More Sustainable CSS with Methodologies!
I hope that I managed to publish a new article before you miss me too much 😂.
Today I’d like to mention CSS methodologies that might help you write more sustainable and clean CSS codes.
WHAT IS CSS METHODOLOGY?
CSS methodology is a technology used to write modular, understandable, and scalable code.
As a matter of fact, CSS is an easy and understandable language to write. If CSS is such easy and understandable, then, why do we need the help of methodologies and preprocessors?
I can point out some aspects to answer this question.
First of all, files tend to grow fast and get complicated as easy and quick as they are written since each style code is defined in their line in CSS. Therefore, it is inevitable that the understandability and modularity of the code are lost over time.
The second point is the importance of prioritization in CSS. For example, any change that has the potential to change other parts in UI while styling by using global naming and the important!, inline-css or style codes, written without paying attention to the order of the lines, which do not result as purposed cause the code to lose its quality and function.
CSS files that lose their sustainability, readability, modularity, and therefore quality due to these reasons can cause trouble for us in time. Thus, we need helpers like preprocessors and methodologies.
CSS PREPROCESSORS
CSS Pre-Processors is a program that lets you generate CSS from the preprocessor’s own unique syntax. They are extended CSS languages like SASS, LESS, and STYLUS.
It is possible to write CSS in an ordered way with these languages. Yet, if we do not pay attention to the naming when writing codes and do not write it in a way that we can meet the growing, developing, and increasing requests, we might lose the scalability and understandability of our code. 😢
The terms of sustainability, understandability, and modularity are crucial in terms of time, caseload, and our happiness, especially in large-scale projects. As a result, unfortunately, preprocessors are not enough for cleaner and sustainable CSS.
Then, what is the solution to all these problems? 🤔
SOLUTION: CSS METHODOLOGIES
Today I will mention the most popular 4 methodologies according to 2020 data from the State of Css website in the order of their frequency of use.
- BEM (Block Element Modifier)
- OOCSS (Object Oriented CSS)
- SMACSS (Scalable and Modular Architecture CSS)
- ATOMIC CSS
BEM (Block Element Modifier)
Bem is a methodology that is used to keep HTML, CSS, and classes more ordered and sustainable.
Bem is developed by Yandex in 2009. Itconsists of the initials of block, element, and modifier.
- Blocks: These represent the independent components on the page. Components such as header, sidebar, footer, or content can be defined as a block. According to Bem, a block name is always unique. When naming the class, only the block name is used.
For Example: .card / .article / .navbar etc. - Element: It is the structure that represents a certain element in the block elements (components). An image, textarea, input, or button can be counted as elements. The classes are named by adding two underscores next to the block elements.
For Example: .card__img / .article__text / .navbar__logo / .navbar__button etc. - Modifier: It represents the style of the block elements. It is named by adding two dashes next to the block and class names.
For Example: .card__title — blue / .article — vertical / .navbar__logo — large / .navbar__button — large etc.
We can see the class naming of the card elements in the HTML code in the second image above. The necessary main style codes are in the card class and the green background that provides new, distinctive, and specific qualities, is given with card- -green class.
At the same time, we can see that text space and image elements in the card are also made as card__img by adding ‘_ _’ two underscores next to the block element card.
OOCSS (Object Oriented CSS)
It was developed by Nicole Sullivan in 2008.
The main idea of this methodology is to create reusable HTML structures and patterns. In this way, it can make the writing easier and more productive when new additions are made to your page in time. OOCSS has two main principles. They are:
1- Separation the structure from the skin
2- Separating the container from the content
1- Separation the structure from the skin
So what is structure? What is skin? How do we separate them?
The structure has the main components that make up the frame of the website and provide it to be as it seems. We can think of them as Lego blocks that we will decorate later. While the structure is coded, qualities such as color, border-radius, and shadows are not taken into account.
- Height, width, margin, padding, overflow
Skin is the decoration of our website. Skin is grouped as colors, fonts, shadows, etc.
- color, fonts, radius, shadow
We have two button elements, as we see in the examples above. The style code is repeated in both of the images and class naming is also incorrect. In the second image, the style code is gathered the two features that are mutual for two buttons on a single class, as can be seen, and the features that separate them are made on a different class and named in a highly understandable way. In this way, a reusable button element is made.
2- Separation the container from the content
The main purpose of this principle is to reduce child-selector use.
We see two different writing styles for the h2 element in the example. In this writing style, OOCSS does not suggest the style on the left because we cause more specificity than is necessary for this way, and it results in the element losing its reusability. This contradicts the main purpose of OOCSS.
SMACSS (Scalable and Modular Architecture CSS)
This methodology has a file structure of its own. It is recommended that CSS codes are written on 5 different files. The main purpose of this methodology is to reduce code repetition and ensure CSS code with easier maintenance. We can see the content of 5 different files below.
With the CSS files that are separated and customized in this way, we can respond quickly to the requests and have a code with easier readability.
ATOMIC CSS
The web developer John Polacek defined this methodology in his article as:
Atomic CSS is the approach to the CSS architecture that supports small classes with single-purpose and based on visual function.
The advantage of this methodology is to have almost the same writing rules as classical CSS. Therefore, it’s a methodology that is preferred more due to being less complex. İt can be used in two ways:
1-Static
It is used to define a unit-based design system and form a class library with arranged variations.
The very popular Tailwind Library is written with Atomic CSS. You can also write a custom library in this way thanks to this methodology.
In the example above, we create our file just by adding quality in the classes we defined in the CSS files on the right. With such use, Atomic CSS offers us writing in a readable style.
2-Programmatic
With this approach of Atomic CSS, it is possible to write a more functional CSS by using the build tools such as Gulp, Grunt, Webpack, etc.
As we can see below, we write functional classes on the HTML file and code styles in them as a variable. Our CSS file is formed automatically, thanks to the build tools.
As you can see in my article and if we are to talk on behalf of other methodologies, we see how the methodologies bring order to our files and make them modular, understandable, and clear.
No matter how easy CSS seems, keeping our CSS code under control and clean always helps us and saves time both in large-scale and small-scale individual projects. Because when we don’t pay attention enough, even a simple style code acquires a lot of effort. Therefore, both preprocessors and methodologies are crucial.
I had fun and learned a lot while writing. I hope this article will be helpful for you, as well. You can reach the link of my presentation here that I made at the TeknasyonTech’22 conference and clarified the examples better.
