Οι τρεις τύποι στυλ CSS

Η ανάπτυξη ιστοτόπου front-end συχνά αντιπροσωπεύεται ως σκαμνί με τρία πόδια και αποτελείται από:

• HTML για τη δομή ενός ιστότοπου
• CSS για τα οπτικά στυλ
• Javascript για συμπεριφορές

Το δεύτερο σκέλος αυτού του σκαμνιού, Cascading Style Sheets, υποστηρίζει τρία διαφορετικά στυλ που μπορείτε να προσθέσετε σε ένα έγγραφο.

1. Ενσωματωμένα στυλ
2. Ενσωματωμένα στυλ
3. Εξωτερικά στυλ

Κάθε ένα από αυτά τα στυλ CSS παρουσιάζει μοναδικά οφέλη και μειονεκτήματα.

Ενσωματωμένα στυλ

Τα ενσωματωμένα στυλ είναι στυλ που γράφονται απευθείας στην ετικέτα στο έγγραφο HTML. Τα ενσωματωμένα στυλ επηρεάζουν μόνο τη συγκεκριμένη ετικέτα στην οποία εφαρμόζονται:

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

γραμματοσειρά ετικέτες και το μείγμα δομής και στυλ σε ιστοσελίδες.

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

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

Ενσωματωμένα στυλ

Τα ενσωματωμένα στυλ βρίσκονται στην κορυφή του εγγράφου. Είναι εγκλωβισμένοι ετικέτες και μοιάζουν με εξωτερικά αρχεία CSS σε αυτό το τμήμα του εγγράφου.

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

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

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

Φύλλα εξωτερικού στυλ

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

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

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

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