Tealk Also für mich persönlich ist das schlechtes HTML Markup und daraus resultierendes schlechtes CSS Design. Klar ist es mit SASS oder LESS schnell geschrieben. Das kompilierte CSS wird dennoch riesig gross.
Kompiliert ist dein CSS sowas in der Art (hab hier nur den Anfang):
input#attr_usable_wounds[value="1"] ~ div.wounds_3,
input#attr_usable_wounds[value="1"] ~ div.wounds_4,
input#attr_usable_wounds[value="1"] ~ div.wounds_5,
input#attr_usable_wounds[value="1"] ~ div.wounds_6,
input#attr_usable_wounds[value="1"] ~ div.wounds_7,
input#attr_usable_wounds[value="1"] ~ div.wounds_8,
input#attr_usable_wounds[value="1"] ~ div.wounds_9,
input#attr_usable_wounds[value="1"] ~ div.wounds_10 {
display: none;
}
input#attr_usable_wounds[value="2"] ~ div.wounds_4,
input#attr_usable_wounds[value="2"] ~ div.wounds_5,
input#attr_usable_wounds[value="2"] ~ div.wounds_6,
input#attr_usable_wounds[value="2"] ~ div.wounds_7,
input#attr_usable_wounds[value="2"] ~ div.wounds_8,
input#attr_usable_wounds[value="2"] ~ div.wounds_9,
input#attr_usable_wounds[value="2"] ~ div.wounds_10 {
display: none;
}
Alles anzeigen
Und hier sehen wir, das wir am Ende ein riesiges CSS Markup für etwas ziemlich simples haben.
Ich würde das (auch wenn ich mit SASS arbeite) das mit nth-child schreiben. Daher statt die divs zu nummerieren würde ich dem div immer die klasse "wounds" geben (egal welcher Nummer)
dann kann man mit CSS so arbeiten:
input#attr_usable_wounds[value="1"]:checked ~ div.wounds:nth-child(n+4) {
display: none;
}
input#attr_usable_wounds[value="2"]:checked ~ div.wounds:nth-child(n+5) {
display: none;
}
Daher diese viele Zeilen von oben, kann man auf diese wenigen reduzieren. Mit "nth-child(n+ZAHL)" bedeutet jeder Select (also hier das entsprechende "div" ab dem ZAHL (ab dem 4. im oberen Teil und ab dem 5. im zweiten Teil) ist betroffen.
Dadurch hat man am Ende ein wesentlich kleineres CSS das man ausliefert und dadurch angenehmere Seitenladezeiten.
Logischerweise kann man es noch weiter kürzen:
input#attr_usable_wounds[value="1"]:checked ~ div.wounds:nth-child(n+4),
input#attr_usable_wounds[value="2"]:checked ~ div.wounds:nth-child(n+5) {
display: none;
}