CSS a parcurs un drum lung, dar instrumentele din jurul său nu au fost până acum.


Dacă simțiți că scrierea CSS este ca și cum ai lupta împotriva monștrilor într-o groapă, nu ești singur. Deși CSS este una dintre cele mai fundamentale tehnologii care alimentează Web-ul, nu este un limbaj de programare sau un cadru propriu-zis. Drept urmare, de îndată ce proiectul tău începe să devină mai proeminent, la fel se încurcă – regulile selectorului par să fie peste tot și este greu să găsești unde se află; pe măsură ce includeți fonturi, CSS extern, JS și alte active pe paginile dvs., dimensiunea finală a pachetului va crește din mână și vă întrebați unde s-au pierdut idealurile de front-friendly rapid și ușor de utilizat.

Dar nu trebuie să fie așa. Astăzi, instrumentele din jurul CSS au evoluat la un nivel pe care fluxul de lucru nu poate fi doar îmblânzit, ci și plăcut. În acest articol, voi vorbi despre cinci astfel de instrumente CSS pe care le-am găsit cu o valoare imensă în activitatea mea. Am evitat în mod conștient, inclusiv instrumente „jucărie” precum generatoare CSS, generatoare de meniu etc., deoarece creează mai multe probleme decât rezolvă.

Vine trenul CSS! Sa mergem! �� ��

PostCSS

Dacă vă place JavaScript, v-ar plăcea ideea că acum putem adăuga și controla CSS prin JavaScript. Și aceasta este exact această capacitate PostCSS prevede.

Cu toate acestea, nu este doar zahăr din sintaxa bazat pe JavaScript peste CSS. PostCSS înfășoară mai multe pachete / funcții puternice împreună, ceea ce duce la un flux de lucru mult mai plăcut și mai ușor atunci când aveți de-a face cu CSS. De exemplu:

  • Prefixurile furnizorului se adaugă automat pe baza proprietății pe care o utilizați.
  • Posibilitatea de a detecta ce caracteristici CSS pot fi utilizate în browserul curent.
  • Folosind actualizările de sintaxă viitoare, încă de lansat, dar foarte puternice, la CSS.
  • O grilă sensibilă, la fel de flexibilă pe cât de mare.

Cred că nu voi face justiție pentru PostCSS dacă nu includ exemplul grilă. Deci, aici mergem. Ceva la fel de simplu ca acesta:

div {
coloană pierdută: 1/3
}

devine convertit într-un sistem CSS complet suflat, cu aproape toate cazurile îngrijite:

div {
lățime: calc (99,9% * 1/3 –
(30px – 30px * 1/3));
}
div: al nouălea copil (1n) {
plutește la stânga;
margine-dreapta: 30px;
clar: niciuna;
}
div: ultimul copil {
margine-dreapta: 0;
}
div: al nouălea copil (3n) {
margine-dreapta: 0;
float: dreapta;
}
div: al nouălea copil (3n + 1) {
clar: amândouă;
}

Deoarece este un lucru bazat pe JS, PostCSS nu este tocmai ușor de configurat, mai ales dacă sunteți un designer și nu ați avut prea multe de-a face cu modulele, pachetele și lumea npm în general. Acestea fiind spuse, potențialul pentru PostCSS în activitatea dvs. este masiv și nu trebuie trecut cu vederea.

PurgeCSS

Îți place fluxul de lucru modern bazat pe cadru, dar ești frustrat că aduc prea multe bagaje? Dacă da, PurgeCSS este prietenul tău, cel puțin în ceea ce privește CSS.

Pentru cei care ar putea să nu știe care este marea ofertă: iată o expunere rapidă. Când creezi aplicații cu o singură pagină utilizând cadre front-end precum React, Angular, Vue etc., parcurgi ceea ce se numește „proces de construire”. În esență, codificați toate CSS, JS, SASS etc., în fișiere separate (organizându-le așa cum vi se pare cel mai intuitiv), dar, după ce ați terminat, spuneți pachetului să „construiască” lucrul. Ceea ce face acest lucru este să citești tot codul sursă pe care l-ai scris, să-i aplici diverse filtre (minificare, obstrucție / uglificare etc.) și să scuii ieșirea în fișiere unice, de obicei „app.js” pentru tot JavaScript, și „App.css” pentru toate CSS-urile. Aceste fișiere, împreună cu un „index.html” slab este tot ce aveți nevoie pentru a rula front-end-ul aplicației. Dezavantajul este că, deoarece totul este inclus în aceste fișiere finale, dimensiunea acestora se extinde deseori peste ceea ce este permis pentru un timp de răspuns rapid; de exemplu, nu este neobișnuit să vezi o „app.js” care depășește 500 KB!

