Ανάπτυξη αποτελεσματικού, βελτιωμένου CSS
Το CSS μπορεί να συγκριθεί με το σετ εργαλείων ενός γλύπτη. όπως οι γλύπτες στην εργασία, οι σχεδιαστές χρησιμοποιούν το CSS για να δημιουργήσουν δομημένες διατάξεις ιστοσελίδων.
Με την πάροδο των ετών, αυτή η διαδικασία έχει γίνει πιο οργανωμένη. έχουν θεσπιστεί κανόνες για τη δημιουργία βέλτιστων πρακτικών κωδικοποίησης.
Σε αυτό το άρθρο, θα ρίξουμε μια ματιά σε μερικές ιδέες που μπορείτε να χρησιμοποιήσετε κατά τη σύνταξη φύλλων στυλ για να επιταχύνετε τον κώδικα σας.
Το αποτελεσματικό CSS είναι εύκολο στη διαχείριση και εύκολη στην ανάγνωση και μπορεί να αποτελέσει πόρο για τους σχεδιαστές ιστοσελίδων. Η οργάνωση είναι ένα μεγάλο βήμα, αλλά η χρήση του CSS μπορεί να είναι λίγο πιο περίπλοκη από αυτή.
Καθώς διαβάζετε αυτό το άρθρο, διατηρήστε τις δικές σας προτιμήσεις. η καλύτερη συμβουλή που μπορείτε να πάρετε από οποιονδήποτε προγραμματιστή είναι να βρείτε τον δικό σας τρόπο εργασίας. Συνδυάστε μερικές από τις τεχνικές εδώ με τις δικές σας μεθόδους για να αποκομίσετε το μέγιστο όφελος.
Γιατί να ασχοληθούμε με την εξομάλυνση του CSS;
Πολλοί σχεδιαστές μπερδεύουν τις γλώσσες μπροστινού και οπίσθιου άκρου όταν μιλάμε για κώδικα ανάλυσης. Το CSS και το HTML είναι σχεδιαστικές γλώσσες που χρησιμοποιούνται για τη μορφοποίηση και το στυλ στοιχείων σε έναν ιστότοπο. Τα αρχεία μεταφορτώνονται και αναλύονται από το πρόγραμμα περιήγησης του επισκέπτη, πράγμα που σημαίνει ότι ο κώδικας front-end έχει σημαντικό χρόνο φόρτωσης.
Ο κώδικας που λαμβάνεται και αναλύεται από το πρόγραμμα περιήγησης απαιτεί χρόνο για ανάγνωση και υπολογισμό, ακριβώς όπως ο κώδικας που είναι γραμμένος σε γλώσσες back-end (όπως PHP ή Ruby). Το βελτιωμένο CSS μπορεί να ωφελήσει σε μεγάλο βαθμό έναν ιστότοπο επειδή μπορεί να μειώσει τους χρόνους φόρτωσης και να επιταχύνει τη διάρθρωση των στοιχείων σελίδας.
Τα οφέλη ενδέχεται να μην είναι προφανή με τις σημερινές συνδέσεις υψηλής ταχύτητας και τα προηγμένα λειτουργικά συστήματα. Ίσως θελήσετε να δείτε τον ιστότοπό σας σε ένα πρόγραμμα περιήγησης για κινητά για να συγκρίνετε τους χρόνους φόρτωσης και να δείτε πώς φορτώνεται ο ιστότοπος.
Όταν το CSS κωδικοποιείται αποτελεσματικά, θα πρέπει να δείτε τη μορφή και το στυλ των στοιχείων ιστότοπου κατά την επεξεργασία τους. Αυτό μπορεί να φαίνεται διαφορετικό από το πρόγραμμα περιήγησης στο πρόγραμμα περιήγησης, αλλά εξακολουθεί να συμβαίνει. Όσο περισσότερο δοκιμάζετε τον κώδικα του ιστοτόπου σας, τόσο περισσότερο θα το δείτε.
Κρατήστε τον κωδικό σας τυποποιημένο και απλό. Εάν ενημερώνετε το ιστολόγιό σας ή τον προσωπικό ιστότοπό σας λίγους μήνες μετά την αρχική ανάπτυξή σας, η αναζήτηση σε CSS στυλ που γνωρίζετε είναι ευκολότερη από την αντιμετώπιση νέων. Προσαρμογή στο καθιερωμένα πρότυπα βοηθά μακροπρόθεσμα.
Πώς να εργαστείτε με αποτελεσματικό κώδικα
Για να ξεκινήσετε το στυλ κωδικοποίησης με εξαιρετική απόδοση, θα πρέπει να υιοθετήσετε κάποιες νέες ιδέες. Αυτές είναι οι βασικές τεχνικές CSS που χρησιμοποιούνται σήμερα από κορυφαίους ιστότοπους Διαδικτύου και προγραμματιστές εφαρμογών.
Κρατήστε τον Κωδικό σας απλό
Αυτό μπορεί εύκολα να παραβλεφθεί. Κατά τη χαρτογράφηση ενός συνόλου δεδομένων για τα στυλ σας, κρατήστε το απλό. Δημιουργήστε σύνολα δεδομένων σε μια στοίβα στηλών αν χρειαστεί.
Ξεκινήστε δημιουργώντας μια λίστα με διαφορετικές ενότητες για να εργαστείτε στα στυλ σας. Μπορείτε να συμπεριλάβετε κείμενο, φόρμες, κουτιά διαμόρφωσης, κεφαλίδες, υποσέλιδα και οτιδήποτε άλλο μπορεί να χρειαστείτε. Για να οργανωθείτε πραγματικά, μπορείτε να το σπάσετε σε μερικά γνωστά στυλ, όπως ένα id ή class για συνδέσμους πλοήγησης.
Αυτό το πρώτο βήμα βοηθά να δημιουργήσετε ένα σχέδιο για τον ιστότοπό σας χρησιμοποιώντας απλά λόγια, προτού να μπει σε οποιαδήποτε γλώσσα στυλ. Στη συνέχεια, η συνεδρίαση για να γράψετε κώδικα θα είναι πολύ απλούστερη. η ύπαρξη του καταλόγου πόρων μπροστά σας θα σας βοηθήσει να ρίξετε τον κώδικα με σχεδόν υπερανθρώπινο ρυθμό.
Κρατήστε τα μπλοκ του κώδικα οριοθετημένα και αραιά
Υπάρχει συνεχής συζήτηση σχετικά με τον τρόπο με τον οποίο πρέπει να γραφτεί ο κώδικας CSS. Όταν ξεκίνησα για πρώτη φορά, χρησιμοποίησα τη φράση μπλοκ επειδή ήταν το μόνο που είχα δει ποτέ. Αλλά η μονόγραμμη συμβολισμός είναι πολύ γρηγορότερη όταν πρόκειται να αναλύσουμε το κείμενο και να το καταστήσουμε ευανάγνωστο.
Δεν κάνω περίπτωση για να αγνοήσω το CSS σε μορφή μπλοκ - μακριά από αυτό. Όταν πρόκειται για ένα σημαντικό στοιχείο ή id που κατέχει έξι ή επτά μεγάλες ιδιότητες, διατηρώντας την σε μπλοκαρισμένη μορφή θα είναι ευκολότερη. Θα απομονώσετε τα σημαντικά μέρη του στυλ σας, καθιστώντας τα πιο εύκολα να τα βρείτε με μια ματιά.
Η ανάγνωση μεγάλων μορφών σε σημειώσεις μπλοκ είναι επίσης ευκολότερη επειδή οι περισσότεροι συντάκτες κειμένων τυλίγουν μεγάλες γραμμές και η ανάγνωση των ζευγών ιδιοτήτων-αξίας μπορεί να προκαλέσει σύγχυση όταν έχετε 10 ή περισσότερους για να περάσετε. Όντας ο σχεδιαστής ιστοσελίδων, πρέπει να κάνετε την κλήση σχετικά με τον τρόπο διαστήλωσης του κώδικα CSS. Λάβετε υπόψη την αποτελεσματικότητα και χρησιμοποιήστε την καλύτερη κρίση σας.
Συνεργασία με άλλους προγραμματιστές
Αν είστε επαγγελματίας σχεδιαστής ιστοσελίδων ή επιθυμείτε να είστε ένας, πιθανότατα θα εργαστείτε με μια ομάδα αργά ή γρήγορα. Αυτό μπορεί να είναι μια ευλογία ή μια κατάρα, ανάλογα με την ομάδα.
Οι σχεδιαστές είναι συχνά απρόθυμοι να κάνουν σημαντικές αλλαγές στο έργο τους. Ο κώδικας CSS είναι λίγο διαφορετικός, επειδή προσπαθείτε να δημιουργήσετε μια όμορφη διάταξη χρησιμοποιώντας μόνο τις αξίες των ιδιοτήτων και τα αρχεία μπορούν να μπερδευτούν όταν περάσουν από μερικά χέρια. Έτσι, παραμείνετε οργανωμένοι.
Τα σχόλια αποτελούν σημαντική βοήθεια. Εάν γραμμές ή μπλοκ κώδικα ενδέχεται να συγχέουν ή να παραπλανούν άλλους, τα σχόλια θα εξοικονομήσουν ώρες. Εξηγήστε ό, τι βάζετε στο φύλλο στυλ όσο πιο κομψά γίνεται.
Βεβαιωθείτε ότι δεν έχουν αντικατασταθεί διπλότυπα ή προσαρτημένα στυλ. Φανταστείτε ότι το h1 προς την h4 οι επικεφαλίδες είναι στυλισμένες ψηλά σε ένα έγγραφο CSS, αλλά στη συνέχεια κάποιος κώδικας χαμηλότερος αλλάζει τις γραμματοσειρές τους. Αυτό θα μπορούσε να είναι εξαιρετικά συγκεχυμένο για κάποιον που δεν έγραψε τον κώδικα και τώρα πρέπει να περάσει και να διορθώσει το σφάλμα.
Η επικοινωνία είναι επίσης κρίσιμη. Θα μπορούσατε να γράψετε τον πιο αποδοτικό κώδικα γύρω, αλλά η έλλειψη επικοινωνίας θα καταστρέψει την ομάδα σας. Εστιάστε στο καθήκον και εργάζεστε με τις δημιουργικές ιδέες που παράγονται συλλογικά από την ομάδα (όχι μόνο τη δική σας).
Παρακολουθήστε ξεχωριστά έγγραφα CSS
Ένας άλλος τρόπος για να διατηρήσετε τον κώδικα καθαρό και οργανωμένο είναι να διατηρείτε ξεχωριστά τα είδη στυλ. Αυτό λειτουργεί καλά για μεγάλους ιστότοπους στους οποίους η κατοχή όλων των μορφών σε ένα ενιαίο έγγραφο θα ήταν μη ρεαλιστική.
Το Facebook είναι ένα καλό παράδειγμα. Είναι πιθανό να έχει πολλά διαφορετικά στυλ για όλες τις σελίδες του: προφίλ, αναζήτηση, εγγραφή, φωτογραφίες, κλπ. Εάν τα στυλ ήταν όλα ενοποιημένα σε ένα αρχείο, δεν θα ήθελα να είμαι ο τύπος που πρέπει να ταξινομήσει τον κώδικα μόνο για να να διορθώσετε ένα απλό σφάλμα.
Το Facebook έχει πολύ μεγαλύτερη επισκεψιμότητα από τον ιστότοπό σας, αλλά οι αρχές είναι ίδιες. Αν η οργάνωση είναι ανησυχητική, ξεχωριστά φύλλα στυλ μπορεί να προχωρήσει πολύ. Οι σχεδιαστές ιστοσελίδων συχνά οργανώνουν κώδικα με βάση την πλευρά του εγγράφου που κατασκευάζει (π.χ. layout.css , text.css , forms.css ).
Δεν είναι απαραίτητο να φορτώνονται όλα τα στυλ σε κάθε σελίδα. Και εδώ βρίσκεται το πλεονέκτημα: η μέθοδος επιτρέπει μεγαλύτερη προσαρμογή κατά την κατασκευή της ιστοσελίδας σας. Θα περιορίσετε τον χρόνο ανάλυσης εξαιρετικά απλά δημιουργώντας ξεχωριστές προβολές και στυλ.
Υποστήριξη δοκιμής για IE
Οι προγραμματιστές ιστοσελίδων ζωγράφιζαν πάντα τον Internet Explorer ως κακό, ειδικά με το CSS. Ευτυχώς, μπορείτε να εφαρμόσετε σχόλια υπό όρους (τα οποία μοιάζουν με κανονικά σχόλια στα περισσότερα προγράμματα περιήγησης) στο HTML.
Μπορείτε να τα χρησιμοποιήσετε για να εφαρμόσετε στυλ στον Internet Explorer. Ελέγξτε τα σχόλια υπό όρους αν δεν τα γνωρίζετε. μπορεί να αποδειχθεί ανεκτίμητη όταν οι ιδιότητες του CSS δεν λειτουργούν σωστά και χρειάζεστε μια εναλλακτική λύση.
Με την απελευθέρωση του Internet Explorer 9 Beta , παίρνουμε λίγο πιο κοντά σε μια ενοποιημένη εμπειρία στο Διαδίκτυο. Το μόνο πρόβλημα είναι ο αριθμός των ατόμων που εξακολουθούν να χρησιμοποιούν προγράμματα περιήγησης όπως τα IE6 και IE7, τα οποία έχουν σοβαρά σφάλματα επεξεργασίας (λόγω ελλιπών μηχανών εμφάνισης) και μερικές φορές απαιτούν εξωτερικές μορφές. Ευτυχώς, η υποστήριξη έχει βελτιωθεί και η Microsoft φαίνεται να στρέφει τα πράγματα.
Προσθήκη πίνακα περιεχομένων
Αυτό το βήμα είναι προαιρετικό, αλλά θεωρώ ότι λειτουργεί αναρωτιούνται για τα φύλλα στυλ μου. Μπορείτε να αποθηκεύσετε το τραπέζι εκτός του ίδιου του εγγράφου CSS, αλλά το έχω διαπιστώσει ότι είναι κάπως αντιπαραγωγικό -ιδίως επειδή η προσθήκη σχολίων σε ετικέτες είναι τόσο εύκολη.
Οι κύριοι λόγοι για να τοποθετήσετε έναν πίνακα περιεχομένων στα στυλ σας είναι ότι διευκολύνει την πρόσβαση και εξορθολογίζει τη διαδικασία επεξεργασίας. Τοποθετήστε δείκτες στην αρχή του εγγράφου σας για να διαχωρίσετε τον κώδικα σε λογικές διαιρέσεις.
Δημιουργώντας τα δικά σας κλειδιά είναι μια καλή προσέγγιση. Για παράδειγμα, εάν σκοπεύετε να χωρίσετε το τραπέζι σας σύμφωνα με τους κύριους τομείς του εγγράφου (διάταξη, γραμματοσειρά, κεφαλίδα, πλοήγηση κ.λπ.), μπορείτε να πληκτρολογήσετε τις ενότητες με μοναδικούς χαρακτήρες.
Θα μπορούσατε να χρησιμοποιήσετε =!layout και =!font για να οριοθετήσετε τα τμήματα διάταξης και γραμματοσειράς, αντίστοιχα. Πιθανότατα δεν θα συναντήσετε αυτές τις ακριβείς ακολουθίες χαρακτήρων οπουδήποτε στον κώδικα, οπότε η προσθήκη τους τόσο στον πίνακα σας όσο και στην αρχή κάθε τμήματος σχολίων θα πρέπει να είναι ασφαλής. Στη συνέχεια, χρησιμοποιήστε τη λειτουργία αναζήτησης στο πρόγραμμα επεξεργασίας κειμένου για να μεταβείτε στην ενότητα που θέλετε.
Αυτή είναι επίσης μια καλή στρατηγική για έργα στα οποία πολλοί άνθρωποι θα εξετάσουν τον κώδικα. Διατηρεί τα πάντα οργανωμένα και προσβάσιμα.
Υπάρχουν πολλοί τρόποι για να βελτιστοποιήσετε τον κώδικα και να το καταστήσετε πιο αποτελεσματικό και αυτές οι συμβουλές είναι μια καλή αρχή. Το CSS εξελίσσεται και δημιουργούνται πολλές νέες ιδέες γι 'αυτό.
Χρειάζεστε πάθος και αφοσίωση για να το κάνετε στη βιομηχανία σχεδιασμού. Εάν μπορείτε να συγκρατήσετε το πάθος σας για ψηφιακό σχεδιασμό, τότε η διατήρηση των βέλτιστων πρακτικών του CSS δεν θα πρέπει να είναι δύσκολη. Η πρόσβαση σε άλλους σε αυτήν την τεράστια παγκόσμια κοινότητα σχεδιαστές ιστοσελίδων μπορεί να είναι μια μεγάλη βοήθεια. οι εμπειρογνώμονες της βιομηχανίας είναι συνήθως ευτυχείς να μοιραστούν τις τεχνικές και τις καινοτομίες τους.
Αυτή η ανάρτηση γράφτηκε αποκλειστικά για το Webdesigner Depot από Τζέικ Ροσέλ , ένας παθιασμένος σχεδιαστής ιστοσελίδων και ένας ενθουσιώδης κοινωνικός μέσων. Ο Τζέικ αγαπά να διαβάζει και να γράφει για τις τελευταίες τάσεις ψηφιακού και διαδικτύου και τη δικτύωση με την κοινότητα σχεδιασμού. Για να ακούσετε περισσότερα για το έργο του, βρείτε τον στο Twitter @ jakerocheleau .
Ποιες είναι οι μέθοδοι για τον εξορθολογισμό του CSS; Οποιεσδήποτε προτάσεις για προγραμματιστές CSS του newbie; Τι νέα χαρακτηριστικά ή πρόσθετη υποστήριξη θα θέλατε να δείτε σε μελλοντικές επαναλήψεις του CSS;