Δομή CSS αρχείων

(Υπότιτλος: πως να μετατρέψετε το .css αρχείο σας σε ένα τέρας)

Όταν κάποιος κατασκευάζει .css αρχεία ξεκινάει με μια κενή οθόνη. Το πρόβλημα δεν είναι πως αυτή η οθόνη θα γεμίσει, αλλά πως θα διατηρηθεί απλή κι εύκολο να αλλαχθεί αργότερα. Αυτό σημαίνει ότι ο developer πρέπει να είναι ακριβής στην ονοματοδοσία των divs και των classes. Να κάποιες τεχνικές, οι οποίες είναι χρήσιμες σε εμένα και πιθανόν και για εσάς.

• Πρώτα απ’ όλα χρησιμοποιήστε έναν καλό editor. Ο  Dreamweaver είναι καλός, αλλά προτιμώ τον TopStyle ή τον AceHTML. Λεπτομέρεια: Ο TopStyle συμπεριλαμβάνει και ένα sidebar, το οποίο δείχνει όλα τα χρώματα που έχετε ήδη χρησιμοποιήσει στο .css αρχείο σας, ώστε να τα βρίσκετε εύκολα αργότερα.
• Ξεκινήστε με το βασικό layout και δώστε στα βασικά σας divs ονόματα κατανοητά, που θα σας δείχνουν ακριβώς για τι πρόκειται. Χρησιμοποιήστε τις λέξεις banner, top, wrapper, content, navigation, extras, footer κλπ. αντί των stripe, left-column, right-column κλπ.
• Χρωματίστε το background των divs αυτών στην αρχή ώστε να βεβαιωθείτε ότι όλα στέκονται στη θέση τους και για να διορθώσετε τυχόν λάθη από την αρχή. Στη συνέχεια, κι αφού όλα πάνε καλά, μπορείτε να αφαιρέσετε τα background χρώματα που χρησιμοποιήσατε.
• Παρόμοια δομικά στοιχεία της σελίδας αντιμετωπίστε τα ως γκρουπ π.χ. φτιάξτε το στυλ για τις φόρμες σας και κρατήστε κάπου αυτά τα στυλ όλα μαζί.
• Σχολιάστε όλα αυτά τα παρόμοια δομικά στοιχεία.
• Μη φτιάχνετε γενικά γκρουπ για το typography σας. Κάθε περιοχή του site σας έχει τις δικές της απαιτήσεις. Είναι ευκολότερο να δουλέψεις με το
  #extras h1{
font-family: Georgia, sans-serif;
...
}
  αντί με το πολύ γενικό
  h1{
font-family: Georgia, sans-serif;
...
}
  το οποίο μάλλον θα το αλλάξετε στη συνέχεια για κάτι άλλο.
• Προσθέστε ένα δεύτερο .css αρχείο για περιοχές του site σας εντελώς διαφορετικές ματαξύ τους. Είναι πιο εύκολο να δουλεύεις με περισσότερα από ένα .css αρχεία. Ωστόσο, πάνω από τρία .css αρχεία μπορεί αντί να βοηθήσουν, να περιπλέξουν την κατάσταση πάρα πολύ.
• Μην ξεχνάτε να περνάτε από validation τα .css αρχεία σας κάθε λίγο.
• Και για το τέλος: μην παραλείπετε να διορθώνετε λάθη την ώρα που τα βρίσκετε. Αν τα αφήσετε για αργότερα, το πιο πιθανό είναι να χαθείτε μέσα στη δική σας δουλειά.