I CSS (Cascading Style Sheets) consentono di definire l'aspetto di un elemento agganciandosi agli attributi applicati a quell'elemento. Questi attributi possono essere sia ID che classe e, come tutti gli attributi, aggiungono informazioni utili agli elementi a cui sono associati.
A seconda dell'elemento che si aggiunge a un elemento, è possibile scrivere un selettore CSS per applicare gli stili visivi necessari per ottenere l'aspetto e l'aspetto di quell'elemento e del sito Web nel suo complesso.
Mentre gli ID o le classi funzionano allo scopo di collegarli con le regole CSS, i moderni metodi di progettazione Web favoriscono le classi rispetto agli ID, in parte, perché sono meno specifici e più facili da utilizzare nel complesso. Sì, troverete ancora molti siti che utilizzano gli ID, ma tali attributi vengono applicati con minore parsimonia rispetto al passato, mentre le classi hanno occupato le moderne pagine Web.
Classi singole o multiple in CSS?
Nella maggior parte dei casi assegneresti un singolo attributo di classe a un elemento, ma in realtà non sei limitato a una sola classe come con gli ID. Mentre un elemento può avere solo un singolo attributo ID, puoi assolutamente dare un elemento a più classi e, in alcuni casi, farlo renderà la tua pagina più facile da stilare e molto più flessibile!
Se devi assegnare più classi a un elemento, puoi aggiungere le classi aggiuntive e semplicemente separarle con uno spazio nel tuo attributo.
Ad esempio, questo paragrafo ha tre classi:
Questo sarebbe il testo del paragrafo
Questo imposta le seguenti tre classi sul tag del paragrafo:
- Pullquote
- In primo piano
- Sinistra
Notare gli spazi tra ciascuno di questi valori di classe. Questi spazi sono ciò che li definisce come classi individuali diverse. Questo è anche il motivo per cui i nomi delle classi non possono contenere spazi, perché così facendo li impostare come classi separate. Ad esempio, se hai usato "pullquote-featured-left" senza uno spazio, sarebbe un valore di classe, ma l'esempio sopra, in cui queste tre parole sono separate da uno spazio, le imposta come valori individuali. È importante comprendere questo concetto quando decidi quali valori di classe utilizzare nelle tue pagine web.
Una volta che hai i valori della tua classe in HTML, puoi quindi assegnarli come classi nel tuo CSS e applicare gli stili che vorresti aggiungere. Per esempio.
.pullquote {…}.In primo piano { … }p.left {…}
In questi esempi, le coppie di dichiarazioni e valori CSS si trovano all'interno delle parentesi graffe, che è il modo in cui tali stili verrebbero applicati al selettore appropriato.
Se imposti una classe su un elemento specifico (ad esempio,p.left), puoi ancora usarlo come parte di un elenco di classi; tuttavia, tieni presente che influirà solo sugli elementi specificati nel CSS. In altre parole, il p.left lo stile si applica solo ai paragrafi con questa classe poiché il tuo selettore in realtà sta dicendo di applicarlo a "paragrafi con un valore di classe di" sinistra "". Al contrario, gli altri due selettori nell'esempio non specificano un determinato elemento, quindi si applicano a qualsiasi elemento che utilizza tali valori di classe.
Vantaggi delle classi multiple
Più classi possono semplificare l'aggiunta di effetti speciali agli elementi senza dover creare uno stile completamente nuovo per quell'elemento.
Ad esempio, potresti avere la possibilità di far scorrere rapidamente gli elementi a sinistra oa destra. Potresti scrivere due classi
sinistra e
destra con giusto
float: sinistra; e
float: right; in loro. Quindi, ogni volta che avevi un elemento che devi spostare a sinistra, devi semplicemente aggiungere la classe "left" alla sua lista di classi.
C'è una linea sottile per camminare qui, tuttavia. Ricorda che gli standard web dettano la separazione tra stile e struttura. La struttura viene gestita tramite HTML mentre lo stile è in CSS. Se il tuo documento HTML è pieno di elementi che hanno nomi di classe come "rosso" o "sinistra", che sono nomi che indicano come gli elementi dovrebbero apparire piuttosto che come sono, stai attraversando quella linea tra struttura e stile. Cerco di limitare il più possibile i miei nomi di classi non semantiche per questo motivo.
Classi multiple, semantica e JavaScript
Un altro vantaggio dell'utilizzo di più classi è che offre molte più possibilità di interattività.
È possibile applicare nuove classi a elementi esistenti utilizzando JavaScript senza rimuovere alcuna delle classi iniziali. Puoi anche usare le classi per definire la semantica di un elemento. Ciò significa che è possibile aggiungere classi aggiuntive per definire cosa significhi semanticamente quell'elemento. Ecco come funzionano i microformati.
Svantaggi delle classi multiple
Il più grande svantaggio nell'usare più classi sui tuoi elementi è che può renderli un po 'ingombranti da guardare e gestire nel tempo. Potrebbe diventare difficile determinare quali stili influenzano un elemento e se uno qualsiasi degli script ha un impatto su di esso. Molti dei framework disponibili oggi, come Bootstrap, fanno un uso pesante di elementi con più classi. Quel codice può sfuggire di mano e lavorare duramente molto velocemente se non si presta attenzione.
Quando si utilizzano più classi, si rischia anche che lo stile di una classe prevalga su quello di un'altra, anche se non lo si intendeva. Questo quindi può rendere difficile capire perché i tuoi stili non vengono applicati anche quando sembra che dovrebbero. Devi essere consapevole della specificità, anche con gli attributi applicati a quell'unico elemento!
Utilizzando uno strumento come gli strumenti per i webmaster di Google Chrome, puoi vedere più facilmente come le tue classi influenzano i tuoi stili ed evitare questo problema di stili e attributi in conflitto.
