CSS frameworks : Αξίζουν ή όχι

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

Η ιδέα πίσω από τα CSS frameworks είναι πως σε κάθε site/project που αναλαμβάνουμε, χρησιμοποιούμε πολλά κοινά στοιχεία, όπως για παράδειγμα το κλασικό CSS reset file (πάντα του Eric Meyer), κάποια default styles για τα σημαντικότερα elements (όπως headings, tables, φόρμες κτλ.), κάποια styles μόνο για print, ενώ πολλοί πάνε τα πράγματα ακόμα παραπέρα, χρησιμοποιώντας styles για να καθορίσουν την διάταξη του site (columns και rows), να χρησιμοποιήσουν εφέ στις λίστες/μενού τους, και πολλά άλλα. Η ιδέα λοιπόν που κρύβεται πίσω από ένα framework είναι πολύ απλή. Γιατί να ξαναγράφουμε όλους αυτούς τους κανόνες και κώδικα από την αρχή για κάθε site, όταν μπορούμε να τα γράψουμε μόνο μία φορά και να τα χρησιμοποιούμε ξανά και ξανά σε όλα μας τα project? Με τον παραπάνω τρόπο, θα γλιτώνουμε πολύ κόπο και χρόνο!

Φυσικά τα πράγματα δεν είναι και τόσο ρόδινα όπως ακούγονται. Και εγώ χρησιμοποιώ επαναλαμβανόμενο CSS κώδικα στα site μου, όμως προσπαθώ να αποφεύγω τα έτοιμα CSS frameworks, για τους παρακάτω λόγους :

  • Σε αναγκάζουν να χρησιμοποιείς κάποιο συγκεκριμένο, και πολλές φορές όχι semantic και accessible, στυλ στην markup, τις κλάσεις και τα id σου (πχ. class=”div-xyz”).
  • Συνήθως χρειάζεσαι πολύ λιγότερα πράγματα απ’ ότι σου προσφέρει ένα framework, με αποτέλεσμα να αναγκάζεις τον χρήστη να κατεβάζει άσκοπα κώδικα, που δεν χρησιμοποιεί!
  • Ακόμα και εάν είσαι έμπειρος στην CSS, αρκετά frameworks είναι πολύπλοκα στην εκμάθηση τους. Επίσης εάν δημιουργηθεί κάποιο πρόβλημα/bug είναι πολύ πιο δύσκολο να εντοπίσεις τι φταίει.

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

Όπως ανέφερα και παραπάνω λοιπόν, έχω δοκιμάσει τα περισσότερα από αυτά, και λογικό είναι να έχω ξεχωρίσει κάποια από αυτά. Γενικότερα, απορρίπτω αμέσως 2 κατηγορίες framework. Αυτά που είναι πολύ μεγάλα σε μέγεθος και κώδικα, με αποτέλεσμα να αναγκάζουν τον χρήστη να περιμένει να φορτωθούν χίλια-δυο άχρηστα πράγματα, και σε αυτά που σε αναγκάζουν να χρησιμοποιείς non-semantic markup, κλάσεις και ids στον κώδικα σου. Με το παραπάνω σκεπτικό λοιπόν, έχω απορρίψει πολλά διάσημα frameworks, όπως YUI Grids CSS, 960, YAML, και πολλά άλλα, ενώ αντιθέτως έχω χρησιμοποιήσει αρκετές φορές το Boilerplate το οποίο δεν αντιμετωπίζει τα παραπάνω προβλήματα, ενώ το σκεπτικό του βασίζεται στην απλότητα τόσο του κώδικα του, όσο και της λειτουργίας του.

To Boilerplate λοιπόν είναι ένα πολύ απλό framework, το οποίο δεν περιέχει περίεργες κλάσεις και ids, αλλά προσφέρει μια πολύ ολοκληρωμένη βάση για τον CSS κώδικα σας. Έτσι κάθε φορά που το χρησιμοποιήτε σε κάποιο project, έχετε τον βασικό CSS κορμό έτοιμο, όπως για παράδειγμα ένα reset file, default styles για όλα τα elements (headings, παραγράφους, λίστες, κτλ.), ένα βασικό print-only style και κάποιες πάρα πολύ βασικές κλάσεις. Το δεύτερο χαρακτηριστικό που μου αρέσει στο συγκεκριμένο framework, είναι πως έχει χωρισμένα τα CSS αρχεία με έξυπνο τρόπο, όπως για παράδειγμα ένα αρχείο για την τυπογραφία (typography.css), άλλο για τις φόρμες (forms.css), άλλο για το UI της οθόνης (screen.css) κτλ., οργανώνοντας έτσι προκαταβολικά τον κώδικα σας! Από εκεί και πέρα, ότι extra θέλετε, το γράφεται μόνοι σας! Προσωπικά με έχει κερδίσει αυτή η μινιμαλιστική προσέγγιση που έχει, γιατί μέσα σε πολύ λίγη ώρα μπορώ να στίσω τον βασικό κορμό CSS ενός project, ενώ ταυτόχρονα για οτιδήποτε θέλω να προσθέσω ή να αλλάξω, γίνεται πολύ εύκολα και γρήγορα λόγο της έξυπνης κατηγοριοποίησης και ονοματολογίας των αρχείων του.

