Η εμφάνιση και η αίσθηση ή "στυλ" μιας ιστοσελίδας υπαγορεύεται από το CSS (Cascading Style Sheets). Αυτό είναι ένα αρχείο που θα προσθέσετε στον κατάλογο του ιστοτόπου σας που θα περιέχει τους διάφορους κανόνες CSS που δημιουργούν τον οπτικό σχεδιασμό και τη διάταξη των σελίδων σας.
Ενώ οι ιστότοποι μπορούν να χρησιμοποιούν και συχνά κάνουν χρήση πολλών φύλλων στυλ, δεν είναι απαραίτητο να το κάνουν. Μπορείτε να τοποθετήσετε όλους τους κανόνες CSS σε ένα αρχείο και υπάρχουν πραγματικά οφέλη για αυτό, συμπεριλαμβανομένου του γρηγορότερου χρόνου φόρτωσης και της απόδοσης των σελίδων, καθώς δεν χρειάζονται πολλά αρχεία. Ενώ είναι πολύ μεγάλοι, οι επιχειρηματικοί ιστότοποι ενδέχεται να χρειάζονται ξεχωριστά φύλλα στυλ κατά περιόδους, πολλές μικρές έως μεσαίες τοποθεσίες μπορούν να κάνουν τέλεια με ένα μόνο αρχείο. Αυτό είναι αυτό που χρησιμοποιώ για το μεγαλύτερο μέρος του έργου μου στο σχεδιασμό ιστοσελίδων - ένα μόνο αρχείο CSS με όλους τους κανόνες που χρειάζονται οι σελίδες μου. Έτσι τίθεται τώρα το ερώτημα - τι θα έπρεπε να ονομάσετε αυτό το αρχείο CSS;
Ονοματοδοσία Βασικά στοιχεία της Σύμβασης
Όταν δημιουργείτε ένα εξωτερικό φύλλο στυλ για τις ιστοσελίδες σας, θα πρέπει να ονομάσετε το αρχείο ακολουθώντας παρόμοιες συμβάσεις ονομασίας για τα αρχεία HTML:
Μην χρησιμοποιείτε ειδικούς χαρακτήρες
Θα πρέπει να χρησιμοποιείτε μόνο τα γράμματα az, αριθμούς 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, αυτά τα ονόματα λειτουργούν καλά για μένα.
Εάν ο ιστότοπός σας θα χρησιμοποιήσει πολλά αρχεία CSS, ονομάστε τα φύλλα στυλ μετά τη λειτουργία τους, ώστε να είναι σαφές ακριβώς ποιος είναι ο σκοπός κάθε αρχείου. Δεδομένου ότι μια ιστοσελίδα μπορεί να έχει πολλά φύλλα στυλ συνδεδεμένα σε αυτά, βοηθά να διαιρέσετε τα στυλ σας σε διαφορετικά φύλλα ανάλογα με τη λειτουργία αυτού του φύλλου και τα στυλ μέσα σε αυτό. Για παράδειγμα:
- Διάταξη εναντίον σχεδίου layout.css design.css
- Ενότητες σελίδας main.css nav.css
- Ολόκληρο το site με υποενότητες mainstyles.css subpage.css
Αν ο ιστότοπός σας χρησιμοποιεί ένα πλαίσιο κάποιου είδους, θα παρατηρήσετε ότι χρησιμοποιεί πολλαπλά αρχεία CSS, κάθε ένα από τα οποία είναι αφιερωμένο σε διαφορετικά τμήματα των σελίδων ή των όψεων του ιστότοπου (τυπογραφία, χρώμα, διάταξη κ.λπ.).
Αρχικό άρθρο από την Jennifer Krynin. Επεξεργασμένο από τον Jeremy Girard στις 9/5/17