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