PurgeCSS este adăugat ca parte a fluxului de lucru de construire și împiedică CSS-ul neutilizat să fie încorporat în rezultatul final. Un caz de utilizare tipic este Bootstrap: este o bibliotecă de dimensiuni medii, cu mai multe clase UI pentru diferite componente. Dacă aplicația dvs. folosește, să zicem, 10% din clasele Bootstrap, restul de 90% sunt singurele din fișierul CSS final. Dar, datorită PurgeCSS, astfel de fișiere CSS neutilizate pot fi identificate și împiedicate în procesul de construire, rezultând fișiere CSS finale mult mai mici (de 5-6 ori reducerea dimensiunii este destul de normală).

Așadar, mergeți mai departe, „curățați” CSS inutile cu PurgeCSS! ��

tailwind

tailwind este un cadru CSS, dar merge atât de mult împotriva cerealelor, încât am crezut că îl voi include aici printre instrumentele CSS. Dacă urăști CSS inline (cine nu ?!), cel mai probabil, Tailwind vă va face să vă recăpătați în groază la prima întâlnire. Vom obține un prim gust, uitându-ne cum poți codifica o formă tipică folosind CSS Tailwind:

Nume de utilizator

Parola

Vă rugăm să alegeți o parolă.

Conectare


Ați uitat parola?

© 2019 Acme Corp. Toate drepturile rezervate.

“Este o glumă sau ce ?! Care sunt toate acele clase mici enervante? La o inspecție mai atentă, de ce naiba stabilesc marginile, căptușeala și culoarea direct împreună cu HTML-ul? Este 2019 sau ce? ”

Sunt de așteptat gânduri ca acestea. Știu pentru că am simțit la fel și am închis imediat capacul pe Tailwind. Abia mai târziu am întâlnit un podcast în care oaspetele a refăcut un site trendy, cu dimensiuni decente, în Tailwind, că am început să fiu atent..

Înainte de a merge mai departe, luați în considerare aceste întrebări:

  • Te-ai săturat să memorezi clase de cadru standard și funcțiile lor, astfel încât să poți personaliza desenele după bunul plac? Un bun exemplu este schimbarea aspectului și comportamentului barei de navigare Bootstrap.
  • Crezi că cadrele populare precum Bootstrap sunt excesive și încearcă să facă mult mai mult decât ar trebui?
  • Te găsești amestecând cadre pentru că vrei tot ce e mai bun din toate lumile?
  • Îți place să ai mai mult control asupra design-urilor tale și totuși găsești experiența vanilată CSS copleșitoare?

Dacă răspunsul la oricare dintre acestea este un „da”, ai nevoie de Tailwind prost. Acum aruncăm o privire la ce este Tailwind și ce face.

Tailwind este ceea ce se numește un CSS pentru utilități, care diferă de ceea ce facem în fluxurile noastre de zi cu zi: CSS semantic. Diferența dintre CSS semantic și CSS de utilitate este că primul încearcă să grupeze elemente de stil după numele secțiunilor vizuale care apar pe pagină. Deci, dacă aveți un meniu de navigare, carduri, carusel etc., pe o pagină, modul semantic de a face lucrurile ar fi să grupați regulile de stil CSS în clase precum .nav, .card, .carousel etc., care sub-secțiunile lor etichetate în consecință (de exemplu .card-body, .card-footer etc.). Aceasta este de departe cea mai obișnuită abordare a CSS și toți suntem familiarizați cu ea prin cadre precum Bootstrap, Foundation, Bulma, UI Kit, etc..

Pe de altă parte, stilul „utilitate” de scriere a claselor CSS nume în funcție de funcția lor: o clasă care controlează marja pentru partea de sus și de jos va fi numită .margin-y-medium și poate fi aplicată oriunde în HTML marcaj unde este necesară această marjă. În timp ce acest lucru introduce oarecum un curs de denumire a clasei (trebuie doar să aruncăm o privire rapidă la codul pe care l-am distribuit mai devreme sau la ecranul de ecran – atâtea clase!), Intenția CSS este clar: nu trebuie să sari înainte și înapoi printre documentație, CSS și HTML pentru a descoperi numele corecte și efectul corect.

Este un mod foarte liber de a lucra, dar există și o captură: trebuie să aveți elementele de bază ale CSS în vigoare (inclusiv concepte moderne precum Flexbox). Acest lucru se datorează faptului că Tailwind nu oferă stiluri care nu sunt disponibile pentru componentele din pagina dvs., iar dvs. depinde de construcția stilurilor din blocurile de construcție date. O altă problemă este cea a instalării: Tailwind vă permite să grupați mai multe clase CSS împreună în ceea ce se numește componente, dar se face prin JavaScript și necesită un încărcător de module și un pachet precum Webpack.

