Klasa dla jednego atrybutu?

Question

Cześć, mam krótkie pytanie. Mam coś takiego:

<div class="dropOption"><span class="ball">&#xf111;</span>Kolor</div>

Robię custom selecta, w którym do wyboru są kolory. Dla każdej opcji chciałbym nadać dla spana inny kolor (span zawiera ikonkę z font awesome). Każda z opcji jest tworzona w JS w pętli. Jak najlepiej to zrobić? Czy opłaca się tworzyć dla każdego spana osobną klasę zwierającą tylko jeden atrybut (color). Czy lepiej stylizacje zamieścić wewnątrz znacznika spana jako np.: style="color: red;". (w miejscu red dałbym po prostu w js tablicę[i] z kolejnymi kolorami).

Comments

Bo wiesz, że istnieje taki input, right?

---

Wiem, ale on ma bardzo ograniczone możliwości edytowania wizualnego.

Answer 1

Jak tworzysz te opcje w pętli to style inline z tablicy tutaj są racjonalne. Z frameworkami jak Angular czy Vue też bym tak zrobił np

<div>
    <span *ngFor="let n of options" [style.color]="n.color"> {{ n.value }} </span>
</div>

<div>
    <span v-for="n in options" :style="{ color: n.color }"> {{ n.value }} </span>
</div>

więc generalnie tak jak zazwyczaj odradzam użycie styli inline tak tutaj uważam, że można spokojnie użyć