Αυτά τα λίγα λοιπόν για τα CSS Frameworks. Γενικότερα δοκιμάστε όσα περισσότερα γίνεται (όπως βλέπεται είναι πάρα πολλά) και προσπαθείστε να βρείτε αυτό που σας ταιριάζει! Εάν ξέχασα κάποιο framework που χρησιμοποιείτε ή που νομίζεται πως αξήζει να αναφερθεί, αφήστε μου ένα σχόλιο, για το κοιτάξω κι αυτό…

  • Ωραίο το boilerplate Γιάννη! Μέχρι στιγμής είχα δει λιγάκι μόνο το Blueprint που αν και πολύ καλό ήταν όντως βαρύ και θα έπρεπε να αφιερώσεις αρκετή ώρα για να εξικοιωθείς μαζί του…

    Χμ, ομολογώ ότι βλέποντας τώρα το Boilerplate μου έδωσε ιδέα για template generation από χρήση με την χρήση του! 😀

    Once again, περιεκτικότατο το άρθρο σου και νομίζω ότι θα βοηθήσει πολλούς.

  • χάρης

    συμφωνώ στα περισσότερα που λές. Αλλά γιατι λές:

    >> Σε αναγκάζουν να χρησιμοποιείς κάποιο συγκεκριμένο,
    >>και πολλές φορές όχι semantic και accessible, στυλ
    >>στην markup, τις κλάσεις και τα id σου (πχ. class=”div-
    >>xyz”)

    Το sematic/accesible απ’ όσο ξέρω πάει στα html tags όχι στα ονόματα των κλάσεων. Αν έχω ένα class=”lalakoajlkjdlklajslxas” ορισμένο και στο css file, δε νομίζω ότι χαλάει το sematic της σελίδας μου.
    Άλλωστε δε νομίζω ότι οι search engines, ή οι ειδικοί browsers (για τυφλούς, κτλ) να χρησιμοποιούν τα CSS. Συνήθως έχουν δικά τους stylesheets.

  • Μερικές βιβλιοθήκες με snippets που μου βγαλανε το λαδι να βρω-φτιαξω και απο εκει και περα καθε site το δικο του stylesheet from scratch. Δεν τα βγαζω ακυρα σιγουρα παιζουνε το ρολο τους απλα εχω συνηθισει ετσι και μου αρεσει.

    Great post John 🙂

  • John Tsevdos

    @HitMan : Ευχαριστώ για τα καλά λόγια man! Αφού το ξέρεις, μόνο τα καλύτερα βρίσκεις εδώ 🙂

    @χάρης : Εδώ πέρα ανοίγεις μεγάλο θέμα! Ένα element με class=”lalakoajlkjdlklajslxas” χαλάει το semantic της σελίδας, γιατί δεν δίνει κάποια περαιτέρω εξήγηση για το element. Αντίθετα ένα element με class=”warning”, εξηγεί αρκετά πράγματα για το εν λόγω element. Θα μου πεις μικρό το κακό, άλλοι δεν χρησιμοποιούν σωστά καν τα semantic tags, blockquote, cite κτλ. Συμφωνώ, αλλά προσωπικά με χαλάνε τιμές σε classes και ids που δεν σημαίνουν κάτι…

    Για το θέμα screen readers συμφωνώ, ωστόσο και εκεί εκεί δημιουργούνται διάφορα προβληματάκια, όπως μη σωστή ροή του περιεχομένου, επειδή αναγκαζόμαστε να χρησιμοποιήσουμε την ροή του framework, έτσι ώστε να χτίσουμε πάνω σε αυτό το design. Για παράδειγμα εάν χρησιμοποιείς κάποιο έτοιμο css framework, και θες να εμφανίζεται πρώτα το κεντρικό περιεχόμενο σου και μετά το υπόλοιπο περιεχόμενο, μπορεί να είναι πολύ δύσκολο εως και και ακατόρθωτο να γίνει από κάποια framework (δεν ξέρω εάν το εξήγησα καλά)…

    @Gerasimos : Εγώ πάλι βαριέμαι να δημιουργήσω κάτι τέτοιο, αλλά και να το δημιουργήσω έχω την αίσθηση ότι θα τα χάνω από εδώ και από εκεί τα snippets (δουλεύω σε 3 διαφορετικά computers)… Anyway, υπάρχουν αρκετές λύσεις για όλους!!!