Questo sito utilizza cookies solo per scopi di autenticazione sul sito e nient'altro. Nessuna informazione personale viene tracciata. Leggi l'informativa sui cookies.
Salve.
Dopo aver dovuto fare delle piccole modifiche a qualche sito in html di mia creazione, mi accorgo che urge la necessità di definire un ordinamento di tutte le voci presenti nel file .css, altrimenti diventa macchinoso dover trovare quella determinata classe o div che sia da dover modificare.
Voi come fate?
E' meglio mettere prima tutte le classi, poi i tag, i div ecc.?
Oppure tutto in ordine alfabetico?
O ancora inserire nell'ordine in cui compaiono nel sito?
Altre soluzioni?
Grazie
se il file CSS non è troppo grande, io divido in sezioni il file attraverso i commenti, in genere le mie sezioni sono:
/* ----- PRINCIPALE ----- */
ci metto il body, gli a:link con relative pseudo classi, e tutte le caratteristiche fondamentali (tipo img ecc)
/* ----- STRUTTURA ----- */
qui inserisco le classi e gli ID che caratterizzano la struttra della pagina, quindi l'header, il corpo centrale (con relative colonne), il footer ecc.
/* ----- CLASSI E ID ----- */
tutte le altre classi particolare che mi servono per arricchire il sito, per esempio se vogli dare dei colori diversi ad alcuni link, e altro.
tutte le sezioni le divido con sottosezioni che chiamo con commenti senza caratteri strani tipo i trattini delle macrosezioni.
ecco come appare la sezione di struttura di un sito molto semplice che ho fatto un po' di tempo fa:
Codice sorgente - presumibilmente Plain Text
/* -----STRUTTURA ----- */
/* TOP, logo */
#top {
background-color: #000000;
background-image: none;
background-repeat: no-repeat;
color: #ffffff;
font-family: sans-serif;
font-size: 14px;
padding: 5px 10px 5px 10px;
margin: 0px;
width: 730px;
height: 150px;
text-align: left;
}
#top a:link, #top a:visited, #top a:active {
text-decoration: none;
border: 1px solid #000000;
background-color: #000000;
}
#top a:hover {
text-decoration: none;
border: 1px solid #000000;
background-color: #000000;
}
/* TOPLINKS, link al forum, newsletter, contact us ecc. */
#toplinks {
color: #ffffff;
font-size: 11px;
font-family: arial;
background-color: #262626;
text-decoration: none;
padding: 2px 10px 2px 10px;
margin: 0px;
width: 730px;
text-align: left;
vertical-align: middle;
}
#toplinks a:link, #top a:visited, #top a:active {
color: #ffffff;
text-decoration: none;
}
#toplinks a:hover {
color: #0A4F4F;
text-decoration: none;
}
/* CORPO, contenuti delle pagine */
#corpo {
background-color: #FFFFFF;
background-image: none;
text-align: left;
font-size: 12px;
color: #232323;
padding: 10px 10px 15px 10px;
margin: 0px;
width: 750px;
}
/* FOOTER, il footer: crediti alla gameforge, al designer ecc. */
se invece devo costruire dei siti più complessi con centinaia di classi ed id, creo 3 o 4 file .cc che corrispondono alle sezioni di cui parlavo prima =)
