Sass Best Practices Sfaturi și instrumente pentru dezvoltatori

La fel ca jQuery a revoluționat JavaScript de vanilie, Sass a revoluționat CSS de vanilie. Majoritatea dezvoltatorilor care învață Sass sunt de acord că nu vor mai dori să se întoarcă. Mulți sunt, de asemenea, de acord că cea mai mare problemă cu dezvoltatorii noi este cale ei folosesc Sass, nu Sass în sine.

Am scurs webul și am compilat acest articol cele mai bune practici pentru scrierea codului Sass extensibil și reutilizabil. Sugestiile sunt de la propriile mele opinii și de la site-uri de încredere, cum ar fi Sass Guidelines.

Cu siguranță nu aveți nevoie să implementați toate aceste caracteristici în fluxul de lucru. Dar merită cel puțin să distrați aceste idei și să contemporați beneficiile potențiale.

Organizarea fișierelor

Cel mai bun loc pentru a începe cu dezvoltarea Sass este organizarea fișierelor. Dacă sunteți deja în codul modular, atunci ar trebui să înțelegeți valoarea importurilor și partialelor (mai multe despre acestea mai târziu).

Dar, pentru moment, aruncați o privire asupra acestui exemplu de structură a fișierelor din DoCSSa. Am recreat această structură de fișiere pe care o puteți vedea mai jos:

Aceasta este doar o sugestie și este una dintre multele moduri în care vă puteți organiza fișierele. Puteți găsi alte metode care utilizează diferite structuri de foldere, cum ar fi “GLOBALS” pentru SCSS și “pagini” pentru SCSS specifică paginii.

Să mergem prin acest stil de organizare sugerat pentru a examina scopul fiecărui dosar:

• / GLOBALS - conține fișiere Sass care se aplică la nivel de site-uri precum tipografia, culorile și grilele
• /componente - conține fișiere Sass cu stiluri de componente cum ar fi butoane, tabele sau câmpuri de introducere
• / sectiuni - conține fișiere Sass dedicate anumitor pagini sau zone de pe o pagină (ar putea funcționa mai bine combinate în directorul / components / folder)
• / utils - conține utilități de la terțe părți precum Normalize, care pot fi actualizate dinamic cu instrumente cum ar fi Bower.
• main.scss - fișierul primar Sass din directorul rădăcină care importă toate celelalte.

Acesta este doar un punct de plecare de bază și există o mulțime de spațiu pentru a vă extinde cu ideile proprii.

Dar, indiferent de modul în care alegeți să vă organizați SCSS, este esențial să vă au o organizație cu un fișier separat (sau folder) pentru biblioteci precum Normalize care trebuie să fie actualizate, plus componente în Sass partial pentru proiectul dvs..

Paralelele Sass sunt vitale pentru cele mai bune practici moderne. Acestea sunt foarte recomandate de echipa de design a lui Zurb și de mulți alți dezvoltatori de frontend profesioniști.

Iată un citat de pe site-ul Sass, care explică paralele:

“Puteți crea fișiere parțiale Sass care conțin fragmente mici de CSS pe care le puteți include în alte fișiere Sass. Aceasta este o modalitate foarte bună de a modularizați CSS și ajutați la menținerea mai ușoară a menținerii. Un parțial este pur și simplu un fișier Sass numit cu un underscore de conducere. S-ar putea să-i numești ceva de genul _partial.scss. Sublinierea permite Sass să știe că fișierul este doar un fișier parțial și că nu ar trebui să fie generat într-un fișier CSS. Parametrii Sass sunt utilizați cu @import directivă.”

De asemenea, aruncați o privire la aceste alte postări referitoare la structura fișierului Sass:

• Cum structrez proiectele mele Sass
• Estetica Sass: Organizarea arhitecturii și stilului
• Structuri de adrese care vă ajută să vă mențineți codul

Strategii de import

Nu este suficient să se spună despre valoarea importului Sass și a celor parțiale. Organizarea codurilor este cheia pentru obținerea unei structuri de import și a unui flux de lucru care doar funcționează.

Cel mai bun loc pentru a începe este o foaie globală care conține importuri, variabile și mixuri împreună. Mulți dezvoltatori preferă să separe variabilele și mixurile, dar aceasta se reduce la semantică.

Ține minte că sunt amestecuri un mod de a importa, sau mai degrabă de a duplica, codul Sass. Ele sunt incredibil de puternice, dar nu ar trebui folosite “static” cod. Rețineți că există o diferență între mixuri, extensii și destinații de substituție, toate acestea având o utilizare în dezvoltarea Sass.

