Το CSS μπορεί να είναι μια εξαιρετικά ισχυρή γλώσσα σήμανσης για τους σχεδιαστές.
Ωστόσο, το CSS που παράγεται είναι μόνο τόσο καλό όσο οι αρχές που ακολουθεί ο σχεδιαστής δημιουργώντας τον κώδικα.
Παρόλο που μπορεί να σκεφτεί κανείς ότι ο καθένας μπορεί να ξεκλειδώσει το CSS, υπάρχει μεγάλη διαφορά ανάμεσα στο γράψιμο του CSS και την παραγωγή κορυφαίας CSS.
Για να βεβαιωθείτε ότι βρίσκεστε στο σωστό δρόμο, εδώ υπάρχουν οκτώ αρχές CSS τις οποίες πρέπει να ακολουθεί κάθε σχεδιαστής ιστού.
Εάν πρόκειται να επενδύσετε το χρόνο στην κωδικοποίηση CSS, έχει νόημα μόνο να αφιερώσετε χρόνο για να επικυρώνω τον κώδικα που δημιουργείτε. Ωστόσο, δεν παύει ποτέ να με εκπλήσσει πόσοι σχεδιαστές παραλείπουν αυτό το ζωτικό βήμα. Η επικύρωση του κωδικού σας σάς επιτρέπει να καθαρίσετε τυχόν προβλήματα και να διασφαλίσετε ότι θα λειτουργήσει καλά για τους επισκέπτες σας.
Εκτός από την επικύρωση του αρχείου CSS, πρέπει επίσης να επικυρώσετε τα αρχεία HTML ή XHTML. Πριν επικυρώσετε αυτά τα αρχεία, βεβαιωθείτε ότι έχετε πάρει χρόνο για να δηλώσετε το σωστό HTML ή XHTML DOCTYPE. Η δήλωση του DOCTYPE σας μπορεί να φαίνεται σαν μια κοσμική λεπτομέρεια, αλλά δεν μπορώ να υπολογίσω πόσα συζητήσεις είχα με απογοητευμένους σχεδιαστές που συνέχισαν να έχουν προβλήματα με ένα σχέδιο, μόνο για να διαπιστώσουν ότι ήταν επειδή είχαν δηλώσει ένα ξεπερασμένο DOCTYPE δεν είχε δηλώσει DOCTYPE καθόλου).
Είτε εργάζεστε σε ένα έργο μόνο είτε με μια ομάδα σχεδιαστών, είναι σημαντικό να τεκμηριώνετε το έργο που δημιουργείτε. Μπορείτε πιθανώς να δείτε γιατί αυτό θα ήταν σημαντικό στο πλαίσιο μιας ομάδας σχεδιασμού, αλλά μπορεί να αναρωτιέστε γιατί θα είχε σημασία αν εργάζεστε σε ένα σόλο έργο. Υπάρχει πάντοτε μια πιθανότητα ότι το σόλο έργο σας τελικά θα εξελιχθεί σε ομαδικό έργο και εάν συμβεί αυτό, είναι πολύ πιο εύκολο να έχετε τεκμηρίωση στο χέρι παρά να προσπαθήσετε να το επιστρέψετε και να το δημιουργήσετε. Ωστόσο, ακόμη και σε περίπτωση που το σχέδιό σας παραμείνει ένα άτομο, μπορείτε να εκπλαγείτε με το πόσο χρήσιμη τεκμηρίωση είναι όταν αποφασίζετε να ξαναεπισκεφτείτε ένα έργο αφού δεν το εξετάσετε για ένα χρόνο.
Όταν πρόκειται για τη δημιουργία τεκμηρίωσης για τον κώδικα CSS, η φυσική ώθηση των περισσότερων σχεδιαστών είναι να τα προσθέσετε απευθείας στον κώδικα τους τοποθετώντας το ανάμεσα σε / * και * /. Όπως πολλές από τις αρχές αυτής της λίστας, δεν υπάρχει τίποτα τεχνικά ανακριβές όσον αφορά τη λήψη αυτής της προσέγγισης. Ωστόσο, η προσθήκη σχολίων απευθείας στον κώδικα CSS θα αυξήσει το μέγεθος του αρχείου, γεγονός που με τη σειρά του μπορεί να αυξήσει τους χρόνους φόρτωσης και να επιβραδύνει τη συνολική απόδοση ενός ιστότοπου. Εάν είστε σοβαροί για το γράψιμο του κορυφαίου κώδικα CSS, θα πρέπει να τεκμηριώνετε τον κώδικα σας, αλλά σε ένα ξεχωριστό αρχείο.
Μολονότι πιστεύω ειλικρινά ότι είναι πιο αποτελεσματικό να τεκμηριώνεται σε ξεχωριστό φάκελο, γνωρίζω ότι υπάρχουν πολλά αρχεία που απλά δεν συμφωνούν με την πρακτική αυτή. Εάν αρνείστε να τεκμηριώσετε σε ένα ξεχωριστό αρχείο, το επόμενο καλύτερο που μπορείτε να κάνετε είναι να χρησιμοποιήσετε έναν συμπιεστή CSS (στην πραγματικότητα, ακόμη και αν επιλέξετε να χρησιμοποιήσετε ένα ξεχωριστό αρχείο για την τεκμηρίωση, μπορείτε ακόμα να ωφεληθείτε χρησιμοποιώντας έναν συμπιεστή CSS). Μπορείτε να το χρησιμοποιήσετε Συμπιεστής CSS από το CSS Drive Gallery ή απλά αναζητήστε την Google για να βρείτε έναν εναλλακτικό συμπιεστή CSS.
Παρόλο που οι hacks έχουν γίνει αποδεκτή πρακτική σε πολλούς εντός της κοινότητας CSS, αυτό δεν σημαίνει ότι το "CSS hacking" είναι αρχή που πρέπει να ακολουθήσετε. Το πρόβλημα με αυτή την προσέγγιση στο σχεδιασμό είναι ότι σημαίνει ότι αναζητάτε σκόπιμα μια περίπλοκη λύση στα προβλήματα. Παρόλο που μπορεί να σκεφτεί κανείς ότι ένα ή δύο αχρήματα από καιρό καιρό δεν θα βλάψουν κανέναν, να μπουν στη νοοτροπία της «χάραξης» μέσω των προβλημάτων που αντιμετωπίζετε μπορεί να έχουν αρνητικό αντίκτυπο στη συνολική νοοτροπία σχεδιασμού σας.
Η αποφυγή των hacks είναι μια συμβουλή που οι ειδικοί έχουν διανείμει για κάποιο χρονικό διάστημα. Μπορείτε να πάτε πίσω μέχρι το 2003 και να δείτε αυτό Peter-Paul Koch (ο οποίος είναι ολοκληρωμένος προγραμματιστής και συγγραφέας) έχει προειδοποιήσει τους σχεδιαστές για τις επιπτώσεις των CSS hacks για κάποιο χρονικό διάστημα: "Το τέρας πολυπλοκότητας έχει επανεμφανιστεί, ακριβώς στο κέντρο της σύγχρονης ανάπτυξης Ιστού. Σήμερα δεν εκδηλώνεται ως ένας ατέλειωτος φωτισμένος πίνακας, αλλά ως ένα ατελείωτα πολύπλοκο CSS hack. "
Επειδή οι διαιρέσεις παρέχουν υψηλό επίπεδο ευελιξίας, μπορεί να είναι εύκολο να τους χρησιμοποιηθούν υπερβολικά. Στην πραγματικότητα, αυτό το ζήτημα έχει γίνει τόσο συνηθισμένο μεταξύ των σχεδιαστών ότι η κοινότητα CSS δημιούργησε τη δική της θητεία για να επισημάνει αυτό το ζήτημα: divitus. Για να αποφύγετε να πέσετε θύμα αυτής της κατάστασης, πριν χρησιμοποιήσετε αυτόματα μια ετικέτα div, θα πρέπει πάντα να αναρωτηθείτε εάν υπάρχει μια πραγματική ετικέτα HTML που θα κάνει τη δουλειά για εσάς. Για παράδειγμα, αντί να δημιουργήσετε πολλαπλά τμήματα κεφαλίδας, γιατί δεν χρησιμοποιείτε τις ετικέτες κεφαλίδας HTML που είναι ήδη διαθέσιμες, όπως H1 και H2;
Αφού αρχίσετε να λαμβάνετε υπόψη το ζήτημα του divs, θα δείτε γρήγορα τα οφέλη από τη χρήση της κατάλληλης ετικέτας HTML αντί να δημιουργήσετε αυτόματα ένα νέο div. Όχι μόνο μπορεί να μειώσει το ποσό του κώδικα που πρέπει να δημιουργήσετε (που θα σας εξοικονομήσει χρόνο, μαζί με τη μείωση του χρόνου φόρτωσης του ιστοτόπου σας), αλλά θα δώσει επίσης στον κώδικα σας μια πιο λογική δομή.
Εάν ρωτήσετε έναν νέο ή άπειρο σχεδιαστή για το πώς αποφασίζουν να ονομάσουν τις τάξεις τους, θα μπορούσαν να πουν ότι δεν έχει σημασία. Ενώ αυτό είναι τεχνικά αληθές, αυτή είναι μια πολύ κοντόφθαλμη όψη της ονομασίας τάξεων CSS. Αν και υπάρχουν σχεδιαστές που εμπίπτουν στην κατηγορία που δεν ενδιαφέρονται για τα ονόματα των τάξεων CSS, υπάρχουν και σχεδιαστές που σκέφτονται για τα ονόματα των τάξεων τους, αλλά στην πραγματικότητα λαμβάνουν λάθος προσέγγιση.
Δεδομένου ότι δεν θέλω απλά να σας κάνω να κερδίσετε το κεφάλι με θεωρητικά παραδείγματα, επιτρέψτε μου να το εξηγήσω με συγκεκριμένους όρους. Ας υποθέσουμε ότι δημιουργείτε μια τάξη για να ελέγξετε ένα από τα πλαίσια στη σελίδα σας. Το κουτί θα βρίσκεται στο κάτω μέρος της σελίδας, θα περιέχει σχόλια από τους αναγνώστες και θα χρησιμοποιήσετε το CSS για να το δώσετε σε φόντο με μαύρισμα και να ελέγξετε την επένδυση. Αντί να ονομάζετε αυτό το .tan-box (το οποίο θα το έκαναν πολλοί καλοπροαίρετοι σχεδιαστές), ονομάστε το .comment-box. Ο λόγος που το .comment-box είναι ένα καλύτερο όνομα κλάσης από το .tan-box είναι επειδή αν αποφασίσετε να αλλάξετε το χρώμα του φόντου σε μπλε κάτω από το δρόμο (ή αποφασίστε να μετακινήσετε το κουτί από το κάτω μέρος της σελίδας σε μια διαφορετική περιοχή) , δεν θα μπερδέψει εσάς ή οποιονδήποτε άλλο σχεδιαστή που κοιτάζει πάνω από το CSS για αυτόν τον ιστότοπο.
Αν και η στενογραφία μπορεί να προκαλέσει σύγχυση στους σχεδιαστές που μόλις αρχίζουν να γράφουν τον δικό τους κώδικα CSS, μόλις συνηθίσετε με το στυλ στενογραφίας, γίνεται μια από τις πιο αποτελεσματικές πρακτικές που μπορείτε να ακολουθήσετε ως σχεδιαστής .
Υπάρχουν πολλά πλεονεκτήματα στη χρήση στενογραφίας. Για ένα, μειώνει το μέγεθος των αρχείων σας, γεγονός που θα μειώσει τον χρόνο φόρτωσης του ιστότοπού σας. Επιπλέον, όχι μόνο καθιστά ευκολότερη την οργάνωση του κώδικα σας, αλλά και καθιστά απλούστερο εάν χρειάζεται να κάνετε αλλαγές στον κώδικα σας στο μέλλον. Καθώς αρχίζετε να προσαρμόζετε τη σύντομη γραφή, θα πρέπει επίσης να ακολουθήσετε την πρακτική της γραφής του κώδικα σας σε μια γραμμή (αντί να διανέμονται δηλώσεις σε πολλές γραμμές).
Ως σχεδιαστής, είστε περισσότερο τεχνικά διατεθειμένοι από οποιονδήποτε άλλον στον κύριο πληθυσμό. Επειδή είστε μέρος μιας μειονότητας που ζει και αναπνέει τεχνολογία, υπάρχουν πολλές συνήθειες που έχετε που οι περισσότεροι άλλοι άνθρωποι δεν έχουν σκεφτεί ποτέ. Για παράδειγμα, πιθανότατα εξαντλήσατε το δρόμο σας για να εξαλείψετε όσο το δυνατόν περισσότερο το "ίχνος χαρτιού" στη ζωή σας. Ωστόσο, είναι σημαντικό να θυμόμαστε ότι η πλειοψηφία του πληθυσμού εξακολουθεί να εκτυπώνει τα πράγματα σε τακτική βάση. Ενώ πιθανόν να επισημάνετε ένα στοιχείο με το del.icio.us όταν θέλετε να το αποθηκεύσετε για μελλοντική αναφορά, ο μέσος χρήστης του Internet θα εκτυπώσει την ίδια σελίδα.
Δεδομένου ότι οι χρήστες εξακολουθούν να εκτυπώνουν πληροφορίες από το Internet, είναι σημαντικό να χρησιμοποιήσετε το CSS για να κάνετε τον εκτυπωτή περιεχομένου σας φιλικό . Οι επισκέπτες θα εκτιμήσουν όλη την εργασία που έχετε θέσει για να δημιουργήσετε μια όμορφη διάταξη για τον ιστότοπο που επισκέπτονται, αλλά όταν αποφασίζουν να εκτυπώσουν μια σελίδα από αυτόν τον ιστότοπο, θα σας εκτιμήσουν ακόμα περισσότερο όταν συνειδητοποιήσουν ότι η εκτύπωσή τους περιέχει μόνο κείμενο που θέλουν (και κανένα από τα εκπληκτικά γραφικά που φαίνονται εξαιρετικά στον υπολογιστή τους, αλλά θα σπαταλάει έναν τόνο μελανιού από τον εκτυπωτή τους). Επειδή το CSS καθιστά αρκετά απλό να διασφαλιστεί ότι το περιεχόμενο είναι σωστά διαμορφωμένο όταν εκτυπωθεί, δεν υπάρχει δικαιολογία για έναν πραγματικό σχεδιαστή να παραμελήσει αυτό το βήμα της διαδικασίας σχεδιασμού.
Μπορείτε να σκεφτείτε ότι αυτή η τελική αρχή ακούγεται κλισέ, αλλά είναι αναμφισβήτητα το πιο σημαντικό από ολόκληρο τον κατάλογο. Εάν είστε αφοσιωμένοι στο να είστε ο καλύτερος σχεδιαστής, πρέπει να διασφαλίσετε ότι εργάζεστε πάντα για να επεκτείνετε τις γνώσεις σας για το CSS . Ευτυχώς, αυτό είναι εύκολο να το κάνετε αν έχετε την επιθυμία και τη θέληση να δεσμευθείτε για τη συνέχιση της εκπαίδευσής σας στο CSS. Ενώ η συνεχής εκπαίδευση μπορεί να είναι ένα δύσκολο έργο για άτομα σε πολλές βιομηχανίες που δεν έχουν τεχνικό χαρακτήρα, επειδή το Διαδίκτυο είναι κυριολεκτικά η βάση για το CSS, ο αριθμός των ελεύθερων πόρων από τους οποίους μπορείτε να μάθετε είναι κυριολεκτικά ατελείωτος. Αν νομίζετε ότι υπερβάλλω, απλώς πληκτρολογήστε "CSS" στο Google και θα δείτε ότι υπάρχουν 483.000.000 αποτελέσματα για να περιηγηθείτε.
Εκτός από τη μάθηση από τους πόρους του διαδικτύου (και την εκτύπωση πόρων αν προτιμάτε), μπορείτε να μάθετε πολλά από άλλους σχεδιαστές CSS. Είτε αναλύετε τη δουλειά τους, ακούτε τις συμβουλές που δίνουν online είτε μιλάνε μαζί τους σε καταστάσεις πρόσωπο με πρόσωπο, μπορείτε να κερδίσετε πολλή αξία αλληλεπιδρώντας και ενδεχομένως να συνεργαστείτε με άλλους σχεδιαστές οι οποίοι δεσμεύονται να ακολουθήσουν τις αρχές της κορυφαία σχεδίαση CSS και παραγωγή εκπληκτικών έργων.