Visualizzazione dei risultati da 1 a 3 su 3

Discussione: Regole css

  1. #1
    Utente di HTML.it
    Registrato dal
    Aug 2016
    Messaggi
    28

    Regole css

    Salve, avrei una domanda semplice da farvi riguardo il scrivere le regole Css. C'è per caso una regola standard che dica quale attributo scrivere prima nei Css oppure ognuno può scriverli nell'ordine che vuole? Parlo delle regole tipo background padding color height etc...

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    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.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Utente di HTML.it
    Registrato dal
    Aug 2016
    Messaggi
    28
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    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.
    Ciao killerworm grazie per avermi chiarito le idee anche su questo argomento. Avevo già studiato qualche link utile e ora ho intenzione di continuare. Grazie mille.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.