Usando le classi CSS come decoratori - un buon modello?

Question

Usando le classi CSS come decoratori - un buon modello?

#1 da (10 voti)
#2 da (1 voti)
#3 da (0 voti)

8

Ho creato una web-app con una GUI abbastanza complessa - molti piccoli elementi a fianco e all'interno di altri elementi che richiedono vari comportamenti (trascinamento, clic, ma sensibile al contesto).

Il mio codice tende a funzionare in questo modo:

I controlli

iniziano come tag html

<li>

quindi aggiungo le classi al tag

<li class = 'static passive included'>

alcune classi potrebbero essere per lo stile css per influenzare l'aspetto

.static {background: blue; float: left;}

mentre altri vengono interpretati da jQuery per fornire un comportamento per gli eventi DOM associati

$("#container").delegate(".passive", function {onclick : //do-stuff})

e altri potrebbero essere rilevati da normali javascript durante la scansione del documento, ad es. raccogliere i valori di testo di tutti i nodi con la classe "inclusa". Quindi alcuni elementi DOM sono oggetti GUI che implementano le classi difese attraverso una combinazione di css e jQuery.

La mia domanda è, è un buon modo di lavorare? E anche questi sono davvero 'decoratori' - certamente 'aggiungono ulteriori responsabilità a un oggetto dinamicamente' ma non sono sicuro di quel termine. Finalmente, usi questo modello nei tuoi siti?

javascript design-patterns web-applications css jquery

posta Andrew M 22.04.2011 - 21:58

fonte

3 risposte

Leggi altre domande sui tag javascript design-patterns web-applications css jquery

Quali sono le considerazioni importanti quando si passa dall'architettura monolitica a quella dei microservizi in .NET? [chiuso] Test della compatibilità con versioni minori del browser

score 10 · Answer 1

Penso che quello che stai facendo sia morto. I vantaggi dell'uso delle classi, a differenza dei nomi degli attributi, è che puoi ancora convalidare la pagina. Nessun browser moderno si arrabbierà per le classi CSS non definite, e sono banali da usare con jQuery, et al.

score 1 · Answer 2

Le classi sono ok, ma prenderei anche gli attributi dei dati HTML . Spesso, un nome di classe semplicemente non trasmette informazioni sufficienti per abilitare l'hook di javascript appropriato (senza nomi di ID degli elementi hard-coding). Gli attributi dei dati HTML forniscono un altro modo per classificare e selezionare elementi e allegare dati a essi per scopi ausiliari, come i miglioramenti basati su JavaScript.

Con jQuery, gli attributi dei dati HTML sono altrettanto semplici da usare come le classi CSS.

score 0 · Answer 3

Hmmm ... sì e no. Va bene fare cose del genere, ma le classi dovrebbero essere nominate per mostrare ciò che è comune sui dati al loro interno. Se non c'è nulla di comune tra due tag, allora ci sono tutte le possibilità che i requisiti delle classi divergeranno più tardi.

Requisito di esempio:

tutti gli elementi di navigazione saranno bianchi su blu, helvetica con un margine di 1px
tutte le descrizioni dei commenti saranno bianche su blu, arial con un margine di 4px e una spaziatura di 2px

È meglio dare a entrambi una classe di whiteonblue dove

.whiteonblue {
  font-color: white;
  background-color: blue;
}

o per avere codice ripetuto

.navitems {
  font-color: white;
  background-color: blue;
// more css
}

.commentdesc {
  font-color: white;
  background-color: blue;
// more css
}

Io sostengo quest'ultimo. Non c'è connessione tra navitems e commentdescs e quindi la probabilità è che quando uno cambia, l'altro no. Vuoi davvero dover cercare attraverso l'html per la classe giusta, rimuovere la classe, aggiungerne una nuova (whiteonred) prima di andare al CSS in quel punto? Io no.

Allo stesso modo Javascript. Forse vuoi la stessa cosa onclick nel progetto iniziale, ma la probabilità è che se uno cambia, l'altro no. È abbastanza facile dire

$(".navitems, .commentdesc")

Se rispetti questa politica, sospetto che scoprirai che la tua domanda sparirà abbastanza rapidamente, ma dove non funziona, allora quello che stai facendo va bene.