Τα Cascading Style Sheets έχουν γίνει ο τυπικός τρόπος για το στυλ και τη διάταξη ιστοτόπων. Οι σχεδιαστές χρησιμοποιούν φύλλα στυλ για να πείτε σε ένα πρόγραμμα περιήγησης πώς πρέπει να εμφανίζεται ένας ιστότοπος από άποψη εμφάνισης και αίσθησης, καλύπτοντας παράγοντες όπως το χρώμα, το διάστημα, τις γραμματοσειρές και πολλά άλλα.
Τα στυλ CSS αναπτύσσονται με δύο τρόπους:
- Inline - εντός της κωδικοποίησης της ίδιας της ιστοσελίδας, σε ατομική βάση, από στοιχείο σε στοιχείο
- Σε ένα αυτόνομο έγγραφο CSS, στο οποίο είναι συνδεδεμένος ο ιστότοπος
Βέλτιστες πρακτικές για CSS
Οι «βέλτιστες πρακτικές» είναι οι μέθοδοι σχεδιασμού και δημιουργίας ιστοσελίδων που έχουν αποδειχθεί ότι είναι οι πιο αποτελεσματικές και έχουν τη μεγαλύτερη απόδοση για τη σχετική εργασία. Ακολουθώντας τους στο CSS στο σχεδιασμό ιστοσελίδων βοηθά τους ιστότοπους να φαίνονται και να λειτουργούν όσο το δυνατόν καλύτερα. Έχουν εξελιχθεί με τα χρόνια μαζί με άλλες γλώσσες και τεχνολογίες ιστού, και το αυτόνομο φύλλο στυλ CSS έχει γίνει η προτιμώμενη μέθοδος χρήσης.
Ακολουθώντας τις βέλτιστες πρακτικές για το CSS μπορείτε να βελτιώσετε τον ιστότοπό σας με διάφορους τρόπους:
- Διαχωρίζει το περιεχόμενο από το σχεδιασμό: Ένας από τους κύριους στόχους του CSS είναι η κατάργηση στοιχείων σχεδίασης από HTML και η τοποθέτησή τους σε άλλη τοποθεσία για τη συντήρηση του σχεδιαστή. Αυτή η πρακτική χρησιμεύει επίσης στο διαχωρισμό των σχεδιαστών από τους προγραμματιστές, ώστε ο καθένας να μπορεί να επικεντρωθεί στους τομείς εμπειρογνωμοσύνης τους. Ο σχεδιαστής δεν χρειάζεται να είναι προγραμματιστής για να διατηρήσει την εμφάνιση ενός ιστότοπου.
- Κάνει τη συντήρηση εύκολη: Ένα από τα πιο αγνοημένα στοιχεία του web design είναι η συντήρηση. Σε αντίθεση με τα έντυπα υλικά, ένας ιστότοπος δεν είναι ποτέ "ένας και τελειωμένος". Το περιεχόμενο, ο σχεδιασμός και η λειτουργία μπορούν και πρέπει να εξελίσσονται με την πάροδο του χρόνου. Το να έχετε το CSS σε κεντρικό σημείο, αντί να πασπαλίζετε σε ολόκληρο τον ιστότοπο, καθιστά τα πράγματα πολύ πιο εύκολα στη συντήρηση.
- Διατηρεί τον ιστότοπό σας προσβάσιμο: Η χρήση στυλ CSS βοηθά τις μηχανές αναζήτησης και τα άτομα με ειδικές ανάγκες να αλληλεπιδρούν με τον ιστότοπό σας.
- Διατηρεί τον ιστότοπό σας ενημερωμένο περισσότερο: Χρησιμοποιώντας τις βέλτιστες πρακτικές με το CSS, συμμορφώνεστε με πρότυπα που έχουν αποδειχθεί σταθερά αλλά αρκετά ευέλικτα για να προσαρμόσετε τις αλλαγές στο περιβάλλον σχεδιασμού ιστοσελίδων.
Τα ενσωματωμένα στυλ δεν είναι η καλύτερη πρακτική
Τα ενσωματωμένα στυλ, ενώ έχουν σκοπό, γενικά δεν είναι ο καλύτερος τρόπος για να διατηρήσετε τον ιστότοπό σας. Αντιτίθενται σε κάθε μια από τις βέλτιστες πρακτικές:
- Τα ενσωματωμένα στυλ δεν διαχωρίζουν το περιεχόμενο από το σχεδιασμό: Τα ενσωματωμένα στυλ είναι ακριβώς τα ίδια με την ενσωματωμένη γραμματοσειρά και άλλες αδέξιες ετικέτες σχεδίασης που αντιτίθενται οι σύγχρονοι προγραμματιστές. Τα στυλ επηρεάζουν μόνο τα συγκεκριμένα, μεμονωμένα στοιχεία στα οποία εφαρμόζονται. Αν και αυτή η προσέγγιση μπορεί να σας δώσει πιο λεπτομερή έλεγχο, καθιστά επίσης δυσκολότερες άλλες πτυχές του σχεδιασμού και της ανάπτυξης - όπως η συνέπεια -.
- Τα ενσωματωμένα στυλ προκαλούν πονοκεφάλους συντήρησης: Όταν εργάζεστε με φύλλα στυλ, είναι δύσκολο να μάθετε πού ορίζεται ένα στυλ. Όταν ασχολείστε με ένα μείγμα ενσωματωμένο, ενσωματωμένο και εξωτερικό στυλ, έχετε πολλές τοποθεσίες για έλεγχο. Εάν εργάζεστε σε μια ομάδα σχεδιασμού ιστοσελίδων ή πρέπει να επανασχεδιάσετε ή να διατηρήσετε έναν ιστότοπο που έχει κατασκευαστεί από κάποιον άλλο, τότε θα έχετε ακόμη μεγαλύτερο πρόβλημα. Μόλις βρείτε το στυλ και το αλλάξετε, θα πρέπει να το κάνετε σε κάθε στοιχείο σε κάθε σελίδα όπου έχει τοποθετηθεί. Αυτό αυξάνει τον χρόνο και τους προϋπολογισμούς εργασίας αστρονομικά.
- Τα ενσωματωμένα στυλ δεν είναι τόσο προσβάσιμα: Ενώ ένας σύγχρονος αναγνώστης οθόνης ή μια άλλη βοηθητική συσκευή μπορεί να είναι σε θέση να χειριστεί ενσωματωμένα χαρακτηριστικά και ετικέτες αποτελεσματικά, ορισμένες παλαιότερες συσκευές δεν μπορούν, κάτι που μπορεί να οδηγήσει σε έναν παράξενα εμφανιζόμενο ιστό σελίδες. Επιπλέον χαρακτήρες και κείμενο μπορούν να επηρεάσουν τον τρόπο προβολής της σελίδας σας από ένα ρομπότ μηχανών αναζήτησης, οπότε η σελίδα σας δεν λειτουργεί τόσο καλά όσον αφορά τη βελτιστοποίηση μηχανών αναζήτησης.
- Τα ενσωματωμένα στυλ κάνουν τις σελίδες σας μεγαλύτερες: Εάν θέλετε κάθε παράγραφος στον ιστότοπό σας να εμφανίζεται με έναν συγκεκριμένο τρόπο, μπορείτε να την κάνετε μία φορά με έξι γραμμές κώδικα σε ένα εξωτερικό φύλλο στυλ. Εάν το κάνετε με ενσωματωμένα στυλ, ωστόσο, πρέπει να προσθέσετε αυτά τα στυλ σε κάθε παράγραφο του ιστότοπού σας. Εάν έχετε πέντε γραμμές CSS, αυτές είναι πέντε γραμμές πολλαπλασιασμένες με κάθε παράγραφο στον ιστότοπό σας. Αυτό το εύρος ζώνης και ο χρόνος φόρτωσης μπορούν να αυξηθούν βιαστικά.
Η εναλλακτική λύση για τα ενσωματωμένα στυλ είναι εξωτερικά φύλλα στυλ
Αντί να χρησιμοποιείτε ενσωματωμένα στυλ, χρησιμοποιήστε εξωτερικά φύλλα στυλ. Σας δίνουν όλα τα οφέλη των βέλτιστων πρακτικών CSS και είναι εύχρηστα. Με αυτόν τον τρόπο, όλα τα στυλ που χρησιμοποιούνται στον ιστότοπό σας ζουν σε ένα ξεχωριστό έγγραφο το οποίο στη συνέχεια συνδέεται με ένα έγγραφο ιστού με μία μόνο γραμμή κώδικα. Εξωτερικά φύλλα στυλ επηρεάζουν κάθε έγγραφο στο οποίο επισυνάπτονται. Εάν διαθέτετε έναν ιστότοπο 20 σελίδων στον οποίο κάθε σελίδα χρησιμοποιεί το ίδιο φύλλο στυλ - που είναι συνήθως έτσι ολοκληρώθηκε - μπορείτε να κάνετε μια αλλαγή σε κάθε μία από αυτές τις σελίδες απλώς με την επεξεργασία αυτών των στυλ μία, σε μία θέση. Η αλλαγή στυλ σε ένα σημείο είναι πιο βολική από την αναζήτηση αυτής της κωδικοποίησης σε κάθε σελίδα του ιστότοπού σας. Αυτή η ευελιξία καθιστά τη μακροπρόθεσμη διαχείριση ιστότοπων πολύ πιο εύκολη.