Generelle Meinungen und Informationen

[Max Fabi]

Liebe selfhtml-Nutzer,

vielen Dank zunächst für Eure Zeit und Bemühungen, Eure Meinung bzw Euer Wissen mit mir zu teilen!

HINTERGRUND Über die letzten Monate habe ich Einiges über CSS, HTML und teilweise JS gelernt. Ich nutze Wordpress, habe dort ein Theme installiert und meine eigenen Funktionen hinzugefügt, die mir fehlten. Es funktioniert soweit alles, jedoch bin ich mir bei der Struktur unsicher.

FRAGE

Ist es sinnvoller bezogen auf die Performance, Geschwindigkeit, etc. der Seite, Klassen/IDs mit ähnlichen Eigenschaften (gleiche Höhen, gleiche Breiten, etc.) zusammenzufassen und nur die Eigenschaften, in denen sich die Klassen/IDs unterscheiden, seperat aufzuführen (= Option 1) - oder sofort alles getrennt lassen (= Option 2)?

Option 1:

.class-name-one,
.class-name-two {
width: 100%;
height: 50px;
}

.class-name-one {
background: black;
}

.class-name-two {
background: white;
}

Option 2:

.class-name-one {
width: 100%;
height: 50px;
background: black;
}

.class-name-two {
width: 100%;
height: 50px;
background: white;
}

Nochmals danke für Euren Rat und Eure Hilfe!

[Gunnar Bittersmann]

@@Max Fabi

Ist es sinnvoller bezogen auf die Performance, Geschwindigkeit, etc. der Seite, Klassen/IDs mit ähnlichen Eigenschaften (gleiche Höhen, gleiche Breiten, etc.) zusammenzufassen und nur die Eigenschaften, in denen sich die Klassen/IDs unterscheiden, seperat aufzuführen (= Option 1) - oder sofort alles getrennt lassen (= Option 2)?

Weder noch. Bezüglich Performanz völlig egal. Und wenn sich dort ein messbarer Unterschied ergeben sollte, dann machst du grundlegend etwas falsch.

Schreibe den Code so, dass er für Menschen lesbar und wartbar ist. DRY – don’t repeat yourself! Änderungen sollten nur an einer Stelle vorgenommen werden müssen. Also ganz klar: Option 1.

.class-name-one,
.class-name-two {
width: 100%;
height: 50px;
}

.class-name-one {
background: black;
}

.class-name-two {
background: white;
}

LLAP 🖖

[Max Fabi]

Alles klar! Danke für die ausführliche Erklärung :)

Vielleicht noch einen Tipp zum Ablauf: Schreibst Du den Code erstmal herunter und schaust am Ende nach, was Du zusammenfassen kannst oder wie gehst Du da ungefähr vor?

[kackb00n]

Schreibe den Code so, dass er für Menschen lesbar und wartbar ist. DRY – don’t repeat yourself! Änderungen sollten nur an einer Stelle vorgenommen werden müssen. Also ganz klar: Option 1.

Da würde ich mit einem ganz klarem Jein antworten. Also an sich ja, aber immer den bestimmten Fall beachten. Wenn class-name-one und class-name-two nichts miteinander zu tun haben, außer dass sie (momentan) gleiche Eigenschaften haben, würde ich es aus semantischen Gründen getrennt lassen.

Für die finale Version, verfüttert man ja eigentlich sowie so die ganzen Dateien an Optimizers und Minifiers.

MfG

[Gunnar Bittersmann]

@@kackb00n

Wenn class-name-one und class-name-two nichts miteinander zu tun haben, außer dass sie (momentan) gleiche Eigenschaften haben, würde ich es aus semantischen Gründen getrennt lassen.

Dass die beiden gleiche Eigenschaften (heißt hier: gleiches Aussehen) haben, hat gestalterische Gründe, nicht unbedingt semantische. Das sollte sich im Stylesheet widerspiegeln, also Option 1. Wenn man die Darstellung von class-name-one ändert, soll sich die von class-name-two auch ändern.

Erst wenn class-name-one und class-name-two unterschiedlich aussehen sollen, würde ich das trennen.

LLAP 🖖