Πώς να προσθέσετε σχόλια σε φύλλα στυλ Cascading (CSS)

Κάθε ιστοσελίδα αποτελείται από δομικά (που υπαγορεύονται από HTML), λειτουργικά και στυλιστικά στοιχεία. Τα επικαλυπτόμενα φύλλα στυλ (CSS) χρησιμοποιούνται για να υπαγορεύσουν την εμφάνιση ("εμφάνιση και αίσθηση") ενός ιστότοπου. Αυτά τα στυλ διατηρούνται ξεχωριστά από τη δομή HTML ώστε να επιτρέπουν την εύκολη ενημέρωση και την τήρηση των προτύπων ιστού.

Το πρόβλημα με τα φύλλα στυλ

Με το μέγεθος και την πολυπλοκότητα πολλών ιστότοπων σήμερα, τα φύλλα στυλ μπορεί να γίνουν αρκετά μακρά και δυσκίνητα. Αυτό ισχύει ιδιαίτερα τώρα που τα ερωτήματα των μέσων ενημέρωσης για τα ανταποκρινόμενα στυλ ιστότοπων αποτελούν ουσιαστικό μέρος του σχεδιασμού, διασφαλίζοντας ότι ένας ιστότοπος φαίνεται όπως πρέπει ανεξάρτητα από τη συσκευή. Αυτά τα ερωτήματα μέσων μπορούν από μόνα τους να προσθέσουν ένα σημαντικό αριθμό νέων στυλ σε ένα έγγραφο CSS, καθιστώντας ακόμη πιο δύσκολο να εργαστείτε. Αυτό είναι όπου τα σχόλια CSS μπορούν να αποτελέσουν ανεκτίμητη βοήθεια για τους σχεδιαστές ιστοσελίδων και τους προγραμματιστές.

Σχόλια Προσθήκη δομής και σαφήνειας

Η προσθήκη σχολίων στα αρχεία CSS ενός ιστότοπου είναι ένας πολύ καλός τρόπος για να οργανώσετε τμήματα αυτού του κώδικα για έναν αναγνώστη ανθρώπων που εξετάζει το έγγραφο. Εξασφαλίζει επίσης συνοχή όταν ένας επαγγελματίας ιστού παίρνει εκεί όπου άλλο απομακρύνεται ή όταν ομάδες ανθρώπων εργάζονται σε έναν ιστότοπο.

Τα καλά διαμορφωμένα σχόλια μπορούν να κοινοποιούν σημαντικές πτυχές του φύλλου στυλ σε μέλη μιας ομάδας που μπορεί να μην είναι εξοικειωμένοι με τον κώδικα ήδη. Αυτά τα σχόλια είναι επίσης πολύ χρήσιμα για άτομα που έχουν εργαστεί στον ιστότοπο πριν αλλά δεν έχουν πρόσφατα. οι σχεδιαστές ιστοσελίδων εργάζονται συνήθως σε πολλές τοποθεσίες και η ανάμνηση των στρατηγικών σχεδιασμού από το ένα στο άλλο είναι δύσκολη.

Μόνο για τα μάτια των επαγγελματιών

Τα σχόλια CSS δεν εμφανίζονται όταν η σελίδα εμφανίζεται σε προγράμματα περιήγησης ιστού. Αυτά τα σχόλια είναι μόνο ενημερωτικά, ακριβώς όπως τα σχόλια HTML (αν και η σύνταξη είναι διαφορετική). Αυτά τα σχόλια CSS δεν επηρεάζουν την οπτική εμφάνιση ενός ιστότοπου με οποιονδήποτε τρόπο.

Προσθήκη σχολίων CSS

Η προσθήκη ενός σχολίου CSS είναι αρκετά εύκολη. Μπορείτε απλά να αφήσετε το σχόλιό σας με τις σωστές ετικέτες σχολίων έναρξης και λήξης:

• Ξεκινήστε το σχόλιό σας προσθέτοντας

  /*

• Κλείστε το σχόλιό σας προσθέτοντας

  */

Οτιδήποτε εμφανίζεται μεταξύ αυτών των δύο ετικετών είναι το περιεχόμενο του σχολίου, που είναι ορατό μόνο στον κώδικα και δεν εμφανίζεται από το πρόγραμμα περιήγησης.

Ένα σχόλιο CSS μπορεί να πάρει οποιοδήποτε αριθμό γραμμών. Ακολουθούν δύο παραδείγματα:

/ * παράδειγμα κόκκινου περιγράμματος * / div # border_red { σύνορα: λεπτό στερεό κόκκινο? }/*******************************************************Στυλ για κείμενο κειμένου*******************************************************/

