Πώς να γράψετε πραγματικά φοβερό CSS

Όλοι μιλούν για «συμβουλές» και «pro-tips» για τη σύνταξη εξαιρετικών CSS.

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

Επιτρέψτε μου να σας ταξιδέψω στο πώς να γράψετε πραγματικά άσχημα CSS.

Ετοιμος?

Σημείωση: ακόμα κι αν ορκίζεστε με CSS-in-JS και δεν αγαπάτε τη βανίλια CSS, όλοι συμφωνούμε σε κάτι: όλοι πρέπει ακόμα να γνωρίζουμε κάποια CSS…

Έτσι, είτε γράφετε CSS, είτε κάποιο υπερσύνολο όπως το SASS, ή απλά CSS-in-JS, θα συνεχίσετε να επωφελείστε από το να γνωρίζετε ακριβώς πώς είναι το κακό CSS.

Ποιος γράφει σχόλια; Κανένας.

Είναι τόσο εύκολο να γλιστρήσετε εδώ που δεν θα παρατηρήσετε πολύ γρήγορα.

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

Πόσο έξυπνο, ε;

Αφήστε την υπερηφάνεια σας στην άκρη και σώστε τον εαυτό σας και άλλους συμπαίκτες σας από το άγχος.

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

Η χώρα των σύνθετων επιλογών

Ναι! Μόλις μάθατε CSS και νιώθετε στην κορυφή του κόσμου. Λοιπόν, ήρθε η ώρα να αναδείξετε κάποιους μυς επιλογέα.

Κακή κίνηση.

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

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

Απλά προσθέστε μια τάξη στο στοιχείο και συνεχίστε τη ζωή!

Ακόμα και σε σενάρια όπου πρέπει να πληροίτε τα κριτήρια επιλογής με πολλές κατηγορίες, πάντα προτιμάτε την απλότητα.

Το απλό είναι καλό, σχεδόν πάντα!

Εκτέλεση? Σκατά αυτό!

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

Αλλά περίμενε…

Κατανοώ ότι οι υπολογιστές έχουν αναπτυχθεί γρηγορότερα και τα προγράμματα περιήγησης συνεχίζουν να βελτιστοποιούνται. Ανεξάρτητα, οι απλοί επιλογείς πρέπει πάντα να προτιμώνται και η κατανόηση του τρόπου με τον οποίο το πρόγραμμα περιήγησης διασχίζει το DOM για να βρει τον επιλογέα σας εξακολουθεί να είναι κάτι!

Οι πιθανότητες είναι, διαβάζετε τους επιλογείς σας από αριστερά προς τα δεξιά.

Ωστόσο, το πρόγραμμα περιήγησης ταιριάζει με τους επιλογείς από δεξιά προς τα αριστερά, οπότε μπορεί να εξαλείψει στοιχεία που δεν ταιριάζουν όσο το δυνατόν γρηγορότερα.

Αν το ήξερες αυτό, πιθανότατα να είσαι πιο επιεικής στα προγράμματα περιήγησης. Αξίζουν την αγάπη σας.

Λαμβάνοντας υπόψη το παραπάνω γραφικό, το πρόγραμμα περιήγησης θα ταιριάζει με όλα τα στοιχεία (*) και θα ελέγξει επίσης εάν είναι απόγονοι του body.

body * { ... } 

Μα γιατί? Σχεδόν κάθε ορατό στοιχείο είναι ιδανικά απόγονος του dy> element. That’s just a needless inefficient check.

I Suck at Naming Things, so I don’t even bother.

There are only 2 hard things in computer science. Naming things and …

Yeah, I think you already heard that somewhere. Naming things can be hard, but that doesn’t mean you shouldn’t give them some thought, or go completely cryptic.

I doubt there’s any situation where it makes sense to use single letters as class names.

.u { font-size: 60rem;}

And what about super-specific class names?

.former-black-now-red-paragraph { color: red;}

Those don’t do any good, either.

While the name may seem to convey some meaning, you very likely have broken a huge part of the class’s re-usability. Which, by the way, is the primary reason for having classes.

Now, if you wanted to style a regular red the paragraph, the previous name is just so specific, it wouldn’t make sense.

Use meaningful names, but just don’t overdo it.

I Heard Classes were Great. Overuse them!

Classes are great, and everyone loves them. But, as with everything else, too much of something is generally a bad idea.

You see, if a group of classes will mostly be used together, just group them into one class.

When you choose to group these classes is perhaps subjective. If you’re building an atomic library of some sort, you may tend towards this.

If you’re writing a large app, you’re likely better off grouping classes in a meaningful way, as opposed to having a ton of classes on a single element.

When possible, avoid over modularised classes.

I am a CSS Purist. I don’t do SASS, LESS, etc.

You’re a CSS purist, I’m a CSS purist, we’re both purists. Let’s get that out of the way.

Now, to the bone of contention.

There are definitely use cases where just writing vanilla CSS is great! For example, if I’m not using a CSS-in-JS solution for my React projects, I could decide to go the pure CSS route. It doesn’t hurt.

However, if you’re writing a large app with a ton of vanilla CSS flying around, I bet introducing a CSS preprocessor will make your development more interesting and contribute towards a more maintainable CSS codebase.

Again, I’m not saying use preprocessors every single time. I’m saying don’t just close out that option. It could save you!

You’ve got a lot of Important Style there!

I hate CSS. It just never works. So, what’s the fix?

Have a ton of !important all over the place when I need to override any declarations. Haha!

While this sounds like a decent plan to your lazy self, over-using the !important rule will only result in a grossly unmaintainable CSS document.

The next time you need to use !important, be sure you’re not doing so because you’re too lazy to fix your cascade issues.

CSS isn’t that bad. Embrace it.

Want to write Better CSS?

I have created a free CSS guide to get your CSS skills blazing, immediately. Get the free ebook.