When math helps CSS
Tags: css
Published: 2021-05-23 19:47:27

Math _does not do evil_, and modern CSS allows you to use it, so enjoy.

## Functional notations

CSS allows you to do from simple to advanced calculations with functional notations:

```CSS
selector {
  property: functional-notation( [argument]? [, argument]! );
}
```

[Source: MDN - Functional notations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions)

Those notations accept mathematical expressions as argument, which allows for using math logic in CSS. Note that you can even nest functional notations:

```CSS
body {
  width: min(1000px, calc(70% + 100px));
}
```

What does it mean?

* if the viewport is smaller than 1000px, the width is set to 70% of the screen + 100px
* if the viewport is larger than 1000px, the width is 1000px

## CSS animations

`@keyframes` are great, but it's sometimes _a little_ wordy, especially when dealing with complexe animations that require more options than `ease`, `ease-in`, `ease-out`, `ease-in-out`, or `linear` timing-functions.

In this case, mastering the `cubic-bezier()` function can be a great asset to your CSS. It allows for defining curves accurately:

```
cubic-bezier(x,y,x',y')
```

Where `x`, `y`, `x'`, and `y'` are the control points for the curve.

For more advanced usages and undertanding, read the post by [Temani Afif - Advanced CSS Animation Using cubic-bezier()](https://dev.to/afif/advanced-css-animation-using-cubic-bezier-nho). 

Note that you can also use [an online generator](https://www.cssportal.com/css-cubic-bezier-generator/) to visualize how your transition is going to look. It's editable.

It can be essential for your brand, so it's definitely something to know in CSS.

## The maths of CSS locks

> A CSS lock is a Responsive Web Design technique that lets you transition smoothly between two values, depending on the current viewport size, rather than jump straight from one value to the other.

[Source: Florian Verschelde - The math of CSS Locks](https://fvsch.com/css-locks)

In his post, **Florian Verschelde** describes the technique, its limitations, and the math behind.

In short, the CSS lock is a specific value calculation.

Instead of doing this:

```CSS
@media (min-width: 320px) {
  h2 {
      font-size: 1.25rem; 
  }
}
@media (min-width: 960px) {
  h2 { 
      font-size: 2rem; 
  }
}
```

You'd better use something like that:

```CSS
h2 {
  font-size: calc(1.25rem + viewport_relative_value);
}
```

This way, the size varies according to the viewport. The game consists of finding the right value for `viewport_relative_value`.

The CSS locks are not only meant for font sizes, you can use it for line height, for example. 

However, as "the actual value goes linearly from the minimum to the maximum", you must see the variation as a linear function to find the right value, which require some basic maths knowledge.

I strongly recommend [reading the full post](https://fvsch.com/css-locks), even if it's been published in 2016.

## Conclusion

I'm not gonna lie to you, CSS math can be a little hard to understand sometimes, especially when you need advanced customization, but don't give up, it's worth it. 

Modern notations and approaches allow for pretty cool layouts in this responsive era.