IMO, if you find yourself dealing with a lot of z-indexes then you have something else to fix. Whataver the complexity of the website, you rarely need to deal with a lot of values. I generally use only 4 values: -1,0,1 and a very big value. They cover almost all the different use cases I always face.
It's similar to someone who is trying to place all the elements using position:absolute and find himself spending days to figure out the values of top/left/bottom/right for each element
It really depends on what you're trying to do and the amount of components you need to develop but I agree with you that we shouldn't need 1000 index'es. My main attempt here was to show a cleaner way of doing it taking advantage of variables 😉
Thanks for the comment!
#ActuallyAutistic web dev. Does front of the front-end. Loves perf and minimalism. Prefers HTML, CSS, Web Standards over JS, UX over DX. Hates div disease.
I've worked on two complex sites and you should survive with less than 10. The need for some occur with modals and navigation layers, and with content you need a couple for elements that popup on top of other content (but should obviously not go on top of navigation and modal layers).
Also, as CSS has advanced the need for z-index tricks has become a rarer thing.
So even for a complex layout something like this should be near the maximum required:
IMO, if you find yourself dealing with a lot of z-indexes then you have something else to fix. Whataver the complexity of the website, you rarely need to deal with a lot of values. I generally use only 4 values: -1,0,1 and a very big value. They cover almost all the different use cases I always face.
It's similar to someone who is trying to place all the elements using
position:absolute
and find himself spending days to figure out the values oftop
/left
/bottom
/right
for each elementIt really depends on what you're trying to do and the amount of components you need to develop but I agree with you that we shouldn't need 1000 index'es. My main attempt here was to show a cleaner way of doing it taking advantage of variables 😉
Thanks for the comment!
I've worked on two complex sites and you should survive with less than 10. The need for some occur with modals and navigation layers, and with content you need a couple for elements that popup on top of other content (but should obviously not go on top of navigation and modal layers).
Also, as CSS has advanced the need for
z-index
tricks has become a rarer thing.So even for a complex layout something like this should be near the maximum required:
And even these can be compacted if DOM structure is well maintained, but that is not a guarantee when working on a site with a lot of contributions.