The value of z-index from @csstricks

[amber@front-end.social]

The value of z-index from @csstricks

The Value of z-index | CSS-Tricks

How we look at the stacking order of our projects, how we choose z-index values, and more importantly, the implications of those choices.

CSS-Tricks (css-tricks.com)

[lukeharby@infosec.exchange]

@amber @csstricks

z-index: 9999 drives me mad but I recently worked on a nice system in scss.

[amber@front-end.social]

@lukeharby @csstricks the only time i do that is when working with slick slider in fade mode bc they set the slides to 9999. Its soooo annoying

[lukeharby@infosec.exchange]

@amber @csstricks

So we tried to implement a semantic naming convention like (I think this is how bootstrap do it, as in the past I would have said $z-index__low, $z-index__high etc.)

$z-index__1: 1
$z-index__0: 0
$z-index__minus1: -1 // a bit clunky

And then you pass these to your actual elements and interpolate over them.

So we've got a hamburger nav so that has to be the highest z-index

.nav { z-index: $z-index__1 * 100 }

No, no we need a modal so we need one higher:

.modal { z-index: $z-index__1 * 101 }

Shoot what if we need some toast inside the modal that z-index will need to be higher still. And so on. It can get away but much better than inheriting a codebase with hard coded integers that drives me up the wall.

Hope I am not going off on one too much!

At least with this you can still use any of the base variables elsewhere in your app.

[lukeharby@infosec.exchange]

@amber @csstricks

Or I just realised we might have done:

$modalIndex: $navIndex + 1;
$toastIndex: $modalIndex +1;

Also kind of clunky. Especially if you need one in between.