css3.gr

Η οργάνωση είναι κάτι που δεν συναντάς συχνά σε σελίδες κώδικα. Όμως είναι από τα σημαντικότερα χαρακτηριστικά, καθώς με ένα σωστά οργανωμένο και semantic αρχείο, οι διαδικασίες επιταχύνονται πάρα πολύ. Αν ένας developer δουλεύει μόνος του, μπορεί να έχει μια δική του λογική, με την οποία είναι οικείος και παραγωγικός. Όταν όμως δουλεύουν πολλοί πάνω στο ίδιο αρχείο κώδικα, τότε είναι αναγκαίο να υπάρχει μια ενιαία, γενικότερη λογική και οργάνωση. Βοηθάει στην γρηγορότερη κατανόηση και συγγραφή κώδικα αλλά και γενικότερα στην επικοινωνία μεταξύ των developer.

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

 

Διαχωρισμός σε Ενότητες

To CSS αρχείο μας για να μην είναι ένα κατεβατό, μπορεί να χωριστεί σε κατηγορίες. Είτε αυτές είναι βάση της θέσης των στοιχείων στη σελίδα μας, είτε είναι βάση των λειτουργιών και του είδους του styling.

Ενότητες βάσει θέσης

Μία σελίδα συνήθως αποτελείται από ένα header, ένα navigation ίσως, το content, κάποια sidebar και το footer. Έτσι ένας πρώτος διαχωρισμός που μου έρχεται είναι ο παρακάτω:

/* Global */ /* Header */ /* Navigation */ /* Content */ /* Right Sidebar */ /* Footer */

Μέσα στα παραπάνω είναι πιθανό να υπάρχουν και υποκατηγορίες:

/* Content */ /* Post */ /* Comments */ /* Right Sidebar */ /* Ads */ /* Links */

Ενότητες βάσει Λειτουργιών

Κάποιοι άλλοι developers πιθανόν να προτιμούν να χωρίζουν το περιεχόμενο του CSS ανάλογα με την κάθε λειτουργία και το είδος του Styling. Αυτό έχει σχέση και με τη σειρά που δουλεύει ο καθένας. Μπορεί να είναι εξίσου οργανωμένο με το προηγούμενο παράδειγμα.

/* Global */ /* Layout */ /* Headers */ /* Lists */ /* Typography */ /* Images, Media */

Και πάλι μπορεί να χρειαστεί να υπάρχουν υποκατηγορίες:

/* Layout */ /* Main Blocks */ /* Sidebar Boxes */

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

Περιεχόμενα

Ο παραπάνω τρόπος διαχωρισμού του περιεχομένου είναι πολύ πρακτικός για μικρά ή απλά αρχεία. Αλλά όσο μεγαλύτερο ή πιο περίπλοκο καταλήγει ένα αρχείο, τότε ακόμα και οι κατηγορίες θα αρχίζουν να σας ζαλίζουν καθώς θα γίνονται πολλές και θα αναπτύσσονται σε πολλά επίπεδα. Ένας τρόπος για να γίνει ευκολότερη η αναζήτηση μέσα στο κείμενο και η κατανόηση της οργάνωσης είναι η δημιουργία περιεχομένων.

Ας πάρουμε το παράδειγμα στο "Ενότητες βάση Θέσης" και ας του προσθέσουμε αριθμούς:

/* 1.0 Global */ /* 2.0 Header */ /* 3.0 Navigation */ /* 4.0 Content */ /* 4.1 Post */ /* 4.2 Comments */ /* 5.0 Right Sidebar */ /* 5.1 Ads */ /* 5.2 Links */ /* 6.0 Footer */

Τώρα μπορούμε στην κορυφή του αρχείου μας να προσθέσουμε τα περιεχόμενα βασιζόμενοι στην ιεραρχία του αρχείου μας:

/* 1.0 Global 2.0 Header 3.0 Navigation 4.0 Content 4.1 Post 4.2 Comments 5.0 Right Sidebar 5.1 Ads 5.2 Links 6.0 Footer */

Νομίζω ότι αυτός ο τρόπος οργάνωσης ενός CSS αρχείου ότι βοηθάει πραγματικά την ομαδική εργασία χωρίς να απαιτεί μεγάλο χρόνο για την δημιουργία του. Για να έχουμε και παραδείγματα, δημιούργησα 3 διαφορετικά αρχεία. Ένα χωρίς ενότητες, ένα με ενότητες, και ένα με ενότητες και περιεχόμενα.