Δεν περιορίζεστε σε μια μόνο κλάση CSS ανά στοιχείο.
Τα Φύλλα Στιγμιότυπου Στυλ (CSS) σάς επιτρέπουν να ορίσετε την εμφάνιση ενός στοιχείου αγγίζοντας τα χαρακτηριστικά που εφαρμόζετε σε αυτό το στοιχείο. Αυτά τα χαρακτηριστικά μπορούν να είναι είτε ID είτε μια κλάση και, όπως όλα τα χαρακτηριστικά, προσθέτουν χρήσιμες πληροφορίες στα στοιχεία στα οποία είναι συνδεδεμένα. Ανάλογα με το χαρακτηριστικό που προσθέτετε σε ένα στοιχείο, μπορείτε να γράψετε έναν επιλογέα CSS για να εφαρμόσετε τα απαραίτητα οπτικά στυλ που είναι απαραίτητα για την εμφάνιση και την αίσθηση αυτού του στοιχείου και του ιστότοπου στο σύνολό του.
Παρόλο που τα αναγνωριστικά ή τα μαθήματα λειτουργούν με σκοπό τη σύλληψή τους με κανόνες CSS, οι σύγχρονες μέθοδοι σχεδιασμού ιστοσελίδων προτιμούν τις κατηγορίες των αναγνωριστικών, εν μέρει επειδή είναι λιγότερο συγκεκριμένες και ευκολότερες για να εργαστούν συνολικά. Ναι, εξακολουθείτε να βρίσκετε πολλούς ιστότοπους που χρησιμοποιούν τα αναγνωριστικά, αλλά τα χαρακτηριστικά αυτά εφαρμόζονται με μεγαλύτερη επιβάρυνση από ό, τι στο παρελθόν, ενώ τα μαθήματα έχουν αναλάβει σύγχρονες ιστοσελίδες.
Ενιαία ή Πολλαπλές Μαθήματα στο CSS;
Στις περισσότερες περιπτώσεις, θα ορίζετε ένα χαρακτηριστικό μιας κλάσης σε ένα στοιχείο, αλλά στην πραγματικότητα δεν περιορίζεστε σε μια μόνο κλάση με τον τρόπο που είστε με τα αναγνωριστικά. Ενώ ένα στοιχείο μπορεί να έχει μόνο ένα χαρακτηριστικό ταυτότητας, μπορείτε να δώσετε απολύτως σε ένα στοιχείο πολλαπλές κλάσεις και, σε ορισμένες περιπτώσεις, αυτό θα κάνει τη σελίδα σας πιο εύκολη στο στυλ και πολύ πιο ευέλικτη!
Εάν πρέπει να ορίσετε πολλαπλές κλάσεις σε ένα στοιχείο, μπορείτε να προσθέσετε τις πρόσθετες κλάσεις και απλά να τις διαχωρίσετε με ένα χώρο στο χαρακτηριστικό σας.
Για παράδειγμα, αυτή η παράγραφος έχει τρεις κατηγορίες:
pullquote εμφανίζεται αριστερά "> Αυτό θα ήταν το κείμενο της παραγράφου p>
Αυτό ορίζει τις ακόλουθες τρεις κατηγορίες στην ετικέτα παραγράφου:
- Τραβήξτε
- Προτεινόμενα
- Αριστερά
Παρατηρήστε τα διαστήματα μεταξύ κάθε μιας από αυτές τις τιμές κλάσης. Αυτοί οι χώροι είναι αυτό που τις δημιουργεί ως διαφορετικές, ατομικές τάξεις. Αυτός είναι και ο λόγος για τον οποίο τα ονόματα τάξεων δεν μπορούν να έχουν κενά σε αυτά, διότι έτσι θα τα ορίζουν ως ξεχωριστές κατηγορίες.
Για παράδειγμα, αν χρησιμοποιούσατε "pullquote-featured-left" χωρίς χώρο, θα ήταν μια τιμή κατηγορίας, αλλά το παραπάνω παράδειγμα, όπου αυτές οι τρεις λέξεις χωρίζονται με ένα κενό, τις ορίζει ως μεμονωμένες τιμές. Είναι σημαντικό να κατανοήσετε αυτήν την έννοια καθώς αποφασίζετε ποιες αξίες τάξης θα χρησιμοποιηθούν στις ιστοσελίδες σας.
Αφού έχετε τις τιμές της κλάσης σας σε HTML, μπορείτε να τις αντιστοιχίσετε ως κλάσεις στο CSS και να εφαρμόσετε τα στυλ που θέλετε να προσθέσετε. Για παράδειγμα.
.pullquote {...}
.featured {...}
p.left {...}
Σε αυτά τα παραδείγματα, τα ζεύγη δηλώσεων CSS και τιμών θα βρίσκονταν μέσα στα σγουράκια, και έτσι θα εφαρμοζόταν αυτό το στυλ στον κατάλληλο επιλογέα.
Σημείωση - εάν ορίσετε μια κλάση σε ένα συγκεκριμένο στοιχείο (για παράδειγμα, p.left), μπορείτε να το χρησιμοποιήσετε ως μέρος μιας λίστας κατηγοριών. ωστόσο, να γνωρίζετε ότι θα επηρεάσει μόνο τα στοιχεία που καθορίζονται στο CSS. Με άλλα λόγια, το στυλ p.left θα ισχύει μόνο για παραγράφους με αυτήν την κλάση, αφού ο επιλογέας σας λέει στην πραγματικότητα να το εφαρμόσει σε "παραγράφους με τιμή κλάσης" αριστερά ". Αντίθετα, οι άλλοι δύο επιλογείς στο παράδειγμα δεν καθορίζουν ένα συγκεκριμένο στοιχείο, επομένως θα εφαρμόζονται σε οποιοδήποτε στοιχείο που χρησιμοποιεί αυτές τις τιμές κλάσης.
Πλεονεκτήματα των πολλαπλών τάξεων
Πολλαπλές κλάσεις μπορούν να διευκολύνουν την προσθήκη ειδικών εφέ σε στοιχεία χωρίς να χρειάζεται να δημιουργήσετε ένα εντελώς νέο στυλ για αυτό το στοιχείο.
Για παράδειγμα, μπορεί να θέλετε να έχετε τη δυνατότητα να επιταχύνετε τα στοιχεία στα αριστερά ή δεξιά γρήγορα. Μπορείτε να γράψετε δύο κλάσεις αριστερά και δεξιά με απλά float: αριστερά. και επιπλέουν: δεξιά? σε αυτούς. Στη συνέχεια, κάθε φορά που είχατε ένα στοιχείο που πρέπει να πλεύσετε αριστερά, θα προσθέσετε απλά την κλάση "αριστερά" στη λίστα τάξεων της.
Υπάρχει μια λεπτή γραμμή για να περπατήσετε εδώ, ωστόσο. Θυμηθείτε ότι τα πρότυπα του διαδικτύου υπαγορεύουν τον διαχωρισμό του στυλ και της δομής. Η δομή γίνεται μέσω HTML, ενώ το στυλ είναι σε CSS.
Εάν το έγγραφό σας HTML είναι γεμάτο με στοιχεία που έχουν όλα τα ονόματα κλάσεων όπως "κόκκινο" ή "αριστερά", τα οποία είναι ονόματα που υπαγορεύουν τον τρόπο εμφάνισης των στοιχείων και όχι αυτά που είναι, περνάτε αυτή τη γραμμή μεταξύ δομής και στυλ. Προσπαθώ να περιορίσω όσο το δυνατόν περισσότερο τα μη σημασιακά ονόματα τάξεων για το λόγο αυτό.
Πολλαπλές κλάσεις, Σημασιολογία και JavaScript
Ένα άλλο πλεονέκτημα στη χρήση πολλαπλών τάξεων είναι ότι σας δίνει πολλές περισσότερες δυνατότητες διαδραστικότητας.
Μπορείτε να εφαρμόσετε νέες κλάσεις σε υπάρχοντα στοιχεία χρησιμοποιώντας JavaScript χωρίς να καταργήσετε οποιαδήποτε από τις αρχικές κατηγορίες. Μπορείτε επίσης να χρησιμοποιήσετε τάξεις για να ορίσετε τη σημασιολογία ενός στοιχείου . Αυτό σημαίνει ότι μπορείτε να προσθέσετε επιπλέον κατηγορίες για να ορίσετε τι σημαίνει αυτό σημασιολογικά. Έτσι λειτουργεί το Microformats.
Μειονεκτήματα των πολλαπλών τάξεων
Το μεγαλύτερο μειονέκτημα της χρήσης πολλαπλών τάξεων στα στοιχεία σας είναι ότι μπορεί να τους κάνει λίγο δύσκολο να τα δούμε και να τα διαχειριστούμε με το πέρασμα του χρόνου. Μπορεί να γίνει δύσκολο να προσδιοριστεί ποια στυλ επηρεάζουν ένα στοιχείο και αν τυχόν έχει κάποια επίδραση σε αυτά τα σενάρια. Πολλά από τα διαθέσιμα σήμερα πλαίσια, όπως το Bootstrap, κάνουν μεγάλη χρήση στοιχείων με πολλαπλές κλάσεις. Αυτός ο κώδικας μπορεί να πάρει από το χέρι και σκληρά για να εργαστεί με πολύ γρήγορα αν δεν είστε προσεκτικοί.
Όταν χρησιμοποιείτε πολλαπλές κλάσεις, διατρέχετε επίσης τον κίνδυνο να έχετε το στυλ για μια τάξη να παρακάμπτει το στυλ ενός άλλου ακόμα και αν δεν το σκοπεύετε. Αυτό μπορεί να δυσκολέψει να καταλάβετε γιατί τα στυλ σας δεν εφαρμόζονται ακόμη και όταν φαίνεται ότι πρέπει.
Πρέπει να γνωρίζετε την ιδιαιτερότητα, ακόμη και με τα χαρακτηριστικά που εφαρμόζονται σε αυτό το ένα στοιχείο!
Χρησιμοποιώντας ένα εργαλείο όπως τα εργαλεία Webmaster στο Chrome, μπορείτε να δείτε πιο εύκολα πώς επηρεάζουν τα μαθήματά σας τα στυλ σας και να αποφύγετε αυτό το πρόβλημα των αλληλοσυγκρουόμενων στυλ και χαρακτηριστικών.
Αρχικό άρθρο από την Jennifer Krynin. Επεξεργασμένο από τον Jeremy Girard στις 8/7/17