DEV Community

loading...

An Incredibly Easy Way to Manage Layers in SCSS

Mac Daniel
UX/UI Designer. Designs on the browser. Prays for the wicked.
Updated on ・2 min read

If you’ve come across websites that uses 0, 1, 999, 99999, 9999999 as z-index values, then you’ve probably already guessed that the layers have been arbitrarily arranged and therefore poses the imminent headache of maintaining those websites in the future.

The way I manage layers is thru SCSS placeholders. Assuming I have a couple of layered components to deal with, I extend a placeholder with the same class name but prefixed with %layer-.

.nav{
// some properties
    @extend %layer-nav;
}
.dimmer{
    // some properties
    @extend %layer-dimmer;
}
.modal{
    // some properties
    @extend %layer-modal;
}

Then, in a separate SCSS partial called _layers.scss, I lay these placeholders down, each in a one-liner manner so I can easily glance over the layers and their corresponding values.

%layer-nav  { z-index: 10; }
%layer-dimmer   { z-index: 11; }
%layer-modal    { z-index: 12; }

I also don’t mind extending the placeholder in different components first before declaring them because the compiler shall indicate some errors which I use to easily encode them in the layers partial file later on.

And that’s pretty much it. Because z-index values are implemented as placeholders, we don’t need to constantly revisit components just to adjust the values. We also don’t have to put a lot of comments to note how one thing affects another. And most importantly, we don’t have to jump tens and hundreds (or even thousands) of units just to make sure a box appears on top!

It’s also worth noting that in this implementation of @extend, sharing the same placeholder across multiple components may not be the best idea because of the naming convention.[EDIT] You're better off using variables in this case, as pointed out in the comments below.

I hope you guys find this useful as I have. Let me know what you think or if there’s an even easier way, feel free to share. I’ll be sure to check it out.

Discussion (4)

Collapse
richarddillman profile image
Richard Dillman

I run across our old nemesis z-index every so often and love your answer! I thought I'd expand on this just a bit with a view from advertising.

Google sponsors a group that manages advertisement guidelines, one of which is z-index. This is a good rule to follow as most 3rd party content providers will also be following it. This allows all our various projects to know what to expect.
From the Interactive Advertising Bureau https://www.iab.com/wp-content/uploads/2017/07/IABNewAdPortfolio_Quick_Guide_2017-07.xlsx
Z-Index < 0:

  • Background and-or hidden elements

Z-Index 0 - 4,999:

  • Main Content

Z-Index 5,000 - 1,999,999:

  • Expanding content such as pushdowns or accordions.
  • The entire expandable unit should be set within this range

Z-Index 5,000,000 - 5,999,999:

  • Expanding site navigation elements
  • Sticky elements
  • Drop down navigation
  • site warnings
  • Basically, anything that is allowed to cover content.
  • Only the expanding portion of elements should be included on this level.

I do love me some standards!

Collapse
seibmacdaniel profile image
Mac Daniel Author

Good to know! I work on content websites driven by ads. I think that we can implement these z-index ranges as comments in the _layers.scss to group things accordingly.

Thanks man!

Collapse
lewy_blue profile image
Lewy Blue | Discover three.js

Is there any advantage to using extend rather than a variable?

$layer-nav: 10;
$layer-dimmer: 11;
$layer-modal: 12;

.nav{
  // some properties
  z-index: $layer-nav;
}
Collapse
seibmacdaniel profile image
Mac Daniel Author • Edited

Works the same way, probably better if you're really sticking to unique z-index value per component. I just like making things more readable, I guess, hence the "layer" prefix which replaces the "z-index" term in the components' properties