Διαχωρίζοντας τμήματα

Πολλοί σχεδιαστές οργανώνουν φύλλα στυλ σε μικρά, εύκολα εύπεπτα κομμάτια που είναι εύκολο να σαρωθούν κατά την ανάγνωση. Συνήθως, θα δείτε τα σχόλια που προηγήθηκαν και θα ακολουθούνται από σειρά παύσεων που δημιουργούν μεγάλα, προφανή διαλείμματα στη σελίδα που είναι εύκολα αντιληπτά. Ακολουθεί ένα παράδειγμα:

/ * ----------------------- Στυλ κεφαλίδας ----------------------- ------- * /

Αυτά τα σχόλια δείχνουν την έναρξη μιας νέας ενότητας κωδικοποίησης.

"Σχολιασμός" Κωδικός

Επειδή οι ετικέτες σχολίων λένε στο πρόγραμμα περιήγησης να αγνοεί τα πάντα μεταξύ τους, μπορείτε να τα χρησιμοποιήσετε για να απενεργοποιήσετε προσωρινά ορισμένα τμήματα του κώδικα CSS. Αυτό μπορεί να είναι πρακτικό όταν εντοπίζετε σφάλματα ή όταν ρυθμίζετε τη μορφοποίηση της ιστοσελίδας. Στην πραγματικότητα, οι σχεδιαστές συχνά τις χρησιμοποιούν για να "σχολιάζουν" ή να "απενεργοποιούν" τις περιοχές του κώδικα για να δουν τι συμβαίνει εάν η ενότητα αυτή δεν αποτελεί μέρος της σελίδας.

Για να το κάνετε αυτό, απλά προσθέστε την ετικέτα του σχολίου έναρξης πριν από τον κωδικό που θέλετε να σχολιάσετε έξω (απενεργοποιήστε). τοποθετήστε την ετικέτα κλεισίματος όπου θέλετε να τελειώσει το τμήμα με ειδικές ανάγκες. Τίποτα μεταξύ αυτών των ετικετών δεν θα επηρεάσει την οπτική εμφάνιση ενός ιστότοπου, επιτρέποντάς σας να εντοπίσετε σφάλματα στο CSS για να δείτε πού συμβαίνει κάποιο πρόβλημα. Στη συνέχεια, μπορείτε να εισέλθετε και να διορθώσετε μόνο αυτό το ζήτημα και να καταργήσετε τα σχόλια από τον κώδικα.

CSS σχολιάζοντας συμβουλές

Ως ανακεφαλαίωση, εδώ είναι μερικές συμβουλές για να θυμάστε για τη χρήση σχολίων στο CSS σας:

1. Τα σχόλια μπορούν να περιληφθούν σε πολλές γραμμές.
2. Τα σχόλια μπορούν να περιλαμβάνουν στοιχεία CSS, τα οποία δεν θέλετε να εμφανίζει ένα πρόγραμμα περιήγησης, αλλά δεν θέλετε να διαγράψετε πλήρως. Θυμηθείτε να αφαιρέσετε τα αχρησιμοποίητα στυλ (σε αντίθεση με το να τα αφήσετε σχολιασμένα) εάν αποφασίσετε ότι δεν τα χρειάζεστε στον ιστότοπο.
3. Χρησιμοποιήστε σχόλια όποτε γράφετε περίπλοκο CSS για να προσθέσετε δομή, να αποσαφηνίσετε τις αποφάσεις σχεδιασμού και να ενημερώσετε τους μελλοντικούς προγραμματιστές (ή να θυμηθείτε τον εαυτό σας) σχετικά με σημαντικές παραμέτρους. Αυτό εξοικονομεί χρόνο στο μέλλον για όλους τους εμπλεκόμενους.
4. Τα σχόλια μπορούν επίσης να περιλαμβάνουν μετα-πληροφορίες όπως:
   1. Συντάκτης
   2. Ημερομηνία Δημιουργίας
   3. Πνευματική ιδιοκτησία

Εκτέλεση

Ενώ προσθέτετε πάρα πολλά σχόλια μπορεί να επηρεάσει την ταχύτητα και την απόδοση του δικτυακού σας τόπου, δεν πρέπει να διστάσετε να τα χρησιμοποιήσετε. Θα χρειαζόταν πολλές γραμμές σχολίων για να έχουν σημαντικό αρνητικό αντίκτυπο. Όπως και πολλές πτυχές του σχεδιασμού ιστοσελίδων, όλα καταλήγουν σε ισορροπία.