Toate cele spuse și făcute, Tailwind este o nouă modalitate de a face stilul polarizant și atrăgător și va apela la cei care tânjesc pentru o mai mare simplitate și control.

Saas

Cu toate că Sass a fost de mult timp, l-am inclus aici, deoarece dezvoltatorii încă nu știu cât de util este. Fișele Stilistically Awesome Style (sau SASS) este o supersetare de CSS care a fost dezvoltată pentru a îmblânzi nebunia în proiect, odată ce CSS va crește dincolo de câteva linii.

Imaginează-ți acest lucru: ai parcurs un drum lung pentru a scrie CSS pentru proiectul tău. Folosiți câteva culori, ați identificat anumite marje sensibile pentru diverse div-uri, stiluri de fonturi etc. Cu excepția faptului că acum vă dați seama că nu toate sunt atârnate atât de bine. Poate doriți să încercați marje mai mari pentru toate secțiunile, cărțile și butoanele. Ei bine, acum ce? Chiar și ideea de a fi nevoit să căutați-înlocuiți prin fișierul dvs. gigant CSS este suficientă pentru a da o durere de cap. Cu toții am făcut asta și știm cu toții cât de predispus la erori. Sass rezolvă această problemă introducând variabile:

Când scriem HTML, cuibăm elemente în alte elemente. Dar când scriem CSS, trebuie să scriem o ierarhie plană de reguli, ceea ce face dificilă „încadrarea” mentală a CSS pe HTML. Cu Sass, puteți imita structura paginii din fișierele dvs. de stil:

Toate acestea nici măcar nu încep să zgârie suprafața bunătăților oferite de Sass: design modular, includ fișiere, mixinuri, moștenire. . . lista continuă și continuă. Sigur, va trebui să înveți un flux de lucru al compilatorului Sass și să îl incluzi în al tău, dar după părerea mea, că orele petrecute reprezintă o investiție care te va plăti de mai multe ori!

CSS Linters

Având în vedere că designerii web (și dezvoltatorii de interfață de utilizator – deși mă întreb cum sunt diferiți acești doi termeni ��) folosesc editori de text simpli – sau cum este cazul în zilele noastre, codează direct de pe instrumentele dev Chrome – rareori ajung să afle despre sau să beneficieze de un Linter. Pe de altă parte, programatorii care folosesc editori de text buni precum VS Code, Sublime Text sau alte ID-uri cunosc foarte bine acest instrument, deoarece este a doua natură pentru ei. În orice caz, ideea este că, dacă sunteți unul dintre acești dezvoltatori CSS care s-au înecat în CSS dezordonat, puteți beneficia de o linie.

Mai simplu spus, un linter este un program care verifică codul dvs. pentru erori și neconcordanțe. Face acest lucru cu ajutorul unui set de reguli pe care le are pentru a descoperi ce este greșit și ce este inconsistent. Liniile bune se integrează cu IDE-urile și cu editorii de cod și pot fi configurate să funcționeze de fiecare dată când salvați fișierul sursă. Acestea vă ajută, de asemenea, cu previzualizări, erori și completări automate în timp ce compuneți fișierele CSS:

Dar iată partea cea mai bună – dacă urmați un anumit stil și formatare CSS, puteți să modificați linterul pentru a vă satisface. Acest lucru asigură că CSS-ul din cadrul unui proiect respectă același ghid de stil (linterul poate fi configurat și pentru formatarea automată a fișierului la fiecare salvare / comitere a codului sursă). Deci, fie că lucrați în echipă sau singuri, o linie este întotdeauna un plus excelent la fluxul de lucru al proiectului.

Concluzie

Sunt sigur deocamdată, sunteți convins că dezvoltarea CSS modernă este departe de abordarea de altfel a pisicilor din trecut. ��

Acestea fiind spuse, voi recunoaște ceva din nou, chiar dacă sun ca un record înregistrat: unele dintre instrumentele pe care le-am acoperit în acest articol nu sunt ușor de configurat, mai ales dacă nu sunteți în termeni prietenoși cu ecosistemul npm . Dar înainte să vă simțiți dezgustat și să vă întoarceți fața, spuneți-mi acest lucru: CSS a fost ușor când ați fost prima dată învăţare aceasta? A fost ușor să înveți să centrezi un div, să stăpânești schimbările de dispoziție ale plutitoarelor și așa mai departe? În mod similar, instrumentele pe care le-am descris aici au o curbă de învățare, dar merită bine.

Sincer, după ce ați început să experimentați rezultatele, vă veți arunca pentru că nu ați făcut acest lucru mai devreme. Să nu subliniem importanța CSS care este modulară, slabă și bine organizată!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me