CSS Style der Klasse hinzufügen oder Klasse dem Element?

Hallo,

ich arbeite mich gerade in Bootstrap ein. Dabei fällt mir auf, dass bei Bootstrap im Prinzip jeder Style eine Klasse hat, die man dann dem Element hinzufügen kann. Z.B.:

.text-center { text-align: center }

Im HTML dann verwendbar mit: <p class="text-center">

Bisher habe ich mein CSS immer selbst geschrieben und es da im Prinzip genau andersrum gemacht. Also z.B.

HTML:
<div class="beispiel">
<p>Text Text Text</p>
</div>

CSS:
.beispiel p { text-align: center }


Das ist jetzt natürlich nur ein sehr simples Beispiel, aber welches Vorgehen ist eigentlich das bessere?

Ersteres hat den Vorteil, dass man die Klassen immer wieder verwenden kann.
Letzteres, dass das HTML nicht mit so vielen Klassen "zugemüllt" wird.

Gibt es dazu Empfehlungen?
Danke

Ich persönlich mache es immer so das es den wenigsten Code ergibt. Bei Methode 1 kannst du eben div, p etc immer mit der Klasse bestücken und es wird angepasst.
Bei dem 2ten musst du sehr genau selektieren damit du eben das Element auch triffst. Teilweise muss man dann eben CSS mehrfach schreiben weil sonst nicht alles genau richtig selektiert und angewendet wird.
Daher nutze ich auch meistens die erste Methode.

​Meine Erfahrung.

Ich persönlich tendiere zur 2. Methode.
Einfach aus dem Grund, dass wenn du das Design mal ändern willst, müsstest du sonst immer auch den HTML Teil anpassen und das auf zig Seiten. Bei Variante 2 änderst du einmal die Klasse und alle Seiten sind entsprechend angepasst.

Ja man muss es auf vielen Seiten anpassen. Gute Editoren können aber Suchen und Ersetzen in mehreren Dateien gleichzeitig. Zudem ändert man selten komplett Grundlegend das Design so dass es meist reicht die CSS Klasse anzupassen. HTML muss eig. nur geändert werden wenn der Seitenaufbau geändert wird.

Fenatics schrieb:

Bei Variante 2 änderst du einmal die Klasse und alle Seiten sind entsprechend angepasst.

Zum Vergrößern anklicken....

Stimmt, sehr gutes Argument.
Da frage ich mich allerdings schon, warum Bootstrap das dann so handhabt. Ich habe von vielen Entwicklern gehört, dass sie Boostrap zu einem besseren Entwickler gemacht hat. Aber warum dann diese Praxis?

Ic3HanDs schrieb:

Zudem ändert man selten komplett Grundlegend das Design so dass es meist reicht die CSS Klasse anzupassen. .

Zum Vergrößern anklicken....

Hm, stimmt natürlich. Aber gerade bei dem Beispiel ".text-center", ist es ja irgendwie doof, wenn die Klasse plötzlich nicht mehr text-align: center enthält, sondern left oder so.

Ich für meinen Teil habe hier immer unterschiedliche Konzepte gesehen:

felsi schrieb:

.beispiel p { text-align: center }
<div class="beispiel">
<p>Text Text Text</p>
</div>

Zum Vergrößern anklicken....

Diese Methode nutze ich, wenn mein div ein konkreter Block ist, der so immer wieder verwendet werden soll (z.B. ein Slider). Dann haben die <p>-Elemente meistens eine eigene Formatierung, die sich von den anderen Elementen der Seite unterscheidet. Ich habe die Formatierung des Blocks im CSS-Teil zusammen und dadurch eine gute Übersicht.
Auch wird die Formatierung der Elemente nicht versehentlich außerhalb des Blocks verwendet, was bei einer Änderung sonst nur noch weitere Arbeit nach sich zieht.

felsi schrieb:

.text-center { text-align: center }
<p class="text-center">

Zum Vergrößern anklicken....

Diese Variante ergibt für die meisten Inhalte Sinn, da sie einfach die Elemente direkt formatiert. Die einzelnen Elemente werden oft unabhängig voneinander verwendet, verglichen mit der oben beschriebenen Variante.

Zudem muss man bedenken, das eine Entwicklungsumgebung das oben dargestellt Konzept eines konkreten Inhaltsblocks nur schwer von alleine erkennen kann, weshalb es den <p>-Elementen direkt eine Klasse zuordnen wird.
Außerdem verwenden manche Frameworks die Vorgehensweise, für jedes CSS-Attribut eine Klasse zu erstellen. Einem Element werden dann leicht mehrere Klassen zugeordnet, z.B. je eines für Textausrichtung, Farbe, Schriftstil, Schriftgröße, etc. Wenn mehrere Formatierungen zusammenkommen, macht deine Entwicklungsumgebung das vllt. auch?

Bei nur einem Wert wie text-align: center würde ich auch nicht extra eine Klasse bauen

Generell ist es denke ich auch sinnvoll Klassen eher danach zu benennen bei CSS welches Element Sie beschreiben. Also zB: MainHeader, MainContentText etc.

Ich käme in dem Fall nicht auf die Idee eine Klasse zu bauen nur um den Text zu zentrieren..

So wie es bei Bootstrap gemacht wird ist es die einzig richtige Lösung wie man das ganze mit der Flexibilität rund um das Responsive Design Pattern vernünftig hinbekommt. Es gibt ja nicht nur text-center sondern auch "text-center text-md-right". Willst Du jetzt für jede deiner eigenen Klassen auch noch eigene Breakpoint-Regeln erstellen?

Zudem wird Bootstrap 4 ja nicht direkt im CSS geschrieben, sondern in Sass - die CSS-Dateien sind dann das "kompilierte" Ergebnis davon

