4 Εργαλεία Ελέγχου και Βελτιστοποίησης CSS

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

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

Εδώ είναι 5 καλά εργαλεία που θα σας βοηθήσουν να ελέγξετε και να βελτιστοποιήσετε το CSS.

Τύπος-o-matic

Τύπος-o-matic είναι ένα plugin Firebug για την ανάλυση των γραμματοσειρών που χρησιμοποιούνται σε έναν ιστότοπο. Αυτό το plugin δίνει μια οπτική αναφορά σε έναν πίνακα, που φέρει ιδιότητες γραμματοσειράς όπως η οικογένεια γραμματοσειρών, το μέγεθος, το βάρος, το χρώμα και επίσης ο αριθμός των φορών που χρησιμοποιείται η γραμματοσειρά στην ιστοσελίδα. Μέσω του πίνακα αναφοράς, μπορείτε να βελτιστοποιήσετε εύκολα τη χρήση της γραμματοσειράς, να αφαιρέσετε ό, τι δεν είναι απαραίτητο ή να συνδυάσετε στυλ που είναι πολύ παρόμοια.

CSS Lint

CSS Lint είναι ένα λιπαντικό εργαλείο που αναλύει τη σύνταξη CSS με βάση συγκεκριμένες παραμέτρους που αφορούν την απόδοση, την προσβασιμότητα και τη συμβατότητα του CSS σας. Θα εκπλαγείτε με τα αποτελέσματα, αναμένετε πολλές προειδοποιήσεις στο CSS σας. Ωστόσο, αυτά τα σφάλματα θα σας βοηθήσουν τελικά να διορθώσετε τη σύνταξη CSS και να την καταστήσετε πιο αποτελεσματική. Επιπλέον, θα είστε επίσης ένας καλύτερος συγγραφέας CSS.

CSS ColorGuard

CSS ColorGuard είναι ένα σχετικά νέο εργαλείο. Είναι χτισμένο ως μονάδα κόμβου και τρέχει σε όλες τις πλατφόρμες: Windows, OS X και Linux. Το CSS ColorGuard είναι ένα εργαλείο γραμμής εντολών που θα σας ειδοποιήσει αν χρησιμοποιείτε παρόμοια χρώματα στο φύλλο στυλ σας. π.χ. # f3f3f3 είναι πολύ κοντά # f4f4f4, έτσι μπορείτε να θελήσετε να εξετάσετε τη συγχώνευση των δύο. Το CSS ColorGuard είναι ρυθμιζόμενο, μπορείτε να ορίσετε το όριο ομοιότητας καθώς και να ορίσετε τα χρώματα που θέλετε να αγνοήσει το εργαλείο.

CSS Dig

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

 χρώμα: #ccc; χρώμα: # cccccc; χρώμα: # CCC; χρώμα: # CCCCCC; 

Αυτές οι δηλώσεις χρώματος κάνουν το ίδιο πράγμα. Μπορείτε επίσης να πάτε με το #ccc ή με το κεφάλαιο # CCC ως πρότυπο. Το CSS Dig μπορεί να εκθέσει αυτό το πλεόνασμα και για άλλες ιδιότητες του CSS και θα μπορείτε να κάνετε τον κώδικα σας πιο συνεπής.