My name is Ramazan, and I'm a front-end developer and enthusiast who loves looking at familiar things in web development from new perspectives.

You might have heard of functional programming (FP). It's a paradigm characterised by the use of pure functions and the preservation of data immutability. There are even languages in which FP principles prevail, like Haskell, OCaml, and Elixir. Other languages like JavaScript, Python, and C++ also support this approach, although they're not limited to it.

But an attentive reader will look at the title and ask: "Functional programming is fine. But what does Atomic CSS have to do with it?" I'll answer that now!

The thing is, back when the atomic approach first appeared, it had another name: Functional CSS. Some people still use it quite often today to avoid confusion with other terms with the same name. But why is this approach to writing CSS called functional?

That's the question I'll try to answer in this article. First, I'll describe the basic principles of FP. Then, I'll talk about the basics of Atomic CSS (which I'll refer to here as ACSS), drawing analogies with functional programming. I'll also try to use simple examples to show what problems you can solve by applying Atomic CSS to styling.

When preparing the materials for this article, I relied a lot on this tutorial on FP and this one on Functional CSS.

Well, let's get started!

Prerequisites

To follow along with this article, all you need is a basic understanding of HTML, CSS, and JavaScript. There are also some examples where we'll use the Atomic CSS framework mlut, but you don't have to know its syntax because I've provided the text with the equivalent CSS styles.

What We'll Cover:

1. The Basic Principles of Functional Programming

   • Pure Functions

   • Immutability

   • Function Composition

2. How the Principles of FP Meet Their Incarnation in Atomic CSS

   • Purity

   • Immutability in ACSS

   • Composition

3. Conclusion

The Basic Principles of Functional Programming

Functional programming is a broad field that has been the subject of numerous complex articles and an entire scientific journal. So in my article, I'll focus on exploring only the basic principles of FP and drawing analogies with them in Atomic CSS.

This approach is based on the idea that all the actions we need to perform in a program should be done by calling certain functions and their compositions.

Let me outline the main concepts I'll use to explain the core idea of this approach:

1. Pure functions

2. Immutability

3. Function composition

Pure Functions

A function is called pure if it:

• returns the same value for the same input parameters;

• has no side effects (changes to external values or entities).

Here are a couple of examples to illustrate this:

let c = 10;
let s = 0;

// Pure function
function pureSum(a,b) {
  return a + b
}

// Impure function
function notPureSum (a) {
  s = a + c
  return s
}

The first function is pure because if we enter the same arguments, we'll get the same result. Also, this function doesn't change any global variables and doesn't mutate objects.

The second function doesn't meet the concept of purity on both points. It changes the external variable s and uses another external variable c for calculations, which can change.

Pure functions allow you to write more predictable code. An application can grow and a function with an implicit parameter that can change over time can lead to great difficulties in debugging and maintaining the codebase.

Immutability

Immutability is a principle which states that data objects shouldn't change after they're created. To make changes to data, you need to create a new instance of it and then work with that new copy.

At first glance, it may seem that this approach limits flexibility in the development process and reduces the speed of the program. But in reality, if the language or runtime has optimisations for immutable data, adhering to this principle helps you avoid many errors and use parallel calculations.

Here's a fairly simple example: let's take a React component that renders a task in a to-do list. The state of the task is described by an object. And in order for React to correctly redraw the state of the task component when the user changes something in it, it's necessary to pass as the new state not the mutated old object, but a new instance of the object with the current state. Here is the example where an immutable object is used for the state of the to-do:

import { useState } from "react";

function TodoItem() {
  const [todo, setTodo] = useState({
    text: "Write article",
    done: false
  });

  const toggleDone = () => {
    setTodo({
      ...todo,
      done: !todo.done
    });
  };

  return (
    <div>
      <span>
        {todo.text} — {todo.done ? "✅" : "❌"}
      </span>
      <button onClick={toggleDone}>
        Toggle
      </button>
    </div>
  );
}

export default TodoItem;

Here we'll see that clicking on the button will lead to changes in the state of the to-do and will cause re-rendering of the component. But we could define the function toggleDone() in a different way using mutations of the object:

const toggleDone = () => {
  todo.done = !todo.done;
  setTodo(todo);
};

With such an event handler, the effect will not work because the link to the object is still the same, even though the object itself was mutated.

Function Composition

Function composition involves using the result of one function as an argument for another function. Here's an example of a program that capitalises the first letter of each word:

function compose(f1, f2) {
  return function (str) {
    return f1(f2(str));
  }
}

function makeFirstCapital(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

function upperEveryFirst(str) {
  return str.split(' ').map(makeFirstCapital).join(' ');
}

function lower(str) {
  return str.toLowerCase();
}

const capitalize = compose(upperEveryFirst, lower);
const string = 'this sTring should be Capitalized'

console.log(capitalize(string)) // 'This String Should Be Capitalized'

Here, we have defined the function compose(f1, f2), which returns the composition of the functions passed to it in arguments. Next, we use this function to create the function capitalise(), which will capitalise only the first letters of words by composing the functions lower() and upperEveryFirst(). The first one is executed first and returns a string with all lowercase letters to the second function as an argument. The second function capitalises the first letter of each word.

In large projects and when complex calculations are required, such compositions can be larger, and the logic in them can be much richer. In such cases, this approach to calculations helps break down very large transformations into a series of relatively simple and compact functions that are applied one after the other. This makes it easier to develop, refactor, and debug code.

How the Principles of FP Meet Their Incarnation in Atomic CSS

Now that we know a little about functional programming, let's try to answer the question: ‘What does Atomic CSS have to do with it?’ Let's draw an analogy between these approaches at the level of the principles described above.

What is Atomic CSS?

But first, let's take a moment to explain what Atomic CSS is. It's a methodology of styling layouts in which we use small Atomic CSS rules, each of which performs a single action. These classes are called utilities. They usually apply one CSS property, but not necessarily just one.

For example, in the mlut framework, the Bgc-red utility corresponds to the background-colour: red property, and the -Sz50p utility corresponds to two properties at once: width: 50% and height: 50%.

Modern Atomic CSS frameworks, such as mlut and Tailwind, use a so-called JIT engine. This is a component that generates CSS based only on the utilities you used in your markup.

Purity

Purity in CSS is determined by which selectors, or more specifically, classes, are used to style elements. In clean CSS, the behaviour of an element should be determined solely by the classes that are attached to it in the class attribute. This means that, ideally, a stylesheet should not contain selectors such as section or div > ul.

Firstly, they set too general rules, which are likely to be broken or supplemented in one part of the project or another. So when we style specific elements, we'll have to constantly keep these styles in mind in order to understand how to achieve the necessary styling without spoiling anything.

Secondly, the purity of CSS for each specific element is violated. Let's say we have the following markup:

<button class="greeting">Hello!</button>
<div class="wrapper">
  <button class="greeting">Hello!</button>
</div>

With the CSS styles below:

.wrapper > .greeting {
  background-color: green;
}
.greeting {
  background-color: red;
}

As a result, we get that the first button is red, and the nested one is green. It seems pretty harmless in this simple case, but it will cause inconvenience when the project structure grows significantly.

Here we see that the result of the .greeting class's custom styles depends on where the corresponding element is located. This is similar to a function that produces different results for the same input data depending on where it's called.

Atomic CSS allows you to avoid this effect. In this approach, in most cases, styles are applied only to those elements for which the corresponding classes are specified. If you need to make several identical elements, the same utility is specified in the class attribute of each such element.

A similar example can be rewritten in mlut like this:

<button class="Bgc-red">Hello!</button>
<div>
  <button class="Bgc-green">Hello!</button>
</div>

And JIT-engine will generate the following styles:

.Bgc-red {
  background-color: red;
}

.Bgc-green {
  background-color: green;
}

Here we can see that the styles of elements in this approach will depend only on the classes assigned to them.

It's worth noting here that the mlut syntax allows you to do things that deviate from the strict concept of CSS purity. Sometimes this is necessary to create relatively more complex effects.

Let's say we want to implement a card that changes the background colour of the button inside it when hovered. Then we would need to write the following in mlut:

<div class="-Ctx">
  <button class="^:h_Bgc-red">Greeting</button>
</div>

CSS:

.-Ctx:hover .\^\:h_Bgc-red {
  background-color: red;
}

Immutability in ACSS

By CSS immutability, I mean that element styles are not rewritten. Immutability in ACSS means that utilities do not typically mutate each other.

For example, in BEM (Block Element Modifier), the main styles are set by a block or element, and a modifier mutates these styles. In other approaches that use combined selectors, such mutations occur more often and less explicitly.

Let me give you a simple example. Suppose we have a product card that can be in its default state or in a highlighted state. In BEM it would look like this:

<div class="product-card">Card 1</div>
<div class="product-card product-card--selected">Card 2</div>
<div class="product-card">Card 3</div>

.product-card {
  background-color: red;
  padding: 5px;
}

.product-card--selected {
  background-color: green;
}

In this example, we see that the product-card class sets the default background colour of the card to red. And in order to somehow mark the selected card with a different background colour we have to add a modifier class that changes the colour from red to green. It does this by rewriting the background-color property, that is by mutating the block styles.

In the Atomic CSS approach, this problem is solved because utilities allow you to set CSS properties independently of each other and apply modifications without resorting to mutation.

Here's what this example would look like if you used mlut:

<div class="P5 Bgc-red">Card 1</div>
<div class="P5 Bgc-green">Card 2</div>
<div class="P5 Bgc-red">Card 3</div>

.P5 {
  padding: 5px;
}

.Bgc-red {
  background-color: red;
}

.Bgc-green {
  background-color: green;
}

Composition

Functional programming makes extensive use of function composition. In Atomic CSS, function composition is analogous to utility composition when styling elements. Just as in FP we obtain complex behaviour through the sequential application of a set of simple functions, so in ACSS we can obtain non-trivial styling through a set of simple utilities.

As an example, I'll show a simple smiley face made using only Atomic CSS:

<div class="-Sz150 Bgc-yellow Bdrd100p M-a Ps">
  <div class="-Sz20p Bgc-gray Bdrd100p Ps-a T30p L20p"></div>
  <div class="-Sz20p Bgc-gray Bdrd100p Ps-a T30p R20p"></div>
  <div class="W50p H40p Bdb5;s;gray Bdrd100p Ps-a T40p L25p"></div>
</div>

.-Sz150 {
  width: 150px;
  height: 150px;
}

.Bgc-yellow {
  background-color: yellow;
}

.Bdrd100p {
  border-radius: 100%;
}

.M-a {
  margin: auto;
}

.Ps {
  position: relative;
}

.-Sz20p {
  width: 20%;
  height: 20%;
}

.Bgc-gray {
  background-color: gray;
}

.Ps-a {
  position: absolute;
}

.T30p {
  top: 30%;
}

.L20p {
  left: 20%;
}

.R20p {
  right: 20%;
}

.W50p {
  width: 50%;
}

.H40p {
  height: 40%;
}

.Bdb5;s;gray {
  border-bottom: 5px solid gray;
}

.T40p {
  top: 40%;
}

.L25p {
  left: 25%;
}

This is how our result will look:

Thus, by applying the utilities one after another, we even made some small CSS art.

Conclusion

To sum up, I will say that Atomic CSS truly embodies the basic principles of functional programming. Of course, not literally – but in the sense that is relevant for front-end developers and layout designers.

I would be happy to hear your additions and objections – it'll be interesting to read and think about them.

Finally, I would like to say: look at familiar things with a fresh perspective. And, as usual, I wish you success on your exciting journey of front-end development!

A major cause of rift between user interface (UI) designers and frontend developers is the issue of having an awesome UI design being difficult to translate into real life features.

Almost every frontend developer has faced similar fears at certain points during their coding journey. This article will help you understand how CSS displays work with regards to flexbox and grid layout.

Table of Contents:

• Origin of CSS
• Basic Structure of CSS
• CSS Layout (Flex and Grid)
• How to Use the Flex Layout in CSS
• How to Use the Grid Layout in CSS
• Similarities between Flex and Grid
• When to Use Flex
• When to Use Grid
• Conclusion

Origin of CSS

The earliest websites were not only static, but were also text-based. During the early years of the World Wide Web, web pages were written in markup languages such as XHTML and the like.

This is what they looked like:

https://www.history.com/news/the-worlds-first-web-site

With advancements in various technologies, technology enthusiasts were interested in making websites look more pleasant by adding some design. This led to the development of Cascading Style Sheets, better known as CSS.

Although CSS has gone through several evolutions, it is responsible for the aesthetics of websites. Imagine a website or a software application with just text and no design.

Hey! This article is not about history, so let’s get straight to business.

As a software developer majoring in client side applications (often referred to as front-end development), you’d agree with me that CSS is that lovely fellow who looks simple yet sophisticated.

CSS can keep you awake at night while trying to find out why your page is not aligning as expected or the reason your page content is chopped off on certain screens and not responsive too.

One of the reasons why beginners in software development often abandon front-end to major in back-end is the “stress” that comes with writing CSS code, especially with vanilla CSS where you have to manually input virtually every style rule. This is because CSS requires some level of calculation mixed with attention to the most minimal detail.

A major aspect of CSS that often creates confusion is the CSS layout — writing the CSS rule for the page layout can be a bit confusing as a beginner.

In the sections that follow, we'll focus on:

• The similarities between flex and grid displays.
• When to use flex or grid.

Basic Structure of CSS

Before discussing the CSS display in detail, let’s take a brief look at the CSS structure.

For starters, the CSS structure is a box-model. This means that every webpage is treated like a box, similar to having a pizza in a pizza box.

The pizza box here represents the browser page while the pizza represents the content of your website or application, which can be text, graphics, or multimedia.

A box of pizza

CSS box model

CSS Layout (Flex and Grid)

Now that you know how CSS structures the content of every web or application page, a vital aspect of CSS which you should get a grasp of is the layout, which is the crux of this article.

In architecture, every building has its structure. The structure for a commercial building might differ from that of a residential building. Same goes for front-end development.

The purpose of the application goes a long way in the selecting a layout for the. For instance, an e-commerce website would opt for a grid layout for proper arrangement and display of their products.

The layout of every website or application determines how the content on the page will be arranged: either in stacks of rows and columns or just columns across various screen-sizes.

It is also worthy to note that you can use more than one display on a particular webpage. This means that you can display a particular div as a grid and another div as a flexbox. It all boils down to the content of each div and how you want them to appear.

There are two ways to design the layout of a web page’s content in CSS:

• Flex
• Grid

How to Use the Flex Layout in CSS

The flex layout uses a method of arranging the web content in rows (main axis) or columns (perpendicular axis). This implies that it is a one-dimensional layout. The main axis can move in reverse order, from right to left.

The flex direction can be set to:

• Row
• Row-reverse
• Column
• Column-reverse

Using flexbox does not split the screen or content into equal parts. It is worthy to note that, flexbox doesn’t consider splitting content into equal columns across the row or stacking columns in the same alignment. Rather, it expands or shrinks the content to contain the available screen space.

Below is a diagram of a flex display using rows:

A graphical representation of a display set to flex

How to Set Display to Flex

To create a flex layout:

• Give the parent element a style rule of flex display
• Give the children element some margin and padding for a better look
• Specify the direction of the flex if there is a need to

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Setting Display to Flex</title>
<style>
    .fl{
        display: flex;
        flex-wrap: wrap;
    }
    .ex {
        flex-direction:row;
        flex: 1 0 100px; 
        margin: 5px; 
        padding: 10px; 
        background-color: #0000FF; 
        border: 1px solid #ffff; /* I added a border all round each column for better visibility and separation of the columns */
    }
</style>
</head>
<body>

<div class="fl">
    <div class="ex">Content 1</div>
    <div class="ex">Content 2</div>
    <div class="ex">Content 3</div>
    <div class="ex">Content 4</div>
    <div class="ex">Content 5</div>
</div>

</body>
</html>

The code above styles the body by selecting the parent container and assigning it a layout of flex. Then the direction of the children element is set to row using the flex-direction rule.

How to Use the Grid Layout in CSS

The grid layout, on the other hand, divides a web-page into 12 equal columns. These columns can be further split into the desired rows and columns.

The entire screen (100%) divided into 12 gives about 3.33% per column. The screen can also be styled using the number of columns in multiples of 2. That is: 2,4,6,8,10 and 12 with each number specifying the number of columns or width the element is expected to occupy.

How to Set Display to Grid

• Set the parent element's display to grid
• Specify the dimension(i.e rows or columns) of the grid using the grid-template property
• Give some spacing(margin,padding, row-gap, etc) to the child element so the grid can be more visible

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Setting Display to Grid</title>
<style>
    .fl{
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* This would display the children elements in  three equal columns with equal width */
        gap: 5px; /* To set a gap between  thegrid items */
    }
    .gr {
        padding: 20px; 
        background-color: #0000FF; 
        border: 1px solid #ffff; /* I added a border all round each column for better visibility and separation of the columns */
    }
</style>
</head>
<body>

<div class="gr">
    <div class="gr">Content 1</div>
    <div class="gr">Content 2</div>
    <div class="gr">Content 3</div>
    <div class="gr">Content 4</div>
    <div class="gr">Content 5</div>
</div>

</body>
</html>

Similarities between Flex and Grid

• They are both responsive layouts: Irrespective of which layout you decide to use for your application, provided that you style the properties correctly, both layout types are responsive to different screen sizes.

• Setting the parent element's layout first: In styling a flex or grid layout, the parent element is the one styled with the exact layout in question.

When to Use Flex

CSS flex is popular for its order ability (row-reverse, column-reverse), which enables the developer to reorder content without having to change the HTML content manually. There are several uses cases of the CSS flex, such as:

• Building One-dimensional Layouts: For web-pages or sections with a single layout, it is best to use flex as it helps in proper arrangement of the content.
• Alignment and Distribution of Content: Thanks to justify-content, align-self and other properties, alignment and distribution of content is made easy using flex.
• Displaying Columns in Equal heights: Using the align-items property and setting it to a value of stretch, that is: align-items:stretch, CSS flex ensures that columns within a flexbox are of equal heights. This implies that if there is a higher column, other columns will be stretched to meet up with the highest column. You can use CSS flex to display your columns in equal height irrespective of the height of the content.

When to Use Grid

The grid layout is the most commonly used by frontend developers because it allows you to place elements on different sections of the browser page while maintaining proper alignment. You can use the grid layout when:

• Building a Responsive Design: Often times, user interfaces are developed to be adaptable to whatever screen they're being displayed on. In such cases, the grid layout is your best bet because it gives room to flexibility and resizing of the element.
• Control of whitespace: Unlike the flex display that leaves some white space at the extreme, the CSS grid controls white space by distributing elements equally along the row and also based on the allocated column space.
• Consistency in Design Layout: The CSS grid offers a consistent pattern in the structure of a web page. This arrangement of elements makes future editing of the page easier.

Conclusion

One tip that comes very handy when styling a page is to choose which of the display modes to employ.

Once that is settled, the various sections of the page can follow suit bearing in mind what the entire body holds.

Although not an advice, recent practices have seen developers use grid more often than flexbox. Whichever the case, ensure not to mix up the code for the respective displays so you do not run into errors.

Happy Coding!