Κάθε ιστότοπος αποτελείται από δομικά, λειτουργικά και στιλιστικά στοιχεία. Διαδοχικά φύλλα στυλ υπαγορεύουν την εμφάνιση (την "εμφάνιση και αίσθηση") ενός ιστότοπου. Αυτά τα στυλ διατηρούνται ξεχωριστά από τη δομή HTML για να διευκολύνεται η ενημέρωση και η τήρηση των προτύπων ιστού.
Το πρόβλημα με τα φύλλα στυλ
Με το μέγεθος και την πολυπλοκότητα πολλών ιστότοπων σήμερα, τα φύλλα στυλ μπορούν να γίνουν αρκετά μεγάλα και δυσκίνητα. Αυτό το πρόβλημα έχει μεγαλώσει σε πολυπλοκότητα τώρα ερωτήματα πολυμέσων Για αποκριτικά στυλ ιστότοπου αποτελούν ουσιαστικό μέρος του σχεδιασμού, διασφαλίζοντας ότι ένας ιστότοπος φαίνεται όπως πρέπει, ανεξάρτητα από τη συσκευή. Αυτά τα ερωτήματα πολυμέσων από μόνα τους μπορούν να προσθέσουν σημαντικό αριθμό νέων στυλ σε ένα έγγραφο CSS, καθιστώντας ακόμη πιο δύσκολο να δουλέψετε. Η διαχείριση αυτής της πολυπλοκότητας είναι όπου τα σχόλια CSS μπορούν να αποτελέσουν πολύτιμη βοήθεια για τους σχεδιαστές και τους προγραμματιστές ιστοσελίδων.
Σχόλια Προσθήκη δομής και σαφήνειας
Η προσθήκη σχολίων σε αρχεία CSS ενός ιστότοπου οργανώνει τμήματα αυτού του κώδικα για έναν ανθρώπινο αναγνώστη που ελέγχει το έγγραφο. Εξασφαλίζει επίσης συνέπεια όταν ένας επαγγελματίας του διαδικτύου παίρνει το σημείο όπου αφήνει κάποιος άλλος ή όταν ομάδες ανθρώπων εργάζονται σε έναν ιστότοπο.
Τα καλά μορφοποιημένα σχόλια κοινοποιούν σημαντικές πτυχές του φύλλου στυλ σε μέλη μιας ομάδας που μπορεί να μην είναι εξοικειωμένοι με τον κώδικα. Αυτά τα σχόλια είναι επίσης χρήσιμα για άτομα που έχουν εργαστεί στον ιστότοπο στο παρελθόν αλλά δεν έχουν πρόσφατα. Οι σχεδιαστές ιστοσελίδων συνήθως εργάζονται σε πολλούς ιστότοπους και η ανάμνηση των στρατηγικών σχεδιασμού από τη μία στην άλλη είναι δύσκολη.
Μόνο για τα μάτια των επαγγελματιών
Τα σχόλια CSS δεν εμφανίζονται όταν εμφανίζεται η σελίδα προγράμματα περιήγησης ιστού. Αυτά τα σχόλια είναι μόνο πληροφοριακά, όπως Σχόλια HTML είναι (αν και η σύνταξη είναι διαφορετική). Αυτά τα σχόλια CSS δεν επηρεάζουν με κανέναν τρόπο την οπτική εμφάνιση ενός ιστότοπου.
Προσθήκη σχολίων CSS
Η προσθήκη ενός σχολίου CSS είναι πολύ εύκολη. Κλείστε το σχόλιό σας με τις σωστές ετικέτες σχολίων ανοίγματος και κλεισίματος:
Ξεκινήστε το σχόλιό σας προσθέτοντας /* και κλείστε το με */.
Οτιδήποτε εμφανίζεται μεταξύ αυτών των δύο ετικετών είναι το περιεχόμενο του σχολίου, ορατό μόνο στον κώδικα και δεν αποδίδεται από το πρόγραμμα περιήγησης.
Ένα σχόλιο CSS μπορεί να καταλάβει οποιονδήποτε αριθμό γραμμών. Ακολουθούν δύο παραδείγματα:
/ * παράδειγμα κόκκινων συνόρων * /
div # border_red {
περίγραμμα: λεπτό συμπαγές κόκκινο?
}
/***************************
****************************
Στυλ για κείμενο κώδικα
****************************
***************************/
Σπάζοντας τμήματα
Πολλοί σχεδιαστές οργανώνουν φύλλα στυλ σε μικρά, εύπεπτα κομμάτια που είναι εύκολο να σαρωθούν κατά την ανάγνωση. Συνήθως, θα δείτε σχόλια που προηγούνται και ακολουθούν σειρές ενωτικών που δημιουργούν μεγάλα, προφανή διαλείμματα στη σελίδα που είναι ευδιάκριτα. Εδώ είναι ένα παράδειγμα:
/ * Στυλ κεφαλίδας * /
Αυτά τα σχόλια δείχνουν την έναρξη μιας νέας ενότητας κωδικοποίησης.
Κωδικός σχολιασμού
Επειδή οι ετικέτες σχολίων λένε στο πρόγραμμα περιήγησης να αγνοεί τα πάντα μεταξύ τους, μπορείτε να τα χρησιμοποιήσετε για να απενεργοποιήσετε προσωρινά ορισμένα τμήματα του κώδικα CSS. Αυτό το τέχνασμα μπορεί να είναι βολικό όταν κάνετε εντοπισμό σφαλμάτων ή κατά την προσαρμογή της μορφοποίησης ιστοσελίδων. Στην πραγματικότητα, οι σχεδιαστές τις χρησιμοποιούν συχνά για να "σχολιάσουν" ή να "απενεργοποιήσουν" περιοχές του κώδικα για να δουν τι θα συμβεί αν αυτή η ενότητα δεν είναι μέρος της σελίδας.
Προσθέστε την εισαγωγική ετικέτα σχολίου πριν από τον κωδικό που θέλετε να σχολιάσετε (απενεργοποίηση). τοποθετήστε την ετικέτα κλεισίματος όπου θέλετε να τερματιστεί το απενεργοποιημένο τμήμα. Τίποτα μεταξύ αυτών των ετικετών δεν θα επηρεάσει την οπτική εμφάνιση ενός ιστότοπου, βοηθώντας σας να εντοπίσετε σφάλματα στο CSS για να δείτε πού συμβαίνει ένα πρόβλημα. Στη συνέχεια, μπορείτε να μπείτε και να διορθώσετε ακριβώς αυτό το σφάλμα και, στη συνέχεια, να αφαιρέσετε τα σχόλια από τον κώδικα.
Συμβουλές σχολιασμού CSS
Πολλοί κωδικοποιητές περιλαμβάνουν μπλοκ σχολίων στην κορυφή οποιουδήποτε νέου αρχείου με κώδικα. Μιμηθείτε αυτήν τη στρατηγική συμπεριλαμβάνοντας ένα μπλοκ σχολίων με το όνομά σας, τις σχετικές ημερομηνίες και σχετικές πληροφορίες για βοήθεια Οι άνθρωποι κατανοούν το πλαίσιο ενός έργου και όχι μόνο τις αποφάσεις σχετικά με το τι συμβαίνει σε σχέση με έναν συγκεκριμένο κώδικα ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ.