Preprocessors, Frameworks, κακοί συνάδελφοι και εγώ..

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

Preprocessors, Frameworks, κακοί συνάδελφοι και εγώ..

Δημοσίευση από apsuh0s » 18 Ιουν 2013 18:17

Καλησπέρα σε όλους!

CSS Preprocessors

Εδώ και λίγο καιρό αποφάσισα να ρίξω μια σοβαρή ματιά στους CSS preprocessors και πιο συγκεκριμένα στον Sass (λόγω Compass). Αν και φανταζόμουν τι δυνατότητες σου δίνονται όταν γράφεις δυναμικά stylesheets μπορώ να πω πως εξεπλάγην ευχάριστα όταν τελικά το έπιασα στα χέρια μου. To learning curve δεν αποτελεί καν θέμα προς συζήτηση και απ όσο είδα μέχρι στιγμής όλα είναι απλά και εύκολα.

Front End Frameworks

Κάτι που με ενοχλούσε ανέκαθεν με τα front end frameworks (βλ. bootstrap, foundation) ήταν το βαρύ unsemantic markup που αναγκαζόσουν να γράφεις ώστε να κάνεις αυτό που πραγματικά σκεφτόσουν.

Κώδικας: Επιλογή όλων

<div class="small-9 small-offset-2 large-9 large-offset-9 push-8 columns">module</div>
Πολλές φορές αναρωτιόμουν μήπως θα έπρεπε να συμβιβαστώ ώστε να μειωθεί ο χρόνος υλοποίησης ενός project σε σημαντικό βαθμό.

<blockquote>Σιγά ρε το συμβιβασμό.. Ο πελάτης δεν βλέπει το markup</blockquote>

Σε παλαιότερα threads στο freestuff και όχι μόνο, παρακολούθησα και πήρα μέρος σε συζητήσεις οι οποίες αφορούσαν ή μάλλον κατέληγαν στο αιώνιο ζήτημα:

To Framework or not to Framework

Με περίσσια άνεση έβλεπα ορισμένους να έχουν βάλει στη "φαρέτρα" τους τα εν λόγω frameworks. Θεωρούσαν πως responsive/adaptive προσεγγίσεις πλέον αποτελούν αναπόσπαστο κομμάτι των υπηρεσιών που οφείλει ένας front end developer να παρέχει (χωρίς μεταβολή κόστους). Άσε που ο Μάκης, ιδιοκτήτης ταβέρνας, προχθές μου ανέφερε:

<blockquote>Κοίταξε.. Κοστουμιά το προτζεκτάκι και να μπορώ να το βλέπω στο άϊφόουν του υιού και το άϊπαντ της γυναίκας -σα να είναι άλλο αλλά το ίδιο με προσαρμοστικότητα- με είπε 3 κατοσταρικάκια όλα κομπλέ μέσα..</blockquote>

Τι να απαντήσεις σε αυτό το μεγαλείο;;

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

Με preprocessors ξεκίνησες στα παράπονα και στη γκρίνια κατέληξες όμως..

Το συμπέρασμα είναι το εξής:

Έχουν βγει πολλά καλούδια εκεί έξω. Βλέπεις ο κόσμος να ιδρώνει και να παρακαλάει να γίνουν forked τα projects τους. Υπάρχει υλικό έτοιμο να βουτήξεις και να μη βγεις για κάμποσα χρόνια.

Υπάρχουν ελαφριά grid frameworks τα οποία με λίγη από τη μαγεία των preprocessors σου λύνουν τα χέρια. Πλεόν το markup σου είναι semantic και "ρε συ, τελειώνω τα layouts δυο-δυο!!"

Εγώ τελικά το αποφάσισα.. Θα παίζω με preprocessors, έτοιμα ελαφριά grids, θα έχω το νου μου για νέα καλούδια, θα ανανεώνω συνεχώς το προσωπικό μου framework και σίγουρα θα κοστολογώ την νέα γνώση που συσσωρεύεται όταν την εφαρμόζω.

Ok.. Αλλά αυτό τι είναι πάλι;; Γιατί μου τα κάνει compile έτσι;;

Κώδικας: Επιλογή όλων

.responsive-element &#123;
  @include media&#40;769px&#41; &#123;
    @include span-columns&#40;6&#41;;
  &#125;
&#125;
.new-context-element &#123;
  @include media&#40;min-width 320px max-width 480px, 6&#41; &#123;
    @include span-columns&#40;6&#41;;
  &#125;
&#125;

// CSS
@media screen and &#40;min-width&#58; 769px&#41; &#123;
  .responsive-element &#123;
    display&#58; block;
    float&#58; left;
    margin-right&#58; 2.35765%;
    width&#58; 48.82117%;
  &#125;
  .responsive-element&#58;last-child &#123;
    margin-right&#58; 0;
  &#125;
&#125;

@media screen and &#40;min-width&#58; 320px&#41; and &#40;max-width&#58; 480px&#41; &#123;
  .new-context-element &#123;
    display&#58; block;
    float&#58; left;
    margin-right&#58; 4.82916%;
    width&#58; 100%;
  &#125;
  .new-context-element&#58;last-child &#123;
    margin-right&#58; 0;
  &#125;
&#125;
E, κάτσε γράφε vanilla CSS.. Δε παλεύεσαι!

Εσείς ρε παίδες, πως δουλεύετε;
.ninja { color: black; visibility: hidden !important; }

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

Preprocessors, Frameworks, κακοί συνάδελφοι και εγώ..

Δημοσίευση από ThyClub » 18 Ιουν 2013 20:22

42

με άλλα λόγια δεν υπάρχει απάντηση.

Σε άλλα με το 960, σε άλλα με twitter bootstrap και σε άλλα με 1 reset & απλό css.

Άρα η απάντηση είναι: "ανάλογα" άρα 42
:wink:

Άβαταρ μέλους
Kainourios
Ruby Moderator
Δημοσιεύσεις: 504
Εγγραφή: 18 Μάιος 2005 16:20
Τοποθεσία: Κορυδαλλός
Επικοινωνία:

Preprocessors, Frameworks, κακοί συνάδελφοι και εγώ..

Δημοσίευση από Kainourios » 18 Ιουν 2013 20:48

Compass και SCSS σε κάθε project και ακολουθώ τις συμβουλές του SMACSS για σωστότερη οργάνωση των CSS. Είμαι όμως rails developer οπότε ήταν η default επιλογή, η rails έχει επίσης από default το assets pipeline που στα κάνει minified σε production χωρίς να ταλαιπωρηθείς.

Έχω προσαρμόσει κάπως τους κανόνες του SMACSS, δε μ'άρεσε το themes και το state folder οπότε τείνω περισσότερο με τα skroutz guidelines (αν και διαφοροποιούμαι και από εκεί λίγο).

Για admin panel τελευταία έπαιξα με το zurb, καλό ήταν αλλά μ'αρέσει λίγο καλύτερα το bootstrap τελικά και δε νιώθω άσχημα όταν τα χρησιμοποιώ σε toy projects (προτιμώ ακόμα να λέγομαι backend developer :P).

Για frontend που θες να είσαι περήφανος και να δείχνεις τη html σου, νομίζω με compass/scss μπορείς να φτιάξεις εύκολα custom grid layouts χωρίς CSS pollution ούτε σε markup ούτε σε τεράστια default CSS.

Αν θες vertical layouts πας με το rhythm και υπάρχει και το susy που έχει ενδιαφέρον και θέλω να το δοκιμάσω σύντομα. Εξαρτάται πάντα από τις ανάγκες του layout.

Πάντως όταν κάνεις catch up με το compass και αρχίσεις να το χρησιμοποιείς για να σου δημιουργεί sprites, δεν ξαναγυρνάς πίσω... πετάς σε ένα φάκελο τις εικόνες σου και στις κάνει αυτόματα από μόνο του ένα sprite. Αν θες σου φτιάχνει και τα classes αντίστοιχα, ανάλογα με τα ονόματα που του έχεις δώσει... αν και δεν μ'αρέσει γιατί σε περιορίζει, προτιμώ να τα φτιάχνω μόνος μου και να έχω ελευθερία σε height/width.

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης