Linter proposal: disallow `z-index` unless first rule in the file has `z-index: 0 and position:relative`

[janpaul123]

To prevent implicit dependencies between components based on stacking context. (I should still write a blog post about this.)

[connorshea]

I think a DisallowZIndex rule would be a very good idea. z-index should be definitely be used sparingly, if not you can end up with absurd things like z-index: 99999999 to override someone else's super high z-index. So it might be nice to only allow its use when you explicitly disable the rule in the file.

Maybe LimitZIndex, and then let the user limit it to an arbitrary max value or disable it entirely? Not sure, other people should chime in with opinions.

[janpaul123]

Point is though, that with the rule I proposed you won't get crazy numbers like that, since they won't be useful. The z-index: 99999999 will be bound by the stacking context of the first rule in the file, which works if you have a file organisation like ours (using local scope):

:local(.componentRoot) {
  position: relative;
  z-index: 0;
}

:local(.somethingInsideOurComponent) {
  z-index: 1;
}

The z-index: 1 can be z-index: 99999999 or whatever, and it won't make a difference between it only interacts locally with other z-index declarations in the same file. So no surprises.

I've seen many companies use a similar file organisation, so this could be a widely useful rule.