bei Cassoipeia mittlerweile so ca. 856 mal
Das ist vornehmlich das Bootstrap-4-CSS, auf dem cassiopeia aufbaut.
Das hat viele Klassen, die mit !important ausgezeichnet sind.
Sinn dahinter ist, dass man eben durch eine Bootstrap-4-CSS-Klasse wie
mt-1
die man in seinem HTML verwendet, sicher sein kann, dass der Bereich ein margin-top (oberer Abstand) bekommt und das auch wirkt, (fast) egal, was in der eigenen CSS-Datei steht.
Das Ganze ist aber noch viel trickiger. Verwendet man zu obiger Klasse, zusätzlich eine weitere, z.B.
mt-md-0
dann wird das margin-top für mittlere (medium) Bildschirme und darüber auf 0 gesetzt.
Eine zusätzliche
mt-xl-3
vergrößert das margin-top dann wieder für x-large-Bildschirme und darüber um einen deutlichen Schritt.
class="mt-1 mt-md-0 mt-xl-3"
Bedeutet: responsives Verhalten der Seite alleine durch CSS-Klassen im HTML.
Um damit klar zu kommen, sollte man immer von unten nach oben denken, dem Motto "Mobile first" folgend.
Klasse für schmale Bildschirme, Klassen für größere, Klassen für noch größere.
Man entwickelt heutzutage Templates (eigentlich) von "unten nach oben" und fängt nicht mehr mit Riesenbildschirmen an und arbeitet sich nach unten. Dem Prinzip folgt auch das Bootstrap-4 und beide Joomla-Templates (bin aber nicht mehr sicher, ob das wirklich umgesetzt wurde).
Mit diesen Klassen kann man sehr schicke Sachen alleine im HTML machen. Nicht nur margins oder paddings, sondern auch unterschiedliche Anordnungen in Reihen und Spalten etc. pp.
Es besteht kein Zwang diese Klassen zu verwenden. Man kann sich dieses Verhalten auch durch eigenes CSS und CSS-Media-Queries erstellen.
Verwendet ein Template sie aber im HTML, hilft dann oft nur noch ganz hartes Überschreiben in der eigenen CSS-Datei oder die Klassen in eigenen Overrides eben zu entfernen.
Und auch Bootstrap-CSS ist eine freie Entscheidung im neuen Joomla und nicht mehr zwingend durch den Core.