CSS vs JS: 1- Doing maths in CSS

CSS vs JS: 1- Doing maths in CSS

Working with mathematical functions in CSS


3 min read

Going through the web dev journey is so awesome. I decided to do something new this time around! started a new series where I'll be doing things in CSS and was previously done in javascript. Take a deep breath, and released all the stress. Chill now ๐Ÿฅฒ๐Ÿ˜‚. Let's dive in.


From a zero to hero web dev journey, CSS in full is Cascading Style Sheets. Oh, that sounds great but this is not a cascade here we're to talk about. CSS is basically made to give some prettiness to our old boring HTML by describing how the HTML tags can be displayed depending on phone sizes, events and triggers.

What are the uses of CSS?

As said before, it names Cascading Style Sheets(CSS) brings more sense to our life which was boring with simple and normal HTML. Below are some points on which CSS makes it great.

- Height
- Font size
- Color
- Border
- Background Color

CSS is made up of 3 parts : A selector, A Property and A value
In case you feel bored using the old conventional self-identified CSS, give me your hand let's have a walk.

CSS Frameworks

1. Bootstrap
2. Tailwind CSS/
3. Foundation
4. Bulma
5. Skeleton
6. UIkit.
7. Milligram.
8. Pure.
9. Tachyons.

The Calc function

The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.
! 20220214_091128.jpg

Using the basic math operators( +, /, - and x) and CSS variables, brings more taste to our journey. Below are some examples of its implementation.

Using addition width: calc(1px - 100%); Using subtraction width: calc(100% - 30px); Using multiplication width: calc(2em * 5); Using CSS variables width: calc(var(--variable-width) + 20px);

In real-life demo

The min() function

Takes an undefined number of arguments and makes choices between these to get the smallest value. In other words, it lets you set the smallest (most negative) value from a list of comma-separated expressions as the value of a CSS property value.

div {
      background-color: yellow;
      height: 100px;
      width: min(50%, 300px, 500px, 80px, 120px);

The max() function

As the min() function, it also takes a list of arguments as values. But unlike the min() it targets the larger value of the list.

p {
      fontsize: 24px;
      width: max(50%, 300px, 500px, 80px, 120px);

Bonus: The CSS var() function

Ideal to set values of variables in CSS for later use and help in respecting the DRY principle which states Don't Repeat Yourself.
CSS variables have access to the DOM, which means that you can create variables with local or global scope, change the variables with JavaScript, and change the variables based on media queries.

:root {
  --main-color: #1e90ff;
  --bg-color: #ffffff;
body { 
        background-color: var(--main-color); 

h2 {
       border-bottom: 2px solid green; 

.container {
        color: #1e90ff;
        background-color: #ffffff;
        padding: 15px;


button {
       background-color: #ffffff;
       color: #1e90ff;
       border: 1px solid var(--bg-color);
       padding: 5px;


For some small screen sizes to divide equally when style, the calc() can be ideal. In case comparison comes in, the min() and max() functions are the big guys who got our backs.