10 καλύτερες πρακτικές CSS για τη βελτίωση του κώδικα σας
Είναι πολύ εύκολο να βρείτε τον εαυτό σας αναρωτιέστε πώς το CSS σας έχει γίνει τόσο δύσκολο.
Μερικές φορές είναι το αποτέλεσμα της παραπλανητικής κωδικοποίησης από την αρχή, μερικές φορές οφείλεται σε πολλαπλές αδράνειες και αλλαγές με την πάροδο του χρόνου.
Όποια και αν είναι η αιτία, δεν χρειάζεται να είναι έτσι. Η σύνταξη ενός καθαρού, εξαιρετικά διαχειρίσιμου CSS είναι απλή όταν ξεκινάτε από το δεξί πόδι και κάνετε τον κώδικα σας πιο εύκολο στη συντήρηση και την επεξεργασία αργότερα.
Εδώ είναι 11 συμβουλές για την επιτάχυνση της διαδικασίας, γράφοντας το CSS που είναι πιο αδύνατο, πιο γρήγορο και λιγότερο πιθανό να σας προκαλέσει πονοκέφαλο.
1. Μείνετε οργανωμένοι
Ακριβώς όπως και οτιδήποτε άλλο, πληρώνει για να κρατήσετε τον εαυτό σας οργανωμένο. Αντί να χάνετε τυχαία τα id και τα μαθήματα με τη σειρά που έρχονται στο μυαλό, χρησιμοποιήστε μια συνεκτική δομή.
Θα σας βοηθήσει να κρατήσετε στο μυαλό σας το σωρευτικό κομμάτι του CSS και να ρυθμίσετε το φύλλο στυλ σας για να επωφεληθείτε από την κληρονομιά του στυλ.
Δηλώστε πρώτα τα πιο γενικά στοιχεία σας, στη συνέχεια τα μη-τόσο-γενικά και ούτω καθεξής. Αυτό επιτρέπει στο CSS να κληρονομήσει σωστά τα χαρακτηριστικά και σας διευκολύνει να παρακάμψετε ένα συγκεκριμένο στυλ όταν χρειάζεται. Θα είναι πιο γρήγορος στην επεξεργασία του CSS αργότερα επειδή θα ακολουθήσει μια εύκολη στην ανάγνωση, λογική δομή.
Χρησιμοποιήστε μια δομή που λειτουργεί καλύτερα για σας διατηρώντας παράλληλα υπόψη τις μελλοντικές επεξεργασίες και άλλους προγραμματιστές.
- Επαναφορά και αντικατάσταση
- Σύνδεσμοι και τύπος
- Κύρια διάταξη
- Δευτερεύουσες δομές διάταξης
- Στοιχεία φόρμας
- Διάφορα
2. Τίτλος, ημερομηνία και σημάδι
Αφήστε τους άλλους να γνωρίζουν ποιος έγραψε το CSS σας, όταν γράφτηκε και ποιος θα επικοινωνήσει αν έχουν ερωτήσεις γι 'αυτό. Αυτό είναι ιδιαίτερα χρήσιμο όταν σχεδιάζετε πρότυπα ή θέματα.
Περιμένετε λίγο ... τι είναι αυτό για τα χρώματα ; Με τα χρόνια, έχω διαπιστώσει ότι η προσθήκη μιας απλής λίστας κοινών χρωμάτων που χρησιμοποιούνται στα φύλλα στυλ μου είναι εξαιρετικά χρήσιμη κατά την αρχική ανάπτυξη και κατά τη διάρκεια της επεξεργασίας αργότερα.
Αυτό σας εξοικονομεί από την ανάγκη να ανοίξετε το Photoshop για να δοκιμάσετε ένα χρώμα από το σχέδιο ή να αναζητήσετε χρώματα στο site οδηγός στυλ (αν έχει ένα). Όταν χρειάζεστε τον κώδικα HTML για αυτό το συγκεκριμένο μπλε, μετακινηθείτε προς τα επάνω και αντιγράψτε το.
3. Διατηρήστε μια βιβλιοθήκη προτύπων
Μόλις εγκαταστήσετε μια δομή που θα χρησιμοποιήσετε, καταργήστε όλα όσα δεν είναι γενικά και αποθηκεύστε το αρχείο ως πρότυπο CSS για μεταγενέστερη χρήση.
Μπορείτε να αποθηκεύσετε πολλαπλές εκδόσεις για πολλαπλές χρήσεις: διάταξη σε δύο στήλες, διάταξη blog, εκτύπωση, κινητό και ούτω καθεξής. Coda (ο επεξεργαστής για το OSX) διαθέτει μια εκπληκτική λειτουργία Κλιπ που σας επιτρέπει να το κάνετε εύκολα. Πολλοί άλλοι συντάκτες έχουν ένα παρόμοιο χαρακτηριστικό, αλλά ακόμη και μια απλή παρτίδα αρχείων κειμένου θα λειτουργήσει ωραία.
Είναι παράλογο να ξαναγράψετε κάθε ένα από τα φύλλα στυλ σας από το μηδέν, ειδικά όταν χρησιμοποιείτε τις ίδιες συμβάσεις και μεθοδολογίες σε κάθε μία.
4. Χρησιμοποιήστε τις χρήσιμες συμβάσεις ονοματοδοσίας
Θα παρατηρήσετε παραπάνω όπου δήλωσα ένα ζευγάρι id της στήλης και τους ονόμαζα col-alpha και col-beta. Γιατί να μην τις ονομάζεις μόνο αριστερά και δεξιά; Σκεφτείτε τις μελλοντικές επεξεργασίες, πάντα.
Τον επόμενο χρόνο ίσως χρειαστεί να επανασχεδιάσετε τον ιστότοπό σας και να μετακινήσετε την αριστερή στήλη προς τα δεξιά. Δεν θα πρέπει να μετονομάσετε το στοιχείο στην HTML σας και να μετονομάσετε το id στο φύλλο στυλ σας μόνο για να αλλάξετε τη θέση του.
Σίγουρα, θα μπορούσατε να επανατοποθετήσετε την αριστερή στήλη στα δεξιά και να κρατήσετε το id ως # col-left, αλλά πόσο συγκεχυμένη είναι αυτή; Αν το όνομα λέει αριστερά, θα πρέπει να περιμένουμε ότι θα είναι πάντα στα αριστερά. Αυτό δεν σας αφήνει πολλά περιθώρια για να μετακινήσετε τα πράγματα αργότερα.
Ένα από τα σημαντικότερα πλεονεκτήματα του CSS είναι η δυνατότητα να διαχωρίζονται τα στυλ από το περιεχόμενο. Μπορείτε να επανασχεδιάσετε πλήρως τον ιστότοπό σας απλώς τροποποιώντας το CSS χωρίς να αγγίζετε ποτέ το HTML. Επομένως , μην χτυπάτε το CSS χρησιμοποιώντας περιοριστικά ονόματα . Χρησιμοποιήστε πιο ευέλικτες συμβάσεις ονομασίας και μείνετε συνεπείς.
Αφήστε τη θέση ή το στυλ συγκεκριμένες λέξεις από τα στυλ και τα id σας. Μια κλάση του .link-blue θα κάνει είτε περισσότερη δουλειά για εσάς είτε θα κάνει το φύλλο στυλ σας πραγματικά ακατάστατο όταν ο πελάτης σας ζητήσει αργότερα να αλλάξετε τους μπλε συνδέσμους σε πορτοκαλί.
Ονομάστε τα στοιχεία σας με βάση αυτά που είναι, όχι αυτά που μοιάζουν. Για παράδειγμα, το .comment-blue είναι πολύ λιγότερο ευπροσάρμοστο από το .comment-beta, και το .post-largefont είναι πιο περιοριστικό από το .post-title.
5. Hyphens Αντί να Underscores
Τα παλαιότερα προγράμματα περιήγησης επιθυμούν να εμφανιστούν σφάλματα με υπογράμματα υπογράμμισης στο CSS ή δεν τα υποστηρίζουν καθόλου. Για καλύτερη συμβατότητα προς τα πίσω, μεταβείτε στη συνήθεια να χρησιμοποιείτε παύλες. Χρησιμοποιήστε #col-alpha και όχι #col_alpha.
6. Μην επαναλάβετε τον εαυτό σας
Επαναχρησιμοποιήστε τα χαρακτηριστικά όποτε είναι δυνατόν με την ομαδοποίηση στοιχείων αντί για να δηλώσετε ξανά τα στυλ. Εάν τα στοιχεία h1 και h2 χρησιμοποιούν το ίδιο μέγεθος γραμματοσειράς, χρώμα και περιθώρια, ομαδοποιήστε τα με κόμμα.
Αυτό:
Θα πρέπει επίσης να χρησιμοποιείτε συντομεύσεις όποτε είναι δυνατόν. Να είστε πάντα επιφυλακτικοί για ευκαιρίες για την ομαδοποίηση στοιχείων και τη χρήση συντομεύσεων δήλωσης.
Μπορείτε να ολοκληρώσετε όλα αυτά:
με μόνο αυτό:
Είναι πολύ σημαντικό να κατανοείτε τη σειρά με την οποία το CSS ερμηνεύει αυτές τις συντομεύσεις: πάνω, δεξιά, κάτω, αριστερά. Ένας μεγάλος κύκλος δεξιόστροφα, που αρχίζει το μεσημέρι.
Επίσης, αν τα χαρακτηριστικά επάνω και κάτω, ή τα αριστερά και δεξιά είναι τα ίδια, πρέπει να χρησιμοποιήσετε μόνο δύο:
Αυτό θέτει τα περιθώρια κορυφής και κάτω στο 1em, και τα αριστερά και δεξιά περιθώρια στο 0.
7. Βελτιστοποίηση για τα ελαφριά φύλλα στυλ
Χρησιμοποιώντας τις παραπάνω συμβουλές, μπορείτε πραγματικά να μειώσετε το μέγεθος των φύλλων στυλ σας. Τα μικρότερα φορτία γίνονται ταχύτερα και τα μικρότερα είναι ευκολότερα συντηρητικά και ενημερωμένα.
Κόψτε αυτό που δεν χρειάζεστε και ενοποιήστε όπου είναι δυνατόν με ομαδοποίηση. Να είστε προσεκτικοί όταν χρησιμοποιείτε επίσης κονσέρβες CSS πλαίσια. Είναι πιθανό να κληρονομήσετε πολλά χύμα που δεν θα χρησιμοποιηθούν.
Μια άλλη γρήγορη συμβουλή για το λεπτό CSS: δεν χρειάζεται να καθορίσετε μια μονάδα μέτρησης όταν χρησιμοποιείτε μηδέν. Αν ένα περιθώριο έχει οριστεί σε 0, δεν χρειάζεται να πείτε 0px ή 0em. Το μηδέν είναι μηδέν ανεξάρτητα από τη μονάδα μέτρησης και το CSS κατανοεί αυτό.
8. Γράψτε τη βάση σας για το Gecko, στη συνέχεια, τσιμπήστε το για το Webkit και το IE
Αποθηκεύστε τον εαυτό σας για την αντιμετώπιση προβλημάτων κεφαλαλγίας και γράψτε CSS πρώτα για browsers Gecko (Firefox, Mozilla, Netscape, Flock, Camino). Εάν το CSS σας λειτουργεί σωστά με το Gecko, είναι πολύ πιθανότερο να είναι χωρίς προβλήματα στο Webkit (Safari, Chrome) και στον Internet Explorer.
9. Επικυρώστε
Κάνουν χρήση του Ο δωρεάν έλεγχος CSS του W3C . Αν είστε κολλημένοι και η διάταξή σας δεν κάνει ό, τι θέλετε να κάνει, τότε ο επικύρω- σμος CSS θα βοηθήσει σημαντικά στην επισήμανση σφαλμάτων.
10. Κρατήστε ένα καθαρό σπίτι
Ξεχωρίστε το ξεχωριστό CSS του προγράμματος περιήγησης στο δικό του ξεχωριστό φύλλο στυλ και, εάν χρειάζεται, συμπεριλάβετε το Javascript, τον κώδικα του διακομιστή ή τον διακομιστή παρατηρήσεις υπό όρους . Χρησιμοποιήστε αυτή τη μέθοδο για να αποφύγετε τα βρώμικα αχρήτια CSS στα κύρια φύλλα στυλ σας. Αυτό θα διατηρήσει την βάση CSS σας καθαρή και διαχειρίσιμη.
Γράφτηκε αποκλειστικά για το WDD από τον Jeff Couturier
Ακολουθείτε αυτές τις μεθόδους κατά την κωδικοποίηση των ιστοσελίδων σας; Ποιες άλλες τεχνικές χρησιμοποιείτε για τη δημιουργία καλύτερου κώδικα;