CSS 101: Τα μυστικά του στυλ Χάρης Βαλτζής Full stack web developer vforvaltzis.dev

Playing football Writing CSS is very simple, but playing writing simple football CSS is the hardest thing there is. - JOHAN CRUYFF

Γιατί να μάθω Vanilla CSS και όχι μόνο Frameworks 1 Η Vanilla CSS είναι η βάση όλων των CSS frameworks. 2 Ελαφρύτερος κώδικας. 3 Σίγουρα κάποια στιγμή θα σου χρειαστεί. 4 Δημιουργία προσωπικού framework προσαρμοσμένο στις ανάγκες σου. 5 Δεν περιορίζεσαι και δεν εξαρτάσαι απο τα limitations ενός framework.

Αρνητικά των Frameworks 1 Αχρησιμοποίητος Κώδικας (Code Bloat) 2 Δυσκολία Debugging. 3 Σίγουρα κάποια στιγμή θα σου χρειαστεί. 4 Ανάγκη επεξεργασίας κώδικα για να λάβεις διαφορετικό αποτέλεσμα απο το προκαθορισμένο. 1 Έλλειψη δημιουργικότητας. Πανομοιότυπα σχέδια. Θετικά

rem vs em Head 2 Head rem em Υπολογισμός Αναφέρεται πάντα στο μέγεθος της γραμματοσειράς του (root). Αναφέρεται στο μέγεθος της γραμματοσειράς του γονικού στοιχείου. Σταθερότητα Σταθερό, αφού εξαρτάται μόνο από το font-size του . Ευέλικτο, αφού εξαρτάται από το μέγεθος του γονικού στοιχείου. Αλλαγές στο Context Δεν επηρεάζεται από τα γονικά στοιχεία, πάντα υπολογίζεται ως root. Μπορεί να επηρεαστεί από τις αλλαγές στο γονικό στοιχείο. Χρήση Ιδανικό για global χρήση και consistency. Χρησιμοποιείται για σχεδιασμό που βασίζεται στις σχέσεις μεταξύ στοιχείων.

Rem vs Em in Container

Perfect for buttons

Perfect for buttons

Before and After PseudoElements

No content

No content

No content

Γιατί το left: 50% δεν πάει στο κέντρο;

Click χωρίς Javascript

Click χωρίς Javascript

Τι σημαίνει τελικά mobile first;