Elements can be visible even though their parent has set "visibility: hidden"

Responsive design can be challenging if you're coding something that needs more than box shuffling. Scott O'Hara published an article describing how to build elements that act as buttons or spans depending on the viewport size. Wait, what?!

Scott uses CSS visibility to hide and show elements in the DOM tree depending on viewport size.

<!-- Hide the button but still show the span -->
<button type="button">
  <span>Do something</span>
</button>

It turns out that nested elements with different visibility properties (visible / hidden) can be visible even though their parent is hidden.

Here's the MDN section about this topic.

That's pretty wild if you ask me!

I'm unsure what to make of this discovery. Other CSS properties such as color or background obviously have the same behavior—why shouldn't an element have a different background color than its parent element? But for visibility (or as folks pointed out, pointer-events), this behavior seems very off.

And then there are CSS properties such as text-decoration where I'd totally expect that you can overwrite the ancestor's CSS, but you can't.

<div>
 Hello <span>world</span>
</div>
<div>
 Hello <span>world</span>
</div>

body {
 color: white;
}

div {
 text-decoration: underline;
}

div span {
 text-decoration: none;
}
body {
 color: white;
}

div {
 text-decoration: underline;
}

div span {
 text-decoration: none;
}

Regarding Scott's responsive pattern, it's incredibly smart but also feels super hacky. I'll have to sleep on all these discoveries...