Οι καλύτερες τεχνικές οργάνωσης κώδικα CSS

Όσο περισσότερο βασιζόμαστε στα CSS, τόσο μεγαλύτερα και σύνθετα αρχεία προκύπτουν. Είναι απαραίτητο να σχεδιάζουμε και να οργανώνουμε τα CSS μας για να έχουμε ένα καθαρό και εύκολο στη συντήρηση website. Υπάρχουν αρκετοί τρόποι για να οργανώσουμε των κώδικα των CSS αρχείων, αλλά οι ακόλουθοι είναι οι καλύτεροι !

Δημιουργήστε σχόλια στα CSS.

Με τα σχόλια στον κώδικα διευκολύνετε την αναζήτηση της πληροφορίας ή της εντολής που ψάχνετε.

Σχόλια με νόημα :

Τελευταία επεξεργασία – Αυτή η πληροφορία μπορεί να δώσει στα γρήγορα πληροφορίες στον προγραμματιστή πότε πραγματοποιήθηκαν οι τελευταίες αλλαγές στο αρχείο.

/* Πληροφορίες αρχείου
Ενημέρωση : Παρασκευή 2 Απριλίου 2010
Συντάκτης : Μέριανος Νίκος
Ενημερώσεις : Προσθήκη νέας ιδιότητας για το Forum
--------------------------------------------------*/

Αναφορές – Τα σχόλια μπορούν να χρησιμοποιηθούν και ως σύντομες αναφορές στο βασικό κορμό σχεδίασης της ιστοσελίδας

/* Χρώματα
Χρώμα φόντου ιστοσελίδας : #FFF2F2
Χρώμα γραμματοσειράς : #232323
Σύνδεσμοι : #776666
*/

Οργάνωση – Χρησιμοποιήστε τα σχόλια για να οργανώσετε τα διάφορα τμήματα της σελίδας μέσα στο αρχείο μορφοποίησης

/* =ΕΠΙΚΕΦΑΛΊΔΑ
--------------------------------------------------*/
......... κώδικας CSS ......... 

/* = ΑΡΙΣΤΕΡΉ ΣΤΉΛΗ
--------------------------------------------------*/
......... κώδικας CSS .........

Υπενθυμίσεις και σημειώσεις – αφήνοντας σημειώσεις και σχόλια στον κώδικα σας μπορείτε να βοηθήσετε τον εαυτό σας και άλλους προγραμματιστές να αποφύγετε τη σύγχυση αργότερα

/* Το πλάτος αντικαθιστάτε για τον Internet Explorer 6 στο αρχείο cssForIE.css */
div
{
	width: 150px;
}

Ορίστε γενικούς κανόνες και τις βασικές κλάσεις στην αρχή του CSS αρχείου σας

Ορίστε τη μορφοποίηση για τα γενικά στοιχεία της HTML στην αρχή του αρχείου σας.

body
{
	background: #FFF;
	font: arial, sans-serif 75%;
}

h1
{
	font-size: 1.2em;
	color: #000;
}

h2
{
	font-size: 1em;
	color: #000;
}

img
{
	border: 0px;
}

και στη συνέχεια γράψτε τις κλάσεις που θα χρησιμοποιείτε περισσότερο μέσα στις σελίδες σας.

.hide
{
	display: none;
}

.fl
{
	float: left;
}

.fr
{
	float: right;
}

Γράψτε τους κανόνες στο CSS με την ίδια σειρά που γράφετε την HTML.

H σειρά που γράφετε την HTML θα πρέπει να συμβαδίζει με το CSS. Τα αρχεία CSS μπορεί να μεγαλώσουν αρκετά και να έχουν πάρα πολλές εντολές με αποτέλεσμα να είναι δύσκολο να εντοπίσετε κάποιο τμήμα μέσα στο αρχείο σας. Δημιουργώντας μια βασική σχέση στη δομή της HTML και του αρχείου CSS μπορείτε να εντοπίζετε ποιο εύκολα τα τμήματα του CSS κώδικα που ψάχνετε.

Να μάθετε πότε να χρησιμοποιείτε τα ονόματα στοιχείων της HTML, ή τις ιδιότητες id και class.

Η χρήση του σωστού επιλογέα για τα CSS σημαίνει πως το τελικό αρχείο θα είναι σημαντικά μικρότερο.

