
Originariamente inviata da
KillerWorm
Ciao, solitamente si cerca di organizzare l'ordine delle proprietà raggruppandole secondo la tipologia, ma non esistono specifiche standard in merito. In generale ognuno fa come meglio gli garba.
Qui c'è un articolo interessante:
https://css-tricks.com/poll-results-...ss-properties/
E' chiaro che in un discorso più ampio possono comunque entrare in gioco diversi fattori. Immagina ad esempio di lavorare in un team dove più persone devono poter mettere mano, testare, debuggare, e compiere altre azioni sullo stesso codice; è meglio, in tal caso, che si siano definite, a priori, delle linee guida anche per stabilire come impostare il codice, per cui organizzarlo in un certo modo piuttosto che in un altro può fare la differenza a livello produttivo.
Ci sono inoltre dei casi in cui delle regole vanno a sovrascriverne altre (parliamo quindi di override, di supporto delle regole, di specificità, ecc.), per cui conta l'ordine in cui queste vengono lette, perché quelle lette per ultime, in linea di massima, hanno priorità sulle precedenti.
Un semplice esempio:
codice:
<!DOCTYPE HTML>
<html>
<head>
<title>Esempio</title>
<meta charset="utf-8">
<style type="text/css">
div{
width: 500px;
height: 200px;
font-size: 40px;
text-align: center;
border: solid blue; /* definizione generale del bordo - sintassi contratta */
border-width: 2px 0; /* spessore - solo bordi sopra e sotto */
background: orange; /* fallback per browser che non supportano il gradiente */
background: linear-gradient(red, yellow); /* gradiente CSS3 */
color: rgb(255, 255, 255); /* fallback per browser che non supportano la notazione rgba */
color: rgba(255, 255, 255, .5);
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore</div>
</body>
</html>
In questo caso particolare vediamo che non sarebbe corretto invertire proprietà generali con proprietà specifiche (vedi
border e
border-width) perché quella specifica sarebbe altrimenti sovrascritta da quella generale; in vari casi ci sono dei fallback che servono a garantire una formattazione adeguata anche per browser che non supportano particolari funzioni e sintassi (ad esempio browser datati) per cui, invertendo le regole, la formattazione verrebbe degradata anche per i browser che invece le supportano.
E' giusto un esempio ma potrebbero esserci tanti altri svariati casi.
Se ti interessa approfondire lo studio dei CSS posso consigliarti di dare uno sguardo ai
link utili css (discussione in evidenza) se già non l'hai fatto. Tra i primi capitoli puoi trovare vari riferimenti a guide di base e a concetti fondamentali per lo sviluppo del CSS, e tanto altro materiale interessante.