Utility-first CSS Dar tu musca

 Utility-first CSS. Dar tu mușcă! 

Un set de clase primitive
ce ne permite stilizarea totală
fără a părăsi HTML
                        🟢  "Utility-first CSS" ne oferă un set de clase primitive ce ne permite stilizarea totală fără a părăsi HTML.
                        🟢  Asta e, poți stiliza HTML direct în HTML, și asta cu o posibilitate mare de customizare.
                        🟢  Clasele utilități oferă utilizatorului libertatea să proiecteze pagina web conform preferințelor de stilizare.
                        🟢  Este ca și cum am scrie stiluri CSS inline, doar că într-o manera mult mai elegantă și mai curată.


 Exemplu folosind varianta tradițională 1: 

<style> .card { padding: 10px; background: white; } .card__title { font-size: 20px; } </style> <template> <div > <h2 class="card__title">Lorem ipsum...</h2> </div> </template>

 Exemplu folosind varianta tradițională 2: 

<style scoped> div { padding: 10px; background: white; } div h2 { font-size: 20px; } </style> <template> <div> <h2>Lorem ipsum...</h2> </div> </template>

 Exemplu folosind clase utilități: 

<template> <div > <h2 >Lorem ipsum...</h2> </div> </template>

 Nu sunt aceleași stiluri inline? 

                               💈 Stilurile inline sunt aplicate local doar pe un singur element, (DRY)
                               💈 Stilurile inline nu pot fi procesate (variabile, functii)
                               💈 Stilurile inline nu se împacă bine cu cache (continutul se schimba des, sau scaleaza liniar)
                               💈 Stilurile inline sunt nelimitate. Ce este 7px?
                               💈 Stilurile inline permit doar afectarea unei singure proprietăți (clearfix, responsive,states)

 Comparație cu alte metodologii CSS 

                                                         🎈 Dependență clasică de HTML, nested CSS (exemplu)
                                                         🎈 Block Element Modifier (BEM) (exemplu)
                                                         🎈 Atomic CSS (ACSS)
                                                         🎈 Object oriented CSS (OOCSS)
                                                         🎈 Scalable and Modular Architecture for CSS (SMACSS)
                                                         🎈 ITCSS, MCSS, AMCSS, FUN ș.a.

 Dezavantaje Utility-first CSS 

                                                                                            🔥 Clase repetate
                                                                                            🔥 Lizibilitate

 Avantaje Utility-first CSS 

                                              ✨ Nu părăsești HTML / React / Angular / Vue niciodată (single source of truth)
                                              ✨ O structură mai curată a fișierelor și directoriilor (single source of truth)
                                              ✨ Viteză de development rapidă
                                              ✨ La revedere CSS. Sorry, not sorry
                                              ✨ Performanță
                                              ✨ Responsive și pseudo clase
                                              ✨ Dimensiunea CSS, încetează să mai crească
                                              ✨ Nu pierzi timp pe inventarea numelor noi pentru clase, oricum îl pierzi la componente
                                              ✨ Schimbările se simt cu mult mai sigur


 Îngrijorări de menținere 

 Îngrijorări de menținere 

Cea mai mare îngrijorare de menținere în abordarea Utility-first, este gestionarea repetării utilităților combinate.
Aceasta este ușor rezolvabilă prin extragerea în componente parțiale.
Înafară de asta, menținerea unui proiect care folosește utility-first CSS se dovedește a fi mult mai ușor menținută comparând cu un cod mare CSS utilizând metodele tradiționale de dezvoltare, doar din cauza menținerea HTML e cu mult mai ușoară decât menținerea CSS.
Companii mari ca GitHub, Heroku, Kickstarter, Twitch, Segment și altele, folosesc această abordare cu mare succes.

 Librării ce suportă Utility-first CSS 

                                                             ⚙️ Tailwind CSS https://tailwindcss.com/
                                                             ⚙️ Windi CSS https://windicss.org/
                                                             ⚙️ Bootstrap 5 https://getbootstrap.com/
                                                             ⚙️ Tachyons http://tachyons.io/
                                                             ⚙️ Bass CSS https://basscss.com/
                                                             ⚙️ Turret CSS https://turretcss.com/
                                                             ⚙️ Beard http://buildwithbeard.com/
                                                             ⚙️ Expressive CSS https://johnpolacek.github.io/expressive-css/
                                                             ⚙️ Shed CSS https://tedconf.github.io/shed-css/index.html
                                                             ⚙️ Solid https://solid.buzzfeed.com/
                                                             ⚙️ Marvel https://marvelapp.com/styleguide/overview/introduction

 Concluzii, în apărarea "Utility-First CSS" 

                            💖 Schimbarea modului în care scriem CSS nu este întodeauna ușor.

                            💖 Asta înseamnă că trebuie să uităm ce am învățat până acum.

                            💖 Abordarea de Utility-First este de ceva vreme, dar a prins viteză ultimii ani cu apariția Tailwind CSS.

                            💖 După ce te faci familiar cu Utility-First CSS nu mai dorești să te întorci la tradiționalul CSS.

                            💖 La început Utility-first CSS poate părea straniu, dar cum am menționat...

                             Utility-first CSS? Dar tu mușcă și ai să vezi! 🍔🍔🍔

 O grămadă de resurse 

                     🔗 https://medium.com/@johnpolacek/by-the-numbers-a-year-and-half-with-atomic-css-39d75b1263b4
                     🔗 https://blog.algolia.com/redesigning-our-docs-part-4-building-a-scalable-css-architecture/
                     🔗 http://www.fullstackradio.com/75
                     🔗 https://twitter.com/johnpolacek
                     🔗 https://tailwindcss.com/docs/utility-first
                     🔗 https://www.hongkiat.com/blog/utility-first-css-for-developers/
                     🔗 https://michaelzanggl.com/articles/utility-first-css/
                     🔗 https://blog.logrocket.com/top-utility-first-css-frameworks/
                     🔗 ș.a.
                     Linkuri la prezentare vor fi adăugate la sfîrșit în descriere la video

Author

Andrew Luca /  Code For Moldova 

 Q&A 
Care sunt întrebările voastre? 

 Q&A 
Care sunt întrebările voastre?