Share
Acest articol este despre structura codului CSS - în special despre o metodă pe care am folosit-o în ultimii ani pentru a aduce o anumită logică și consecvență ordinii în care scriu CSS-ul meu. Este o metodă pe care o numesc "În afara".
Am auzit de diferite abordări în scrierea de CSS în trecut. Unii oameni nu folosesc deloc o anumită ordine, alții alfabetizând declarații prin nume de proprietate, am auzit chiar de o mână de cazuri în care unii le ordonă vizual cu lungimea fiecărui Valoarea proprietății pereche!
Un sondaj trecut despre CSS-Tricks a pus această întrebare cu un rezultat pe care l-am găsit destul de surprinzător: 39% dintre cei peste 11.000 de oameni nu au un plan specific atunci când vine vorba de a comanda CSS.
Cum comandați proprietățile CSS? Total votanți: 11,093Se poate sugera gruparea după tip înălţime fiind lângă lăţime. În alfabetic ar fi afișate declarațiile de la fundal până la z-index, de exemplu.
Folosesc metoda de grupare a proprietăților după tip - deși folosesc chiar și o comandă specifică pentru a comanda după grup!
Cu excepția "metodei aleatorii", există un anumit grad de ordine în toate celelalte abordări. Dar această ordine nu are în mod necesar o hartă bine pentru ceva deosebit de util în ceea ce privește stilul site-urilor web.
Dacă ați colectat date despre înălțimea elevilor într-o sală de clasă, ordonarea acestora printr-o măsurătoare de lungime are sens. Dacă categorizați o colecție de DVD-uri, ordonarea alfabetică ar putea avea sens. Dar proprietățile CSS comandate în aceste moduri au legătură cu ordinea lor importanţă când aceste stiluri sunt pictate de browser?
Dacă ordonați alfabetic, este un element culoare mai important decât al său lăţime? Este un element Stil de frontieră mai important decât dacă este sau nu în fluxul normal al documentului? Aș spune că nu.
Metoda pe care am venit sa o iubesc comanda proprietatilor CSS cu cat impact au ele asupra elementelor selectate sau a altor elemente din jurul lor. Esența tehnicii este de a începe cu proprietăți de imagine mare, care influențează lucrurile în afara elementului și lucrează la detaliile mai fine. De aceea o numesc metoda "Outside In".
poziţie și pluti declarațiile elimină elemente din fluxul lor normal și au un impact enorm asupra altor elemente din jurul lor. Acesta este ceva important și simt că ar trebui să fie clar clar în partea de sus a unui bloc de CSS.
Controlează lucruri precum cursor sau revărsare a unui element sunt (de obicei) mai puțin importante și, prin urmare, am tendința să las lucrurile de acest fel spre sfârșit.
Ordinea pe care o folosesc este următoarea:
Accentsconagua
poziţie, pluti, clar, afişa)lăţime, înălţime, margine, umplutură)culoare, fundal, frontieră, box-shadow)marimea fontului, familie de fonturi, aliniere text, text-transformare)cursor, revărsare, z-index)stiu asta frontieră este o proprietate box-model și z-index este legată de poziție, dar această ordine funcționează pentru mine. Chiar dacă nu-mi place ordonarea în ordine alfabetică, există ceva care se simte bine în ceea ce privește punerea z-index la sfarsit…
Să luăm exemplul de a modela un modul de buton.
Să începem cu un nume de clasă cum ar fi .buton. Eu personal nu îmi plac numele de contract cum ar fi .BTN și tind să favorizeze nume de clasă descriptive, dacă este posibil - este doar o preferință personală, YMMV :)
/ * Comanda acum → * / .button
Vrem să putem manipula distanțele verticale în jurul butonului, așa că va trebui să schimbăm afişa din in linie (implicit pentru legăturile de ancorare) la inline-block.
Pentru a permite ca butonul să crească în funcție de conținutul textului, inline-block este o alegere mai flexibilă decât pluti cu lăţime a stabilit.
.buton display: inline-block;
Apoi, va trebui să adăugăm câteva caracteristici ale box-modelului, cum ar fi marginea și umplutura. Marginea se duce în afara cutiei, așa că, mergând în "Outside In", ar trebui să vină mai întâi.
.buton display: inline-block; marja: 1em 0; umplutura: 1em 4m;
Următoarele lucruri pe care trebuie să le adăugați sunt culorile. Pentru a separa fiecare grup de tipuri de proprietăți, îmi place să las un rând gol - acest lucru face ca fiecare secțiune să se evidențieze mult mai mult.
.buton display: inline-block; marja: 1em 0; umplutura: 0.5m 3em; Culoare: #fff; fundal: # 196e76;
Apoi putem adăuga marginile și umbrele pentru a furniza o anumită adâncime, urmate de orice proprietăți tipografice, separate din nou de o linie necompletată.
.buton display: inline-block; marja: 1em 0; umplutura: 1em 4m; Culoare: #fff; fundal: # 196e76; graniță: 0.25 de solide # 196e76; box-shadow: inset 0.25e 0.25e 0.5e rgba (0.0.0.0.3), 0.5em 0.5em 0 # 444; font-size: 3em; font-familie: Avenir, Helvetica, Arial, sans-serif; text-align: center; text-transform: majuscule; text-decoration: none;
Un avantaj al unui astfel de sistem este că elimină necesitatea de a gândi prea mult odată ce a fost implementat. Dacă citesc codul meu și vreau să schimb ceva de imagine mare ca un element lăţime sau poziţie, Știu că voi căuta în partea de sus a unei reguli. Dacă vreau să ajustrez ceva text-transformare sau list-style, Voi privi spre partea de jos a blocului.
Având codul structurat ca acesta este, de asemenea, într-adevăr de mână pentru alții lectură CSS; în cazul în care se confruntă cu codul organizat astfel, este foarte ușor să vedeți toate părțile componente care alcătuiesc un modul de buton. Când scrieți un cod, este important să îl facem cât mai ușor posibil dezvoltatorilor să citească; acest lucru face ca codul să fie mai ușor de înțeles și de menținut.
Am folosit CSS de vanilie pentru a explica metodele mele aici, dar puteți aplica abordarea "Outside In" la fel de eficient în Sass, LESS și Stylus.
Codificarea poate fi un lucru foarte personal. Dacă utilizați o metodă diferită pentru organizarea CSS-ului, ar fi minunat să auziți despre asta! Lăsați un comentariu pentru a continua discuția.