• Στοιχεία της HTML : Τα στοιχεία όπως το body, p, h1 θα πρέπει να χρησιμοποιούνται για να ορίσετε γενικούς κανόνες
• Οι ιδιότητα id : χρησιμοποιείτε για να προσδιορίσει μονοσήμαντα ένα στοιχείο της html και μπορεί να χρησιμοποιηθεί μόνο μια φορά μέσα σε κάθε αρχείο. Η ιδιότητα id θα πρέπει να χρησιμοποιηθεί για να μορφοποιεί σημαντικά αντικείμενα της δομής ενός εγγράφου όπως είναι οι επικεφαλίδες, τα υποσέλιδα κα.
• Οι ιδιότητα class : αυτή η ιδιότητα μπορεί να χρησιμοποιηθεί με κάθε στοιχείο της HTML.

Αν χρησιμοποιείτε πάρα πολλά id και classes μπορεί να παραφορτώσετε τα αρχεία HTML και CSS χωρίς να υπάρχει λόγος.

Ορίστε κατανοητά ονόματα στις ιδιότητες class και id

Μην ονομάζετε τις classes και τα id με τα ονόματα από τα χρώματα που χρησιμοποιείτε μέσα σε αυτή ή τη θέση στην οποία ενεργούν επειδή αυτά μπορούν να αλλάξουν κάποια στιγμή. Προσπαθήστε να ορίσετε ονόματα σχετικά με την ιδιότητα κάθε κανόνα μορφοποίησης που θα παραμένουν σταθερά σε μόνιμη βάση. Επίσης να χρησιμοποιείτε παύλες αντί για χαρακτήρες υπογράμμισης, επειδή κάποιοι παλαιότεροι περιηγητές δεν μπορούν να τους κατανοήσουν.

Να χρησιμοποιείτε ένα κοινό σύστημα απόδοσης ονομάτων για τις class και τα id. Θα σας εξοικονομήσει πολύ χρόνο και θα κάνει τα πράγματα ποιο κατανοητά κατά το χρόνο υλοποίησης, επεξεργασίας και αποσφαλμάτωσης.

Επωφεληθείτε από την κληρονομικότητα

Μερικές εντολές CSS κληρονομούν τις εντολές των γονέων τους ενώ κάποιες άλλε όχι. Γενικότερα, όταν μιλάμε για της εντολές που είναι σχετικές με το κείμενο (color, font-size, κ.α.), κληρονομούνται από τα στοιχεία που είναι απόγονοι, ενώ οι εντολές που έχουν να κάνουν με τη δομή του εγγράφου (float, width, κα.) δεν κληρονομούνται.

Ομαδοποιήστε τους επιλογείς που έχουν κοινές δηλώσεις

Μπορείτε να αποφύγετε τον επαναλαμβανόμενο ορισμό εντολών για τα στοιχεία που έχουν τον ίδιο αριθμό εντολών μορφοποίησης με την ομαδοποίηση των επιλογέων. Για παράδειγμα :

h1, h2, h3
{
	color: black;
	padding: .2em;
}

Περισσότερα για τον CorfuGmr

Όλα τα άρθρα

CorfuGmr

Ονομάζομαι Νίκος και ασχολούμαι με το internet και την κατασκευή ιστοσελίδων από το 1998. Σήμερα, μετά από 12 χρόνια γεμάτα με ενημέρωση, εκπαίδευση και εξάσκηση έχω ανεβάσει σε ένα άλλο επίπεδο τις γνώσεις μου και τις τεχνικές μου. Στα άρθρα μου προσπαθώ να σας δείξω τα μικρά, αλλά σημαντικά πράγματα που με έχουν ανεβάσει σε αυτό το επίπεδο.

Σχόλια

cn92

10 Απριλίου 2010

Πολύ χρήσιμο άρθρο, επίσης, επειδή πολλές φορές οι γραμμές του κώδικα css είναι πολλές, για εξοικονόμηση χώρου και πιο εύκολη ανάγνωση μπορούμε να γράφουμε τις ιδιότητες σε μία γραμμή.

πχ

#main { font:12px Verdana; text-decoration:none; border:none; float:eft; … }

Οπότε αμέσως οι 7 γραμμές έγιναν 1!

Αφήστε ένα σχόλιο

RSS για τα σχόλια σε αυτό το άρθρο. TrackBack URL