Ποιο είναι το στυλ CSS σας;

Μία από τις πιο συγκεχυμένες πτυχές της εργασίας με CSS (Cascading Style Sheets) είναι ότι μπορείτε να γράψετε στυλ με τόσους πολλούς τρόπους. Παρόμοια με τη σύνταξη πεζογραφίας, μόνο και μόνο επειδή κατανοείτε τους βασικούς κανόνες της γραμματικής και της ορθογραφίας δεν σημαίνει ότι έχετε κατακτήσει τη σύνταξη συνοπτικής πεζογραφίας.

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

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

Ακολουθούν πέντε συμβουλές για τη σύνταξη καθαρών, αποτελεσματικών στυλ:

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

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

  Αλλά θα ήταν πιο αποτελεσματικό να ορίσετε τόσο το χρώμα όσο και την οικογένεια γραμματοσειρών με το ίδιο στυλ. Να θυμάστε ότι μπορείτε πάντα να επιστρέψετε και να επεξεργαστείτε ένα στυλ για να προσθέσετε έναν άλλο κανόνα, εάν θέλετε να αλλάξετε τη μορφοποίηση του στυλ.

• Συντομογραφήστε τους δεκαεξαδικούς χρωματικούς κωδικούς. Μπορείτε να ορίσετε χρώματα στο CSS συμπεριλαμβάνοντας ολόκληρο τον δεκαεξαδικό χρωματικό κώδικα. Ωστόσο, όταν χρησιμοποιείτε κωδικούς χρωμάτων που είναι επαναλαμβανόμενοι, πρέπει να συμπεριλάβετε μόνο τους τρεις πρώτους χαρακτήρες. Για παράδειγμα, το #ffffff είναι το ίδιο με το #ffff. και τα δύο θα δημιουργήσουν το λευκό χρώμα.

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

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

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

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

  Και η μετονομασία του στυλ περιλαμβάνει την επιστροφή και την εκ νέου εφαρμογή αυτού του στυλ παντού όπου έχετε μια κόκκινη επικεφαλίδα που θέλετε να γίνει μπλε, κάτι που αναιρεί τη δύναμη των στυλ να κάνουν παγκόσμιες ενημερώσεις. Για να αποφύγετε αυτό το πρόβλημα, δημιουργήστε ονόματα στυλ που αναφέρονται στη θέση ή τη σημασία των στοιχείων, όπως .mainHeadlines ή .sidebarHeadlines.

• * Δοκιμάστε και επικυρώστε τον κωδικό σας. Ακόμη και έμπειροι σχεδιαστές CSS κάνουν λάθη, γι' αυτό το Dreamweaver περιλαμβάνει τόσα πολλά εξαιρετικά εργαλεία για τη δοκιμή και την επικύρωση του κώδικα στις ιστοσελίδες σας. Βεβαιωθείτε ότι έχετε δοκιμάσει το CSS σας για κοινά λάθη.

  Ακολουθούν δύο διαδικτυακές υπηρεσίες δοκιμών που μπορείτε να χρησιμοποιήσετε για να ελέγξετε για σφάλματα στον κώδικα CSS σας. Απλώς εισαγάγετε τη διεύθυνση URL οποιασδήποτε ιστοσελίδας στο Διαδίκτυο στο πεδίο διεύθυνσης σε έναν από αυτούς τους ιστότοπους και κάντε κλικ στο κουμπί Υποβολή για να λάβετε μια αναφορά που δείχνει τυχόν σφάλματα στον κώδικά σας:

  • Η υπηρεσία επικύρωσης W3C CSS

  • XHTML-CSS : Be Valid or Die Learning