Πώς να γράψετε καλύτερα CSS σε ομάδες με ACSS - Μια δυναμική βιβλιοθήκη Atomic CSS

Το να γράφεις καλά Cascading Style Sheets (CSS) είναι δύσκολο και γίνεται πιο δύσκολο σε μια ομάδα όπου πολλοί προγραμματιστές γράφουν CSS.

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

Αλλά πρώτα, επιτρέψτε μου να καθορίσω ορισμένες βασικές προϋποθέσεις στις οποίες ισχύει το άρθρο μου.

Μερικές προϋποθέσεις που προϋποθέτει αυτό το άρθρο:

  1. Εργάζεστε σε μια ομάδα όπου πολλοί προγραμματιστές γράφουν CSS.
  2. Οι οδηγίες είναι δύσκολο να εφαρμοστούν, εκτός εάν υπάρχουν αυτοματοποιημένα εργαλεία.
  3. Οι σχεδιαστές είναι δωρεάν πουλιά. Πραγματοποιούνται επανασχεδιασμοί.

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

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

Πρόβλημα # 1: Η ονομασία τάξεων είναι δύσκολη

Προγραμματιστής 1 (ενώ κωδικοποιεί) : Μοιάζει με κεφαλίδα, επιτρέψτε μου να χρησιμοποιήσω τον .headerεπιλογέα για αυτό.

Developer 2 (στην αίτηση έλξης) : Τ του δεν είναι μια μπάλα. Μοιάζει με τίτλο για μένα. Επιπλέον, δεν μπορούμε να το ονομάσουμε μόνο «κεφαλίδα», καθώς αυτό το στοιχείο δεν είναι αρκετά γενικό. Ας το ονομάσουμε .panel-headerή καλύτερα .panel-title.

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

Διαθέσιμες λύσεις:

  • BEM - υπάρχουν συμβάσεις ονομασίας όπως η BEM για την επίλυση αυτού του προβλήματος σε κάποιο βαθμό. Αλλά στο τέλος είναι μια οδηγία (όλοι γνωρίζουμε πόσο εύκολο είναι να ακολουθήσουμε τις οδηγίες). Το BEM ενδέχεται να σας εμποδίσει να πάτε εντελώς ad-hoc, αλλά πρέπει να βρείτε ένα αρχικό όνομα κλάσης για τα στοιχεία σας.
  • Ατομικές τάξεις - μια άλλη κοινή προσέγγιση αυτές τις μέρες για να πάει εντελώς ατομική με ατομικές τάξεις. Μικρές τάξεις που κάνουν μόνο ένα πράγμα. Π.χ. Tachyons. Ανακατέψτε και ταιριάξτε για να πάρετε αυτό που χρειάζεστε. Αυτό είναι ένα καλό βήμα προς την "παράλειψη ονομασίας" εντελώς, αλλά τι γίνεται αν στο μέλλον δεν υπάρχει τάξη για ένα συγκεκριμένο πράγμα; Πώς μπορώ να προσαρμόσω τις υπάρχουσες ατομικές τάξεις σύμφωνα με το σχέδιό μου; Φορτώνουν πάντα όλα τα μαθήματα στη σελίδα μου είτε τα χρησιμοποιώ είτε όχι; Χρειαζόμαστε κάτι περισσότερο.

Πρόβλημα # 2: Δυνατά σημεία επιλογής

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

Διαθέσιμες λύσεις:

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

Πρόβλημα # 3: Τι γίνεται με το CSS που δεν χρησιμοποιείται;

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

Διαθέσιμες λύσεις:

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

Πρόβλημα # 4: Ανακατασκευή

Προγραμματιστής 1 : Αυτό το CSS έχει γίνει αρκετά ακατάστατο. Νομίζω ότι πρέπει να το αναθεωρήσουμε.

Προγραμματιστής 2 : Πιστεύετε ότι αυτός ο επιλογέας που τροποποιείτε μπορεί επίσης να χρησιμοποιείται στη σελίδα X; Ελέγξατε;

