Bootstrap: CSS Styling nur mit!important möglich?

4 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet
Steffile
23.01.2018, 07:03

Achte einfach darauf, dass dein style.css (oder wie immer du deine css Datei nennst) nach bootstrap.css geladen wird, sonst ueberschreibt bootstrap natuerlich deine Anpassungen.

Also so:

<head>
<link href="bootstrap.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>

Und nicht so:

<head>
<link href="style.css" rel="stylesheet">
<link href="bootstrap.css" rel="stylesheet">
</head>
regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, Webseite, CSS
23.01.2018, 04:31

Genau, das Keyword !important ist die Brechstange in CSS, die du nur so wenig wie möglich einsetzen solltest, da du sonst an Übersicht verlierst, deine Möglichkeiten an Flexibilität einschränkst und unnötige Daten, die man vermeiden könnte, über die Leitung schickst.

Bootstrap definiert ein Basisset an CSS-Selektoren, die sich zwar auf sehr viele Elemente auswirken, welche du aber auch einfach überschreiben oder in einer Konfigurationsdatei (mixins) von Bootstrap anpassen können solltest. Deine Selektoren werden sie (ohne !important) wohl aufgrund der Priorisierung und Reihenfolge des Aufrufs dennoch überschreiben.

Für das Überschreiben der Styles gäbe es wohl Lösungsmöglichkeiten, wie diese:

  • Du definierst einen ID-Selektor (falls dieser Style pro Seite nur einmal für ein bestimmtes Element verwendet werden soll):
<style type="text/css">
  #badgelink {
    border: 2px solid #CCC;
    border-radius: 5px;
    color:#CCC;
}
</style>
<!-- ... -->
<h2>Badges</h2>
  <a class="btn badges" href="#" id="badgelink">
    Kommentare <span class="badge badge-secondary">20</span>
</a>
  • Du definierst einen Klassenselektor (und verbindest diesen gegebenenfalls mit einer weiteren Klassenselektion):
<style type="text/css">
  .badgelink.btn {
    border: 2px solid #CCC;
    border-radius: 5px;
    color:#CCC;
}
</style>
<!-- ... -->
<h2>Badges</h2>
  <a class="badgelink btn badges" href="#">
    Kommentare <span class="badge badge-secondary">20</span>
</a>
  • Du verknüpfst Element- und Klassenselektor miteinander:
<style type="text/css">
  a.btn {
    border: 2px solid #CCC;
    border-radius: 5px;
    color:#CCC;
}
</style>
<!-- ... -->
<h2>Badges</h2>
  <a class="btn badges" href="#">
    Kommentare <span class="badge badge-secondary">20</span>
</a>

In den Entwicklertools, die in einigen Browsern zur Verfügung stehen, kannst du zuvor prüfen, welche Styles bereits auf der Zielkomponente liegen, bei welchen es notwendig ist, sie zu überschreiben und welche Priorität dafür überhaupt aufgebracht werden muss. Wie diese berechnet wird, kannst du hier nachlesen: https://wiki.selfhtml.org/wiki/CSS/Kaskade#Spezifit.C3.A4t

Eine Lösung mit Element- und/oder Klassenselektoren ist dabei vorzuziehen.
RegietsSaihtam
23.01.2018, 01:43

CSS Styles haben Vorrang, je genauer das Element bezeichnet wird.

Also a.btn hat vorrang vor .btn und a.btn.badges vorrang vor a.btn. Und ID hat Vorrang vor Class...

Manchmal ist es einfach behindert und man sollte nur noch !important nehmen.
Niklas  23.01.2018, 01:45

An sich richtig, vom dauerhaften Einsatz von !important ist aber abzuraten. Führt zu Spagetticode.
Niklas
Nutzer, der sehr aktiv auf gutefrage ist
im Thema Webseite
23.01.2018, 01:41

Weil die Eigenschaft des Frameworks höher prisorisiert ist. Mit !important definierst du, dass deine gesetze Eigenschaft Vorrang hat. Dazu ist das gut. Ist schon richtig so.

https://www.css-hack.de/CSS+allgemein/%21+important

Lösung: extra Klassen definieren oder gleich strukuriertes CSS schreiben, das derartige Prioritätskämpfe gar nicht erst zulässt.

Tipp: Hex Codes können klein geschrieben werden.
RainDrop123123  23.01.2018, 09:46

!important sollte nur als äußerste Ausnahme benutzt werden, grade in großen Projekten. Selektiert man richtig, ist auch der eigene Selektor schwerer gewichtet...

Steffile  23.01.2018, 15:36
@RainDrop123123

Stimmt in der Theorie, aber in der Realitaet ist es schon oft ganz gut, das !important zu haben.
Steffile  23.01.2018, 07:05

Er meint, z.B. statt Klasse .btn (eine Klasse die in Bootrstrap schon definiert ist), kannst du .mybutton.btn schreiben. Aber wie geasgt, das kannst du dir auch sparen, wenn du bootstrap vor deinem CSS laedst.

user5431 
Beitragsersteller
 23.01.2018, 14:46
@Steffile

Du meinst also, dass meine CSS Datei Verlinkung nach meiner Bootstrap Verlinkung kommen soll und ich dieses !important, dann nicht mehr brauche?
user5431 
Beitragsersteller
 23.01.2018, 01:58

Kannst du bitte ein Beispiel nennen, was du mit "extra Klassen definieren" meinst?