Edit: Und Bootstrap setzt da auf einen sematischen Ansatz. Deren klassen haben eine "selbst klingende Bedeutung"
Bei "text-md-center" weiß jeder, der mit Bootstrap zu tun hat, was da vor sich geht. Bei ".beispiel" weiß das im Zweifelsfall eventuell noch der Ersteller der Klasse ".beispiel"

Ic3HanDs schrieb:

Bei nur einem Wert wie text-align: center würde ich auch nicht extra eine Klasse bauen

Zum Vergrößern anklicken....

Macht Bootstrap 4 aber

Und ist auch richtig so - siehe mein Beitrag

Ok, dann werde ich diesen Ansatz jetzt mal weiter verfolgen.

Ich sträube mich allerdings noch ein bisschen davor, Bootstrap komplett zu verwenden. Ich starte eigentlich immer gerne von "null" ohne Vorformatierungen (z.B. gefällt es mir nicht, dass Buttons von Haus aus runde Ecken haben, usw.). Daher habe ich jetzt erstmal nur das Bootstrap-Grid verwendet. <- wobei mir hier das neue CSS Grid auch sympathischer ist, irgendwie...

Schau mal unter https://bootswatch.com/ ob dir da Designs mit Eckigen Buttons eher zusagen
Edit: Ich persönlich verwende gerne Spacelab. Aber das ist halt alles eine Geschmacksfrage. Letztlich hat Bootstrap aber genau diese großen Vorteil: Man kann, wenn man darauf aufbaut, recht einfach ohne großen Aufwand das Design austauschen. - und man kann Bootstrap natürlich auch selber "hacken", wenn man da Lust zu hat.

Ich gebe zu das ich bisher auch alles von Hand gebaut habe..

Für optimierte Webseiten würde ich das auch weiterhin so handhaben. Bootstrap eignet sich aus meiner Sicht sehr gut für Webanwendungen / Webportale.

Will man die eierlegende Wollmilchsau (Bootstrap), dann muss natürlich jede Eigenschaft eine eigene Klasse haben. Flexibility through verbosity. (Ich bin nicht so ein riesen Freund von Bootstrap)

​Will man ein konsistentes Design für eine Webseite, dann verwendet man CSS wie es für Klassen gedacht ist: Ich habe ein <div class="comment"> und das soll so aussehen wie ein Comment.

Das Design von Bootstrap kann man aber nicht als inkonsistent darstellen
Im Gegenteil, eines der Hauptkritikpunkte an Bootstrap ist, dass "alles im Web" gleich ausschaut - quasi zu viel Konsistenz.
Und, dass das halt die große Kanone ist, mit der man oft auf Spatzen ballert - zu komplex für einfache Anforderungen.

Warum sieht es gleich aus? Weil die Leute mit dem Voreigestellten zufrieden sind. Warum sind sie zufrieden, weil man eben nicht "einfach mal" was umstellen kann, weil es schön verstreut ist. (Ich will alle Tabellen Mobile-Scrollable machen, hmm welche Klasse haben die Tabellen, content-table? Bootstrap braucht so was nicht, man hat ja stripe (oder so was, habs nicht nachgeguckt)).

​Warum sieht jedes Word-Dokument anders aus? Jede PowerPoint, aber eben nicht jede Latex Beamer Präsentation?
​Weil Word und PowerPoint-Dokumente gut anpassbar sind, aber Latex Beamer n scheiß ist (dafür ist es elegant/pur).

​Warum war das HTML4-Web so bunt und chaotisch? Weil jeder rumgeschraubt hat, wie er wollte, dann kamen die HTML5-Puristen und haben alles Bunte abgestraft und es elegant (also unübersichtlich) gemacht.

​(Das ist nicht das Problem von HTML5, aber von Google-ich-strafe-alle-nicht-die-regeln-die-ich-aufgestellt-habe-einhaltende-ab Monopolist)

Ich habe es nach langem Rumprobieren für mich so gelöst (ist aber auch noch nicht fertig optimiert ):

Ich baue das HTML mit Hilfe einer Template-Engine und -Inheritance aus kleinen Schnipseln zusammen. Jeder Schnipsel ist entweder ein semantisches HTML5-Strukturelement mit Inhalt oder ein größerer, komplexer Inhaltsbereich wie bspw. eine große Tabelle, etc., also etwas das für sich alleine stehen kann und einzigartig ist.

Jedes der Strukturelemente, falls einzigartig wie Nav oder Footer, dient so als Einstiegspunkt für Selektoren, ansonsten (bspw. Section) bekommen sie eine Klasse, ebenso wie Elemente der obersten Ebene der komplexen Inhaltsbereiche. Ansonsten versuche ich dabei im HTML so wenig Klassen und Ids wie möglich zu verwenden.

Jedes einzelne Element bekommt eine eigene SCSS-Datei, die genauso heißt wie die HTML-Datei. Dort baue ich dann alles innerhalb des einen Oberelementes auf und gruppiere und verschachtele auch innerhalb dieses Kopfelementes (hierzu gibt es die Inception-Regel).

Globale Styles kommen in eine Base-Datei und größere Ähnlichkeiten zwischen Bereichen und Elementen, die in mehreren SCSS-Dateien vorkommen, werden in Mixins ausgelagert, bei kleineren Ähnlichkeiten nehme ich Redundanzen in Kauf.

Damit hat man auf SCSS-Ebene eine mehr oder wenige identische Abbildung der Struktur des HTMLs und auch bei komplexen Projekten gibt es eigentlich keinen Grund mehr, irgendetwas zu suchen, da man es sofort findet . Man muss nur aufpassen, das man nicht zu viel gruppiert und verschachtelt...

Ist aber wie gesagt auch noch nicht komplett ausgereift, sondern nur meine persönliche Best-Practice.