!important und AMP

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Es geht nicht darum, mit !important schlechtes CSS zu fixen; sondern darum, !important sinnvoll einzusetzen.

Ein Beispiel dafür sind Helferklassen wie visally-hidden:

.visually-hidden {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	padding: 0 !important;
	border: 0 !important;
	height: 1px !important;
	width: 1px !important;
	overflow: hidden !important;
	white-space: nowrap !important;
}

Wenn man dann sowas wie

.foo .bar {
  padding: 1em;
}

hat, muss für das visuell versteckte Element

<div class="foo">
  <div class="bar visually-hidden">…</div>
</div>

natürlich padding: 0 gelten.

Blödes AMP, das.

LLAP 🖖