When most people think of doing computations and calculations on the web they think of JavaScript. That makes sense considering JavaScript is the main programming language of the web, but what if I told you that you can do fairly complex calculations with just CSS. It is honestly pretty amazing and infinitely useful.

What Is CSS Calc?

First, we need to talk about what CSS calc is and how you use it. In the simplest terms possible CSS calc is just a CSS function, similar to rgb, var, etc. that lets you do addition, subtraction, division, and multiplication on various CSS units. Here is a simple example.

.class {
  width: calc(200px + 100px);
}

The above CSS sets the width of this box to 300px (200px plus 100px).

Admittedly, this is not very useful. I mean we could just write 300px instead and save ourselves a bunch of time, but this is only the beginning of CSS calc.

#css #developer