Προγραμματιστής 1 : Γαμώτο! Έχετε δίκιο ... το έλειψα. Αυτή η σελίδα X είναι πολύ κρίσιμη για να το αγγίξετε. Γνωρίζετε γιατί αυτός ο προγραμματιστής χρησιμοποίησε την ίδια τάξη και στις δύο σελίδες;

Προγραμματιστής 2 : Χωρίς ιδέα. Έφυγε από την εταιρεία. Ας αφήσουμε το CSS ως έχει :(

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

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

Σε μια ομάδα, η πιο μη προφανής αλλά τέλεια λύση θα ήταν - να σταματήσετε να γράφετε CSS!

«Περίμενε, τι λες; Αυτό δεν είναι δυνατό!". Ίσως το σκέφτεστε, αλλά επιτρέψτε μου να σας συστήσω σε κάτι.

Η λύση all-in-one - ACSS (Atomizer)

Το ACSS (που προέρχεται από το Atomic CSS) είναι ένα πλαίσιο βασισμένο σε στοιχεία για το στυλ μέσω ατομικών τάξεων που αναπτύχθηκαν στο Yahoo! Και το Atomizer είναι ένα εργαλείο που το διευκολύνει. Θα εξηγήσω περισσότερα. Αλλά πριν από αυτό, επιτρέψτε μου να σας δείξω πώς κάνετε το στυλ στο ACSS.

Για να ακολουθήσετε τα δείγματα κώδικα σε αυτό το άρθρο, σας προτείνω να εγκαταστήσετε το Web Maker (μια παιδική χαρά front-end που υποστηρίζει τη γραφή ACSS χωρίς καμία εγκατάσταση) στο πρόγραμμα περιήγησης Chrome.

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

 I am a button

Μία πρόταση - μην κρίνετε από την πρώτη ματιά σε αυτή τη σύνταξη. Συνεχίστε να διαβάζετε, δώστε του χρόνο, συζητήστε και μετά αποφασίστε. Τα μαθήματα στην buttonετικέτα μπορεί να φαίνονται διαφορετικά, αλλά θα συμφωνούσατε ότι μπορούν να μαντέψουν σε μεγάλο βαθμό για το τι κάνουν. Είναι ένα κουμπί με μπλε , λευκό , 10 εικονοστοιχεία , ενσωματωμένο μπλοκ , δείκτη και μετατρέπεται σε κόκκινο στο hover.background-colorcolorpaddingdisplaycursorbackground-color

Εάν έχετε ήδη εγκαταστήσει το Web Maker, ανοίξτε το κάνοντας κλικ στο εικονίδιο του Web Maker στην επάνω δεξιά πλευρά του προγράμματος περιήγησης Chrome. Επικολλήστε το παραπάνω HTML στο πλαίσιο κώδικα HTML και επιλέξτε Atomic CSS ως τη λειτουργία στο πλαίσιο κώδικα CSS. Μόλις το κάνετε αυτό, θα δείτε κάποια αυτόματα CSS να δημιουργούνται στο παράθυρο κώδικα CSS, όπως:

Το CSS που βλέπετε δημιουργείται από το εργαλείο Atomizer που ανέφερα παραπάνω. Βασικά, διαβάζει HTML (ή οποιοδήποτε αρχείο), εντοπίζει τάξεις ACSS από αυτές και δημιουργεί CSS για αυτές τις κατηγορίες που εντοπίστηκαν. Έτσι γράφετε μόνο HTML με κατάλληλες τάξεις που θέλετε να χρησιμοποιήσετε και το CSS δημιουργείται αυτόματα!

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

Inline, αλλά όχι inline;

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

Όχι άλλο όνομα! ;

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

Ένα πολύ διάσημο ρητό λέει:

Υπάρχουν μόνο δύο σκληρά πράγματα στην Επιστήμη των Υπολογιστών: ακύρωση προσωρινής μνήμης και ονομασία πραγμάτων. - Φιλ Κάρλτον

Σούπερ εύκολη ενημέρωση και αναδιαμόρφωση

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

Δεν είναι ένα byte του CSS που δεν χρησιμοποιείται;

Εφόσον το Atomizer δημιουργεί CSS από τις τάξεις που έχετε χρησιμοποιήσει στην πραγματικότητα, δεν έχετε χρησιμοποιήσει ποτέ CSS στο φύλλο στυλ σας. Δεν είναι αυτή η τρελή παράσταση που όλοι αναζητούσαμε; Υπάρχει επίσης ένα εργαλείο όπου μπορείτε να ελέγξετε πόσο μπορεί να ωφεληθεί ένας ιστότοπος από το ACSS - //atomize-io.herokuapp.com/

Δεν υπάρχουν οδηγίες για νέους προγραμματιστές;

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

Επίσης, υπάρχει μια ωραία επέκταση του Visual Code από τον Pankaj Parashar που προτείνει αυτόματα αυτές τις τάξεις απευθείας στο πρόγραμμα επεξεργασίας. Επομένως, ακόμη και η αναφορά δεν απαιτείται με αυτήν την επέκταση. Η ενσωμάτωση προγραμματιστή ολοκληρώθηκε!

Εκτός από αυτά τα πλεονεκτήματα, υπάρχουν πολλά περισσότερα καλούδια με το ACSS.

  • Γενικά χρησιμοποιούμε τα ίδια παλιά ζεύγη ιδιοκτησίας / αξίας σε μια εφαρμογή. Έτσι, το δημιουργημένο φύλλο στυλ ουσιαστικά σταματά να αναπτύσσεται μετά από ένα συγκεκριμένο σημείο . Επειδή κάθε μοναδικό ζεύγος ιδιοτήτων / τιμής έρχεται μία φορά στο τελικό φύλλο στυλ.
  • Λόγω του παραπάνω σημείου, θα μπορούσατε πραγματικά να χρησιμοποιήσετε το ίδιο φύλλο στυλ στη σουίτα πολλαπλών προϊόντων που δεν θα ήταν ποτέ τόσο μεγάλο. Ίδιο φύλλο στυλ CSS για όλα τα προϊόντα!
  • Τραβήξτε αίτημα που μοιάζει με όνειρο. Φανταστείτε αιτήματα τραβήγματος όπου δεν βλέπετε αρχεία .css. Δεν υπάρχουν πλέον μαθήματα ελέγχου για διενέξεις νοήματος ή ειδικότητας . Επειδή γνωρίζετε το σωστό ατομικό CSS, το οποίο θα πρέπει να υπάρχει, θα δημιουργηθεί. Δεν θα είναι αυτή η χώρα των θαυμάτων;

Αποτυχία μύθου

Έχουν αναπτυχθεί πολλοί μύθοι σχετικά με το ACSS στο Διαδίκτυο. Αυτό οφείλεται στη ρηχή αξιολόγηση του πλαισίου και στην πρώτη εκτίμηση.

Είναι ίδιο με το ενσωματωμένο στυλ. Είναι κακό!

Οχι δεν είναι. Έχουμε ήδη δει παραπάνω. Είναι σίγουρα τόσο ισχυρό όσο το ενσωματωμένο στυλ αλλά δεν κληρονομεί μειονεκτήματα από αυτό.

Είναι δύσκολο να γράφεις όλα αυτά τα ίδια μαθήματα ξανά και ξανά.

Ναι είναι. Η ACSS λέει ότι είναι ένα πλαίσιο βασισμένο σε συστατικά. Εάν δεν προτυποποιείτε καθένα από τα στοιχεία σας και αντιγράφετε ήδη HTML, ας πούμε ότι δημιουργείτε ένα κουμπί κάθε φορά, το ACSS δεν είναι για εσάς.

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

Hello World

που πρέπει να συγκεντρωθούν σε κάτι όπως:

Hello World

Τα μαθήματα δεν έχουν κανένα νόημα

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

Θα ήθελα να παραθέσω μια παράγραφο από ένα άρθρο του Χάρι Ρόμπερτ:

Ένα κοινό επιχείρημα κατά της BEM είναι ότι είναι άσχημο. Τολμώ να πω ότι εάν αποφεύγετε τον κώδικα που βασίζεται αποκλειστικά στην εμφάνισή του, τότε χάνετε συχνά το νόημα. Εκτός αν ο κώδικας γίνεται χωρίς λόγο δύσκολο να διατηρηθεί, ή πραγματικά πιο δύσκολο να διαβάσει, τότε ίσως δεν πρέπει να σκεφτούν δύο φορές πριν το χρησιμοποιήσετε, αλλά αν είναι μόνο φαίνεται περίεργο », αλλά έχει έγκυρη σκοπό, τότε θα πρέπει σίγουρα να εξεταστεί πλήρως πριν γράφοντας το. - Χάρι Ρόμπερτς

Αλλά εδώ είμαστε, χρησιμοποιώντας το BEM για να κάνουμε λογικές τις βάσεις κώδικα.

Δεν θα μπορώ να κάνω το X πράγμα στο ACSS

Θα εκπλαγείτε να δείτε τι είναι εφικτό μόνο από μαθήματα που παρέχονται στο ACSS. Ψευδο-στοιχεία, flexbox, ερωτήματα πολυμέσων, το ονομάζετε. Και η σύμβαση που επινόησαν για να κάνουν όλα αυτά είναι απλά λαμπρή! Παρόλο που ενδέχεται να μην υπάρχουν ακόμη ορισμένα πράγματα στο ACSS, όπως CSS Grids, μπορείτε πάντα να ανοίξετε ένα ζήτημα ή να συνεισφέρετε στο Atomizer.

Στο τέλος

Θα σας ζητούσα να δοκιμάσετε το ACSS εάν καταλαβαίνετε τον πόνο της γραφής και της διαχείρισης CSS σε μια ομάδα. Και θυμηθείτε, η χρήση του ACSS δεν σημαίνει ότι δεν μπορείτε να γράψετε απλό CSS. Τα εργαλεία πρέπει να χρησιμοποιούνται όπου λειτουργούν καλύτερα. Εάν υπάρχει κάτι που θεωρείτε απλό CSS, θα πρέπει σίγουρα να το χρησιμοποιήσετε.

Επίσης, η ACSS δεν ακολουθεί μόνη της αυτήν την προσέγγιση. Υπάρχουν παρόμοιες εναλλακτικές λύσεις όπως το Blowdry CSS, το Cell CSS κ.λπ., το καθένα φέρνει το δικό του στυλ για να επιτύχει το ίδιο πράγμα.

Εάν έχετε οποιεσδήποτε ερωτήσεις σχετικά με το ACSS, μπορείτε να κάνετε ping στον Twitter Thierry Koblentz, τον ίδιο τον άνδρα της ομάδας ACSS, στο Twitter. Κάντε μια ερώτηση στη συλλογή FAQ που διατηρεί ή συμμετέχετε στην ομάδα Atomizer στο Gitter. Ή βάλτε τα σχόλια αυτού του άρθρου.

Τέλος, θα ήθελα να ευχαριστήσω τους Thierry Koblentz και Jitendra Vyas για την αναθεώρηση αυτού του άρθρου.

Αν σας αρέσει αυτό το άρθρο, δείξτε την αγάπη σας χειροκρότημα ?? σχετικά με το άρθρο. Επίσης, ακολουθήστε με στο Twitter, όπου μοιράζομαι περισσότερα άρθρα front-end και έργα μου.

Περισσότερα για ανάγνωση

  • //www.smashingmagazine.com/2013/10/challenging-css-best-practices-atomic- Approach/ - από τον Thierry Koblentz
  • Repo Atomizer GitHub - //github.com/acss-io/atomizer
  • Τεκμηρίωση ACSS - //acss.io/quick-start.html
  • Συχνές ερωτήσεις ACSS που καταρτίστηκαν από τον Thierry - //github.com/thierryk/ACSS-QA
  • Παιδική χαρά ACSS - //webmakerapp.com