Οι βέλτιστες πρακτικές μου – CSS

1. Πρόλογος

Σήμερα η CSS είναι υποαξιοποιημένη. Υπάρχει ένα χάσμα ανάμεσα στους προγραμματιστές Angular/React/Vue/... και στους UI designers.

Ο UI designer φωλιάζει τριάντα <div> με σαράντα κλάσεις CSS πάνω τους, ενώ ο Angular dev ξετρελαίνεται κάθε δύο εβδομάδες με την τελευταία lib, την ώρα που το dependency hell του έχει πάψει προ πολλού να κάνει build χωρίς npm i --force, επειδή τα peer dependencies συγκρούονται. Η CSS και η HTML ελάχιστα ενδιαφέρουν τον φανατικό της TypeScript. Για τα πιο απλά inputs πρέπει να χρησιμοποιήσει Material, γιατί φοβάται ότι αλλιώς δεν θα τα βγάλει πέρα με την επικύρωση. Και σε καμία περίπτωση δεν θέλει να χάσει χρόνο ανακαλύπτοντας ξανά τον τροχό. Ότι με την πρώτη απαίτηση που δεν καλύπτει η βιβλιοθήκη θα χάσει πάλι όλο αυτόν τον χρόνο και θα βρεθεί να διαβάζει τα GitHub issues της lib, δεν του περνάει από το μυαλό.

Ως προγραμματιστής σε ένα fullstack project σπάνια έχεις την ευκαιρία να αξιοποιήσεις τις γνώσεις σου ως frontend designer. Παίρνεις τα mockups των οθονών στο Figma και πρέπει να τα υλοποιήσεις ακριβώς έτσι. Οι περισσότεροι frontend developers αυτού του είδους δεν έχουν καν επίγνωση ότι ένα responsive layout γίνεται με μία μόνο γραμμή CSS. Η CSS είναι πιο ισχυρή από ποτέ. Πέρασαν οι εποχές των JS-style hacks, των αμέτρητων media queries και των workarounds για τον IE 8. Ζήτω!

2. Τέλεια κεντραρισμένο

Δεν έπιανε πάντα στις συνεντεύξεις, αλλά εμένα μου άρεσε πολύ: στην ερώτηση αν είμαι καλός στο frontend, απαντούσα με χαρά «Ω ναι. Μπορώ να κεντράρω κάθετα ένα <div>.»

Είναι διαβόητα δύσκολο να κεντράρεις ένα div.

Όχι πια:

.parent {
    display: grid;
    place-items: center
}

3. Responsive grid

.parent {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

4. Responsive flex

.parent {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.box {
    flex: 1 1 150px; /*  Stretching: */
    flex: 0 1 150px; /*  No stretching: */
    margin: 5px;
}

5. Διάταξη σελίδας

.parent {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

6. Πλαϊνή στήλη

.parent {
    display: grid;
    grid-template-columns: minmax(150px, 25%) 1fr;
}

7. Ευχαριστίες

1-Line Layouts