Habe ungewöhnliche Fragen zum Thema CSS Datei

[marcelgerard]

Hi Leute,

ich hab mal ein Thema, dass mich sehr interessieren würde. Es geht um die CSS Datei und ihre Inhalte. Keine Frage, man sollte sie so kompakt wie möglich gestalten, damit keine lange Ladezeiten entstehen. Aber ist das heutzutage bei kleineren Projekten noch sehr wichtig?

Was mich zusätzlich mal interessieren würde, wie ihr so eine Datei aufbaut bez. wie kreativ ihr bei den "Selektoren" seid. Habt ihr da ein System oder nehmt ihr irgendwas oder eher kurze Namen oder lieber längere uns genauere etc.? Ich tue mich da irgendwie schwer mit einen guten Rhythmus zu finden. Das selbe mit wie baut man eine Seite clever auf - ich z.B trage bei meinen Containern mehrere Selektoren ein, ich glaube ich denke da noch nicht kompakt genug.

Hier ein Beispiel:

<div class-="mainflex content-hover content-link">Test</div>

Ich habe einige CSS Anweisungen für nur ein Selektor zugewiesen. "mainflex" z.B ist immer die Anweisung "display: flex". Wenn ich also mal diese Anweisung brauche, schreibe ich immer "mainflex". Wie macht ihr das so?

LG Marcel

 

[Aaron3219]

CSS-Klassen sind jetzt nicht die ausschlaggebenden Dinge, welche die Browserzeit reduzieren. Ob du lange oder kurze Namen für deine Klassen wählst, bleibt völlig dir überlassen.

Die wichtigste Regel:
Regel dein CSS-File so, dass DU es verstehst. Achte aber auch darauf, dass dennoch nicht viel unnötiger Code entsteht und versuche es übersichtlich zu halten, Beispiel eines Menüs:

<ul>
   <li class="testklasse"></li>
   <li class="testklasse"></li> 
   <li class="testklasse"></li>   
   <li class="testklasse"></li>
</ul>

Ist das Sinnvoll, oder ist das hier eine bessere Lösung?:
ul > li {}
(Selektoren können dein Leben 1000 Mal leichter machen!)


Mehrere Klassen in einem html-Objekt zu haben ist völlig normal und auch sinnvoll. Warum soll ich sowas hier:

display: flex;
justify-content: center;
align-items: center;

Denn jedes mal bei einem horizontal- und vertikal zentriertem Objekt einfügen, wenn ich es auch als ein Wort in das div schreiben kann. Wenn es dann noch den Namen trägt (z.B.: hor-ver-flex) weiß ich, wenn ich den Code anschaue, dass dies eine Flexbox ist mit horizontal und Vertikal zentriertem Inhalt.