Η εμφάνιση και η αίσθηση ή "στυλ" μιας ιστοσελίδας υπαγορεύονται από το CSS (Cascading Style Sheets). Αυτό είναι ένα αρχείο που θα προσθέσετε στον κατάλογο του ιστοτόπου σας που θα περιέχει τους διάφορους κανόνες CSS που δημιουργούν τον οπτικό σχεδιασμό και τη διάταξη των σελίδων σας.
Ενώ οι ιστότοποι μπορούν να χρησιμοποιούν και συχνά κάνουν χρήση πολλών φύλλων στυλ, δεν είναι απαραίτητο να το κάνουν. Μπορείτε να τοποθετήσετε όλους τους κανόνες CSS σε ένα αρχείο και υπάρχουν πραγματικά οφέλη για αυτό, συμπεριλαμβανομένου του γρηγορότερου χρόνου φόρτωσης και της απόδοσης των σελίδων, καθώς δεν χρειάζονται πολλά αρχεία. Ενώ είναι πολύ μεγάλοι, οι επιχειρηματικοί ιστότοποι ενδέχεται να χρειάζονται ξεχωριστά φύλλα στυλ κατά περιόδους, πολλές μικρές έως μεσαίες τοποθεσίες μπορούν να κάνουν τέλεια πρόστιμο με ένα μόνο αρχείο με όλους τους κανόνες που χρειάζονται οι σελίδες σας. Αυτό προκαλεί την ερώτηση "Τι πρέπει να ονομάσω αυτό το αρχείο CSS"; "
Ονοματοδοσία Βασικά στοιχεία της Σύμβασης
Όταν δημιουργείτε ένα εξωτερικό φύλλο στυλ για τις ιστοσελίδες σας, θα πρέπει να ονομάσετε το αρχείο ακολουθώντας παρόμοιες συμβάσεις ονομασίας για τα αρχεία HTML.
Μην χρησιμοποιείτε ειδικούς χαρακτήρες
Θα πρέπει να χρησιμοποιείτε μόνο τα γράμματα a-z, αριθμούς 0-9, υπογράμμιση (_) και παύλες (-) στα ονόματα αρχείων CSS. Ενώ το σύστημα αρχείων σας μπορεί να σας επιτρέψει να δημιουργήσετε αρχεία με άλλους χαρακτήρες σε αυτά, το λειτουργικό σύστημα του διακομιστή σας ενδέχεται να έχει προβλήματα με ειδικούς χαρακτήρες. Είστε ασφαλέστεροι χρησιμοποιώντας μόνο τους χαρακτήρες που αναφέρονται εδώ. Εξάλλου, ακόμη και αν ο διακομιστής σας επιτρέπει τη χρήση ειδικών χαρακτήρων, αυτό μπορεί να μην συμβαίνει εάν αποφασίσετε να μετακινηθείτε σε παρόχους φιλοξενίας στο μέλλον.
Μην χρησιμοποιείτε κανένα χώρο
Όπως και με τους ειδικούς χαρακτήρες, τα κενά μπορούν να προκαλέσουν προβλήματα στο διακομιστή ιστού σας. Είναι καλή ιδέα να τα αποφύγετε στα ονόματα των αρχείων σας - πρέπει ακόμη να κάνετε ένα σημείο για να ονομάσετε αρχεία όπως τα αρχεία PDF χρησιμοποιώντας αυτές τις ίδιες συμβάσεις, μόνο σε περίπτωση που θα χρειαστεί ποτέ να τα προσθέσετε σε έναν ιστότοπο. Εάν αισθάνεστε έντονα ότι χρειάζεστε χώρο για να κάνετε το όνομα του αρχείου πιο εύκολο να το διαβάσετε, επιλέξτε αντί για παύλες ή υπογράμμιση. Για παράδειγμα, αντί να χρησιμοποιήσετε "αυτό είναι το αρχείο.pdf" χρησιμοποιήστε "this-is-the-file.pdf".
Το όνομα αρχείου πρέπει να ξεκινάει με μια επιστολή
Ενώ αυτό δεν είναι απόλυτη απαίτηση, ορισμένα συστήματα έχουν πρόβλημα με ονόματα αρχείων που δεν ξεκινούν με γράμμα. Για παράδειγμα, εάν επιλέξετε να ξεκινήσετε το αρχείο σας με χαρακτήρα, αυτό μπορεί να προκαλέσει προβλήματα στη γραμμή.
Χρησιμοποιήστε όλες τις κατώτερες θήκες
Αν και αυτό δεν είναι απαραίτητο για ένα όνομα αρχείου, είναι καλή ιδέα, καθώς μερικοί διακομιστές ιστού κάνουν διάκριση πεζών-κεφαλαίων και αν ξεχάσετε και αναφέρετε το αρχείο σε διαφορετική περίπτωση, δεν θα φορτωθεί. Η χρήση πεζών χαρακτήρων για κάθε όνομα αρχείου είναι πάντα ένας έξυπνος τρόπος για να προχωρήσετε. Στην πραγματικότητα, πολλοί νέοι σχεδιαστές ιστοσελίδων δυσκολεύονται να θυμούνται να το κάνουν αυτό - η προεπιλεγμένη ενέργεια τους όταν ονομάζουν ένα αρχείο είναι να κεφαλαιοποιήσουν τον πρώτο χαρακτήρα του ονόματος. Αποφύγετε αυτό και πάρτε τη συνήθεια με πεζούς χαρακτήρες μόνο.
Διατηρήστε το όνομα αρχείου όσο το δυνατόν πιο σύντομο
Ενώ υπάρχει το όριο του μεγέθους του ονόματος αρχείου στα περισσότερα λειτουργικά συστήματα, είναι πολύ μεγαλύτερο από το λογικό για ένα όνομα αρχείου CSS. Ένας καλός κανόνας δεν είναι περισσότερος από 20 χαρακτήρες για το όνομα του αρχείου που δεν περιλαμβάνει την επέκταση. Ρεαλιστικά, οτιδήποτε πολύ μεγαλύτερο από αυτό είναι δύσκολο να εργαστείς και να συνδεθείς ούτως ή άλλως.
Το πιο σημαντικό μέρος του ονόματος αρχείου CSS
Το πιο σημαντικό μέρος του ονόματος αρχείου CSS δεν είναι το ίδιο το όνομα αρχείου, αλλά η επέκταση. Οι επεκτάσεις δεν απαιτούνται στα συστήματα Macintosh και Linux, αλλά είναι καλή ιδέα να συμπεριληφθεί κανείς όταν γράφετε ένα αρχείο CSS. Με αυτό τον τρόπο θα γνωρίζετε πάντα ότι είναι ένα φύλλο στυλ και δεν χρειάζεται να ανοίξετε το αρχείο για να καθορίσετε τι είναι στο μέλλον.
Δεν είναι πιθανώς μια μεγάλη έκπληξη, αλλά η επέκταση στο αρχείο CSS θα πρέπει να είναι:
.css
Συμβάσεις ονομάτων αρχείων CSS
Αν έχετε μόνο ένα αρχείο CSS στον ιστότοπο, μπορείτε να το ονομάσετε ό, τι θέλετε. Ένα από τα παρακάτω είναι προτιμότερο:
styles.css ή default.css
Εάν ο ιστότοπός σας θα χρησιμοποιήσει πολλά αρχεία CSS, ονομάστε τα φύλλα στυλ μετά τη λειτουργία τους, ώστε να είναι σαφές ακριβώς ποιος είναι ο σκοπός κάθε αρχείου. Δεδομένου ότι μια ιστοσελίδα μπορεί να έχει πολλά φύλλα στυλ συνδεδεμένα σε αυτά, βοηθά να διαιρέσετε τα στυλ σας σε διαφορετικά φύλλα, ανάλογα με τη λειτουργία αυτού του φύλλου και τα στυλ μέσα σε αυτό. Για παράδειγμα:
- Διάταξη έναντι σχεδιασμού
layout.css design.css
- Τμήματα σελίδας
main.css nav.css
- Ολόκληρο το site με υποτομές
mainstyles.css subpage.css
Αν ο ιστότοπός σας χρησιμοποιεί ένα πλαίσιο κάποιου είδους, θα παρατηρήσετε ότι χρησιμοποιεί πολλαπλά αρχεία CSS, κάθε ένα από τα οποία είναι αφιερωμένο σε διαφορετικά τμήματα των σελίδων ή των όψεων του ιστότοπου (τυπογραφία, χρώμα, διάταξη κ.λπ.).
Επεξεργασμένο από τον Jeremy Girard
