Qual è la ragione per avere parentesi quadre (quadrate) nel nome di una classe di un elemento?

Question

Sono rimasto davvero sorpreso da questa dichiarazione class="[ col-xs-12 col-sm-offset-1 col-sm-5 ]" in un modello bootstrap 3 e io non sono sicuro di quello che è la differenza tra

class="[ col-xs-12 col-sm-offset-1 col-sm-5 ]" 

e

class="col-xs-12 col-sm-offset-1 col-sm-5" 

Potete per favore darmi ulteriori dettagli sul significato di queste parentesi e alcuni casi quando vengono utilizzati?

Answer 1

Questo non è altro che separare visivamente le classi con l'intenzione di raggrupparle.

L'esempio che hai dato a entrambi fa la stessa identica cosa.

Le parentesi sono consentite nell'attributo class e sono tecnicamente valide purché abbiano spazi tra la parentesi e la classe stessa.

Ulteriori informazioni su questa tecnica può essere trovato su csswizardy, e per i posteri, ecco un estratto che spiega come lo usa:

Come funziona

Non c'è duro e veloce regola come e quando iniziare a raggruppare le classi , ma le linee guida che ho impostato per me sono:

Ci deve essere più di un 'set' di classi. Un 'set' deve contenere più di una classe. Questo fondamentalmente solo ringfences nessun gruppo che hanno bisogno, per esempio:

<!-- Only one set. Nothing needs grouping. --> 
<div class="foo foo--bar"> 

<!-- Two sets, but only one class in each. Nothing needs grouping. --> 
<div class="foo bar"> 

<!-- Two sets, one of which contains more than one class. This set needs grouping. --> 
<div class="[ foo foo--bar ] baz"> 

<!-- Two sets, both of which contain more than one class. These sets needs grouping. --> 
<div class="[ foo foo--bar ] [ baz baz--foo ]"> 

Come raggrupparli possono essere del tutto la vostra scelta, il concetto qui solo si occupa di il fatto che stiamo raggruppando le cose.

Answer 2

in fondo è lì solo per rendere il codice in qualche modo meglioleggibile.

Secondo: Which characters are valid in CSS class names/selectors?

~ ! @ $ %^& * () + = , ./' ; : " ? > < [ ] \ { } | ` # 

non sono validi solo come selettore di classe ma solo per il suo utilizzo in l'attributo class è valida. Se vuoi ancora aggiungere uno dei caratteri sopra per il selettore di classe, devi sfuggire a esso utilizzando \, che potrebbe sembrare in qualche modo: \[ per il carattere [.

Mi piace molto la risposta da xengravity anche più della mia - ancora la stessa idea di leggibilità ma con maggiori dettagli perché e anche con un riferimento su come utilizzare.