Η εργασία με Cascading Style Sheets (CSS) μπορεί να είναι δύσκολη για αρχάριους. Χρησιμοποιώντας το CSS, μπορείτε να δομήσετε, να ενημερώσετε και να διατηρήσετε την εμφάνιση της εφαρμογής σας. Αλλά η γλώσσα απαιτεί δεξιότητες για το χειρισμό σελίδων HTML για να αποκτήσετε την επιθυμητή διάταξη.
Ακολουθούν ορισμένα λάθη που πρέπει να αποφύγετε όταν εργάζεστε με CSS. Θα σας εξοικονομήσουν χρόνο και θα διευκολύνουν τη διαδικασία ανάπτυξής σας.
1. Χρήση px για μεγέθη γραμματοσειρών
Η μονάδα "px" αντιπροσωπεύει pixel. Μπορείτε να το χρησιμοποιήσετε για να εκφράσετε διάφορα μήκη σε μια ιστοσελίδα, από το πλάτος και το ύψος ενός στοιχείου μέχρι το μέγεθος της γραμματοσειράς του.
Ωστόσο, το px κλειδώνει το σχέδιό σας σε ένα σταθερό μέγεθος για όλες τις οθόνες. Μια εικόνα σε px μπορεί να καταλάβει όλο το πλάτος μιας οθόνης και μόνο ένα μικρό ποσοστό μιας άλλης. Αν θέλετε ένα πιο αναλογικό στοιχείο,
χρησιμοποιήστε σχετικές μετρήσεις όπως rem, ή ποσοστά (%).Η καλύτερη σχετική μέτρηση για χρήση είναι η rem. Αυτή η ενότητα αναφέρεται στο μέγεθος γραμματοσειράς του ριζικού στοιχείου που μπορεί συχνά να ορίσει ένας αναγνώστης στις ρυθμίσεις του προγράμματος περιήγησής του. Μπορείτε να δείτε την επίδραση των px και rem σε ένα στοιχείο στο ακόλουθο παράδειγμα:
html>
<HTML>
<κεφάλι>κεφάλι>
<σώμα>
<h1>Αυτή είναι η επικεφαλίδα 1h1>
<h2>Αυτή είναι η επικεφαλίδα 2h2>
<Π>Αυτή είναι μια παράγραφος.Π>
<Π>Αυτή είναι μια άλλη παράγραφος.Π>
σώμα>
html>Μπορείτε να διαμορφώσετε τα μεγέθη γραμματοσειρών σε αυτό το έγγραφο χρησιμοποιώντας μονάδες px με το ακόλουθο CSS:
h1 {
μέγεθος γραμματοσειράς: 50px;
}h2 {
μέγεθος γραμματοσειράς: 30px;
}
Π {
μέγεθος γραμματοσειράς: 15px;
}
Η σελίδα που προκύπτει φαίνεται αποδεκτή όταν την προβάλλετε σε μεγάλη οθόνη:
Αλλά δεν φαίνεται εμφανίσιμο σε μικρότερη οθόνη, όπως σε ένα τηλέφωνο:
Στη συνέχεια, εφαρμόστε το rem στο ίδιο περιεχόμενο. Καθορίστε ένα βασικό μέγεθος γραμματοσειράς στο στοιχείο html και μέγεθος άλλων στοιχείων χρησιμοποιώντας rems, όπως φαίνεται παρακάτω:
html {
μέγεθος γραμματοσειράς: 16px;
}h1 {
μέγεθος γραμματοσειράς: 3rem;
}h2 {
μέγεθος γραμματοσειράς: 2rem;
}
Π {
μέγεθος γραμματοσειράς: 1rem;
}
Παρατηρήστε τη διαφορά μεταξύ της μεγάλης και της μικρής οθόνης. Με το rem, το περιεχόμενο κλιμακώνεται καλύτερα ανεξάρτητα από το μέγεθος της οθόνης. Τα στοιχεία δεν θα υπερβούν ποτέ το καθορισμένο μέγεθος οθόνης. Γι' αυτό είναι καλύτερα να χρησιμοποιείτε σχετικά μήκη παρά pixel.
Σε μια οθόνη επιφάνειας εργασίας:
Σε μια μικρή οθόνη, το κείμενο σε rem units είναι ακόμα αναγνώσιμο:
2. Βάζοντας όλα τα στυλ σας σε ένα αρχείο
Η χρήση ενός αρχείου CSS για ένα μεγάλο έργο μπορεί να δημιουργήσει ένα χάος. Θα έχετε ένα αρχείο με μεγάλες σειρές κώδικα που θα προκαλέσει σύγχυση κατά την ενημέρωση. Δοκιμάστε να χρησιμοποιήσετε διαφορετικά αρχεία για φύλλα στυλ CSS για διαφορετικά στοιχεία.
Για παράδειγμα, μπορείτε να έχετε διαφορετικά αρχεία για πλοήγηση, κεφαλίδα και υποσέλιδο. Και ένα άλλο για τμήματα στο σώμα. Ο διαχωρισμός των αρχείων CSS βοηθά στη δομή της εφαρμογής σας και ενθαρρύνει τη χρηστικότητα του κώδικα.
3. Ακατάλληλη χρήση Inline CSS
Στο vanilla CSS μπορείτε να γράψετε στυλ στις σελίδες HTML όπως ακριβώς και στο Πλαίσια CSS όπως το Bootstrap και το TailwindCSS. Το Inline CSS σάς επιτρέπει να εφαρμόσετε ένα μοναδικό στυλ σε ένα στοιχείο HTML. Χρησιμοποιεί το χαρακτηριστικό στυλ του στοιχείου HTML.
Ο παρακάτω κώδικας είναι ένα παράδειγμα ενσωματωμένου CSS.
<h2στυλ="χρώμα: πράσινο;">Αυτή είναι μια Πράσινη Επικεφαλίδαh2>
<Πστυλ="χρώμα: κόκκινο;">Αυτή είναι μια κόκκινη παράγραφος.Π>
Το κείμενο θα εμφανίζεται ως εξής:
Ωστόσο, το HTML μόνο με ενσωματωμένο CSS μπορεί να είναι ακατάστατο. Δεδομένου ότι δεν υπάρχει άλλη θέση για το CSS, όλο το CSS υπάρχει στο ίδιο αρχείο με το HTML. Θα φαίνεται γεμάτο. Η επεξεργασία ενός τέτοιου αρχείου είναι δύσκολη, ειδικά αν δεν είναι ο κώδικάς σας.
Επίσης, με το ενσωματωμένο CSS, πρέπει να γράψετε κώδικα για κάθε στοιχείο. Αυτό αυξάνει την επανάληψη και μειώνει την επαναχρησιμοποίηση του κώδικα. Χρησιμοποιείτε πάντα έναν συνδυασμό εξωτερικών φύλλων στυλ και ενσωματωμένου CSS για το στυλ των ιστοσελίδων σας.
4. Υπερβολική χρήση !σημαντικό
Στο CSS, το !σπουδαίος κανόνας προσθέτει μεγαλύτερη σημασία σε ένα ακίνητο/αξία. Παρακάμπτει άλλους κανόνες στυλ για αυτήν την ιδιότητα σε αυτό το στοιχείο.
Θα πρέπει να έχετε μόνο μερικά !σπουδαίος κανόνες στον κώδικά σας. Χρησιμοποιήστε το μόνο όταν είναι απαραίτητο. Δεν έχει νόημα να γράφεις κώδικα και μετά να τον παρακάμπτεις. Ο κώδικάς σας θα φαίνεται ακατάστατος και θα προκαλεί προβλήματα όταν εκτελείται σε ορισμένες συσκευές.
html>
<html>
<κεφάλι>κεφάλι>
<σώμα>
<Π> Είμαι πορτοκαλί Π>
<Πτάξη="η τάξη μου"> Είμαι πράσινος Π>
<Πταυτότητα="η ταυτότητά μου"> Είμαι μπλε. Π>
σώμα>
html>CSS:
#η ταυτότητά μου {
χρώμα του φόντου: μπλε;
}.η τάξη μου {
χρώμα του φόντου: πράσινος;
}
Π {
χρώμα του φόντου: πορτοκάλι !σπουδαίος;
}
Το αποτέλεσμα είναι κάπως έτσι:
5. Δεν ακολουθεί τις συμβάσεις ονοματοδοσίας
Το CSS έχει συμβάσεις ονομασίας που καθοδηγούν τους προγραμματιστές στο πώς να γράφουν τυπικό κώδικα. Αυτό είναι απαραίτητο εάν καταλήξετε αποσφαλμάτωση του αρχείου CSS σε μελλοντική ημερομηνία.
Ένα από αυτά τα πρότυπα περιλαμβάνει τη χρήση παύλων για τον διαχωρισμό ομαδοποιημένων λέξεων. Ένας άλλος είναι να ονομάζει έναν επιλογέα ανάλογα με το τι κάνει. Έτσι, όποιος το κοιτάξει δεν θα χρειαστεί να μαντέψει. Διευκολύνει επίσης την ανάγνωση, τη διατήρηση και την κοινή χρήση κώδικα. Για παράδειγμα:
Αντί για αυτό:
.εικόνα1 { περιθώριο-αριστερά: 3%; }Γράψε το έτσι:
.αγόρι-εικόνα { περιθώριο-αριστερά: 3%; }Όταν κοιτάζετε το φύλλο στυλ, θα γνωρίζετε ακριβώς για ποια εικόνα προορίζεται ο κώδικας. Οδηγός στυλ HTML/CSS της Google παραθέτει πολλές ακόμη συμβάσεις που πρέπει να γνωρίζει κάθε προγραμματιστής.
Η συγγραφή σχολίων είναι η πιο υποτιμημένη ικανότητα στον προγραμματισμό. Πολλοί άνθρωποι ξεχνούν να γράψουν σχόλια για να εξηγήσουν τον κώδικά τους. Αλλά εξοικονομεί χρόνο. Τα σχόλια είναι απαραίτητα για την ανάγνωση και τη διατήρηση του κώδικα.
Δεδομένου ότι το CSS είναι χαλαρά δομημένο και ο καθένας μπορεί να αναπτύξει τις δικές του συμβάσεις, τα σχόλια είναι ζωτικής σημασίας. Η χρήση καλά δομημένων σχολίων για να εξηγήσετε το φύλλο στυλ σας είναι καλή πρακτική. Μπορείτε να γράψετε σχόλια εξηγώντας ενότητες του κώδικα και τι κάνουν.
/* τα στοιχεία βίντεο χρειάζονται χώρο για να αναπνεύσουν */
.βίντεο {
περιθώριο-κορυφή: 2em;
}
/* διαμόρφωση του τμήματος ήρωα */
.χαιρετισμός {
περιθώριο-κορυφή: 1em;
}
7. Αποτυχία σχεδιασμού εκ των προτέρων
Πολλοί άνθρωποι το κάνουν, αλλά είναι σοβαρό λάθος να ξεκινήσετε την κωδικοποίηση χωρίς σχέδιο. Το CSS καθορίζει τη δομή της διεπαφής σας. Ο σχεδιασμός λέει πολλά για τις προγραμματιστικές σας ικανότητες.
Ένα σχέδιο για τον ιστότοπό σας ξεκαθαρίζει το όραμά σας και τους πόρους που απαιτούνται για να φτάσετε εκεί. Έχετε μια διανοητική εικόνα του έργου σας. Στη συνέχεια σχεδιάστε το σε χαρτί ή χρησιμοποιήστε το μια εργαλειοθήκη σχεδιασμού όπως το Canva για να οραματιστείτε αυτό που θέλετε.
Όταν έχετε μια πλήρη εικόνα του έργου, συγκεντρώστε όλους τους πόρους σας και ξεκινήστε την κωδικοποίηση. Θα σας εξοικονομήσει χρόνο και πλεονασμό.
Γιατί πρέπει να λάβετε υπόψη αυτές τις συστάσεις
Εάν αναπτύσσετε εφαρμογές στον Ιστό, θα χρησιμοποιήσετε CSS. Η καλή συνεργασία με το CSS απαιτεί εξάσκηση και τήρηση των τυπικών συμβάσεων. Οι συμβάσεις όχι μόνο κάνουν τον κώδικά σας αναγνώσιμο αλλά και διατηρήσιμο.
Η σύνταξη τυποποιημένου κώδικα θα σας εξοικονομήσει χρόνο και προσπάθεια. Ο χρόνος που θα είχατε ξοδέψει για τη μορφοποίηση της διεπαφής μπορείτε να αφιερώσετε σε πιο σύνθετες λειτουργίες. Διασφαλίζει επίσης ότι μπορείτε να χρησιμοποιήσετε ξανά τον κώδικα και να τον μοιραστείτε με άλλους. Γράψτε καλύτερο κώδικα ακολουθώντας τις καθορισμένες συμβάσεις και γίνετε καλύτερος προγραμματιστής.