Amestecurile se utilizează cel mai bine cu valorile dinamice trecute în mixin pentru modificări ale codului. De exemplu, verificați acest amestec Sass care creează un gradient de fundal între două culori.

@mixin linearGradient ($ sus, $ jos) background: $ top; / * Browseruri vechi * / background: -moz-linear-gradient (top, $ top 0%, bottom 100%); / * FF3.6 + / fundal: -webkit-gradient (liniuță, stânga sus, fund stânga, oprire culori (0%, sus), oprire culoare (100%, bottom); / * Chrome, Safari4 + * / fundal: -webkit-gradient linear (top, $ top 0%, bottom 100%); / * Chrome10 +, Safari5.1 + * / fundal: -o-gradient linear (top, $ top 0%, bottom 100%); / * Opera 11.10+ * / fundal: -ms-gradient linear (top, $ top 0%, bottom 100%); / * IE10 + * / fundal: gradient liniar (în partea de jos, partea de sus 0%, partea inferioară 100%); / * W3C * / filtru: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# 000000", GradientType = 0); / * IE6-9 * /

Mixinul are două valori: o culoare de sus și o culoare de fund. Puteti scrie mixuri diferite pentru diferite tipuri de gradienti care includ 3 sau 4 + culori diferite. Aceasta vă permite să importați și să clonați codul mixin în timp ce modificați parametrii pentru opțiunile personalizate.

Exemplul de la Code Responsible arată astfel:

.butonul @include liniarGradient (#cccccc, # 666666); 

Legat de mixin este substituentul Sass, care este util în primul rând cu directiva de extindere. Este, desigur, mai complex decât amestecurile, dar acest lucru poate fi o cale combinați selectorii împreună fără a rescrie codul excesiv.

În timp ce Sass are o singură metodă @import, am inclus mixuri și substituenți pentru a demonstra flexibilitatea codului care poate fi scris într-un singur fișier, dar inclus oriunde.

Când construiți o structură de import, nu uitați să urmați conceptele de codificare DRY (Do not Repeat Yourself).

Convențiile de denumire

Regulile generale pentru convențiile de numire se aplică variabilelor, funcțiilor și mixurilor. Când numești ceva în Sass, se recomandă utilizați toate literele minuscule cu linii pentru separare.

Sintaxa codului Sass se bazează, de fapt, pe setul de reguli CSS. Iată câteva bune practici recomandate pentru a ține minte:

• două linii (2), nu există file
• în mod ideal, linii de 80 de caractere sau mai puțin
• utilizarea semnificativă a spațiilor libere
• utilizați comentarii pentru a explica operațiile CSS

Acestea nu sunt elemente necesare pentru codul Sass valid. Dar aceste sugestii provin de la dezvoltatori profesioniști care au descoperit că aceste seturi de reguli oferă cea mai uniformă experiență de codificare.

Dar, în ceea ce privește convențiile de numire, puteți ajunge la două structuri diferite: unul pentru numele Sass și altul pentru numele claselor CSS. Unii dezvoltatori preferă sugestiile BEM peste sugestiile Sass. Nici unul nu este mai mult sau mai puțin corect; doar diferite, cu diferite proceduri de operare.

Problema este că BEM nu se transferă bine la variabilele Sass sau la mixuri deoarece nu au structura bloc / element / modificator (BEM). Personal prefer să folosesc convențiile de numire Sass, dar puteți încerca orice de la camelCase la propria sintaxă internă.

Când vă organizați variabilele și mixurile, este recomandat să împărțiți-le pe categorii, apoi enumerați-le în ordine alfabetică. Acest lucru face ca editarea să fie mult mai ușoară, deoarece știți exact unde să găsiți ceva.

De exemplu, pentru a schimba culoarea unui link, vă deschideți fișierul variabilelor (poate _variables.scss) și localizați secțiunea pentru variabilele de culoare. Apoi găsiți link-ul după nume (link antet, link text, etc) și actualizați culoarea. Simplu!

Pentru a obține o idee despre modul în care puteți structura un tabel de conținut pentru fișierele Sass, consultați fișierul de setări al Fundației.

 // Fundația pentru setările site-urilor // ----------------------------- // // Cuprins: // // 1 .. Global // 2. Puncte de blocare // 3. Grilă // 4. Tipografie de bază // 5. Ajutoare tipografice ... // 1. Global // --------- $ global-font-size: 100 %; lățimea globală: rem-calc (1200); $ global-lineheight: 1.5; // etc

O altă practică de numire se referă la limite de răspuns. Când numiți puncte de întrerupere Sass, încercați să evitați numele specifice dispozitivului. Este mai bine să scrieți nume precum mic, med, lg și xlg pentru că sunt unul față de celălalt.

Acest lucru este mai bine pentru relațiile interne între punctele de întrerupere, dar și pentru echipele în care dezvoltatorii ar putea să nu știe ce dispozitive se referă unul la celălalt.

În ceea ce privește înălțimea de fapt a numelor, este recomandat să vă să fie cât mai concret posibil, fără variabile extra-lungi. Tu ar trebui să adopte convenții de numire la nivel de site care să fie ușor de reținut în timp ce codificarea.

Specificați convenții specifice de numire pentru tot felul de culori, margini, stive de fonturi și înălțimi de linie. Nu numai că numele pot fi rechemate rapid, dar este posibil face ca munca ta să fie mai ușoară atunci când scrieți nume de variabile noi care trebuie să se potrivească cu o sintaxă existentă.

Dar există o linie fină între specificitate și convoluție. Practica vă va ajuta să găsiți linia respectivă și scrierea mai multor nume memorabile face mai ușor copierea codului în alte proiecte.

Nesting și looping

Aceste două tehnici Sass sunt foarte diferite în acțiune, dar ambele au abilitatea de a fi abuzată dacă nu este utilizată în mod considerabil.

Nesting este procesul de adăugând selectori imbricați împreună prin indentare pentru a crea mai multă specificitate cu un cod mai mic. Sass are un ghid de cuibărit care ilustrează exemple de codificare a cuiburilor în acțiune. Dar este ușor să fii călărit. Dacă sunteți exagerat, puteți ajunge la codul care arată astfel:

... corp div.content div.container ... organism div.content div.container div.articles ... organism div.content div.container div.articles> div.post ... 

Este prea specific și aproape imposibil de suprascris, acest tip de cod învinge scopul foi de stil cascadă.

Îmbunătățind acest ghid SitePoint veți găsi trei reguli de aur pentru cuiburi:

• Nu mergeți mai mult de 3 niveluri adânci.
• Asigurați-vă că ieșirea CSS este curată și reutilizabilă.
• Utilizați cuiburile atunci când are sens, nu ca o opțiune implicită.

Programatorul Josh Broton sugerează cuibărirea când este necesar, restul restului ca regulă generală de sintaxă.

Indreptarea selectorilor dvs. nu va produce efecte CSS în cascadă. Dar veți avea un timp mai ușor să vă schimbați fișierul Sass și să identificați ce clase se referă unul la celălalt.

Buclele pot, de asemenea să fie suprautilizată dacă nu este aplicată corect. Cele trei bucle Sass sunt @pentru, @in timp ce, și @fiecare. Nu voi intra în detaliu despre cum funcționează toți, dar dacă sunteți interesat, verificați acest post.

În schimb aș vrea să acopăr scop pentru utilizarea buclelor și cum funcționează în Sass. Acestea ar trebui să fie folosite pentru a economisi timpul de scriere a codului care poate fi automatizat. De exemplu, iată un fragment de cod din postarea Clubmate care prezintă un cod Sass urmat de ieșire:

/ * Cod Sass * / @ pentru $ i de la 1 la 8 $ lățime: procent (1 / $ i) .col - # $ i width: $ width;  / * ieșire * / .col-1 lățime: 100%; .col-2 lățime: 50%; .col-3 lățime: 33,333%;  col-5 lățime: 20%; .col-6 lățime: 16,666%; .col-7 lățime: 14,285%; .col-8 lățime: 12,5%;

Aceste clase de coloane pot fi utilizate împreună cu un sistem de grilă. Puteți chiar să adăugați mai multe coloane sau să eliminați doar prin modificarea codului buclă.

buclele ar trebui să nu să fie folosit pentru a duplica selectorii sau proprietățile unui selector; pentru asta sunt mixuri.

De asemenea, atunci când există buclă există ceva numit hărți Sass care stochează cheia: perechi de valori de date. Utilizatorii avansați ar trebui să profite de acestea ori de câte ori este posibil.

Dar buclele regulate Sass sunt simple și eficiente în furnizarea codului de ieșire fără a se repeta. Cel mai bun motiv pentru utilizarea buclelor este cu Proprietăți CSS care variază datele de ieșire.

Iată o modalitate bună de a verifica dacă buclă dvs. este de ajutor: întrebați-vă dacă există vreo altă modalitate de a trimite CSS-ul de care aveți nevoie cu mai puține linii de cod. Dacă nu, atunci sintaxa buclă este probabil o idee grozavă.

Dacă sunteți vreodată confuz sau doriți feedback despre cuiburile de cuiburi sau Sass, ar trebui să postați o întrebare în / r / sass / or / r / css /, comunități active Reddit cu dezvoltatori foarte cunoscuți Sass.

Modularizarea

Practica de a scrie Sass modular este o necesitate absolută pentru majoritatea proiectelor (aș susține, fiecare proiect). Modularizarea este procesul de defalcarea unui proiect în module mai mici. Acest lucru poate fi realizat folosind Sass amprente parțiale.

Ideea din spatele Sass modular este de a scrie fișiere individuale SCSS cu un scop specific care vizează conținut global (tipografie, grile) sau elemente de pagină (file, formulare).

Definiția modulului Sass este destul de clară și face o sugestie foarte specifică: importul unui modul nu ar trebui să emită niciodată un cod.

Ideea de ieșire obligatorie pentru toate modulele ar fi un coșmar pentru optimizare. În schimb, trebuie să creați module în mod individual și apelați doar cele de care aveți nevoie. Modulele pot fi definite prin mixuri sau funcții, dar este posibil să se creeze module care să conțină și selectori.

Cu toate acestea, un articol din Sass Way sugerează scrierea tuturor selectorilor ca mixuri și numai apelarea acestora după cum este necesar. Indiferent dacă adoptați acest lucru sau nu este, în cele din urmă, alegerea dvs. Cred că depinde de dimensiunea proiectului și de confortul pe care îl aveți cu manipularea mixurilor.

Citând pe John Long din postarea sa pe Calea Sass:

“Pentru mine, modulele au devenit unitățile de bază sau blocurile de construcție ale proiectelor mele Sass.”

Dacă sunteți într-adevăr căutați o rutină Sass, vă recomand să mergeți complet modular. Încercați să construiți aproape totul ca un parțial modular care devine inclus într-un fișier CSS primar. La început acest flux de lucru poate părea descurajant, dar are sens pe o scară mai mare - mai ales în cazul proiectelor mari.

În plus, este mult mai ușor să copiați modulele de la un proiect la altul atunci când acestea sunt situate în fișiere separate. Flexibilitate și cod reutilizabil sunt pietrele de temelie ale dezvoltării modulare.

Pentru a afla mai multe despre modulele Sass și despre tehnicile de modulare, consultați aceste postări:

• Module CSS: Bine ați venit în viitor
• Pro și Contra Modul Sass
• Modular CSS Organization cu SMACSS & SASS

Găsiți fluxul de lucru perfect

Fiecare echipă și dezvoltator individual au propriile practici care funcționează cel mai bine. Ar trebui să adoptați practici care să funcționeze cel mai bine pentru dvs. personal sau să alegeți să adoptați cele care funcționează cel mai bine pentru echipa dvs. profesional.

De asemenea, luați în considerare utilizarea Gulp sau Grunt pentru automatizarea proiectelor și minimizarea codului. Acest lucru va salva o mulțime de instrumente de muncă manuală și de automatizare sunt acum, fără îndoială, parte din cele mai bune practici pentru dezvoltarea frontierelor moderne.

Deplasați-vă prin bibliotecile open source cum ar fi SCSS al Fundației pe GitHub pentru a afla mai multe despre cele mai bune practici folosite de alte biblioteci.

Lucrul cu cele mai bune practici este că vă îmbunătățesc într-adevăr munca dvs. în majoritatea timpului, dar există multe alternative. Încercați lucrurile și vedeți cum se simt. Veți învăța mereu, astfel încât cele mai bune practici se pot schimba rapid pe parcursul a 5 ani.

O sugestie finală pe care o am pentru întregul proces Sass este luarea deciziilor cu claritate în minte. Scrieți codul care vă face munca mai ușoară. Nu complicați prea mult un proiect dacă există un mod mai simplu de a face acest lucru.

Sass are rolul de a spori experiența de dezvoltare CSS, deci lucrați cu claritate și cele mai bune practici pentru a obține cea mai bună experiență posibilă.

Învelire

Congestia într-un flux de lucru Sass poate fi corectată prin modificarea stilurilor de cod și respectarea celor mai bune practici. Am prezentat o serie de sugestii în acest post oferit de blogurile Sass și de dezvoltatorii profesioniști.

Cea mai bună modalitate de a afla mai multe este să aplicați aceste practici în fluxul dvs. de lucru și vezi ce funcționează. În timp, veți descoperi că unele activități sunt mai benefice decât altele, caz în care ar trebui să păstreze orice lucru și să renunțe la ceea ce nu.

Consultați aceste linkuri pentru a găsi mai multe sfaturi și cele mai bune practici pentru dezvoltarea Sass:

• Ghidul Sass
• O viziune pentru Sass
• 8 sfaturi pentru a vă ajuta să obțineți cele mai bune rezultate din Sass
• Extinderea în Sass fãrã a crea o mizerie
• Cele mai bune practici Sass - Adunarea a mai mult de 3 nivele adânci