Share
Îmi pare rău că mă uit la codul sau la marcajul pe care l-am scris în trecut, pe care nu îl înțeleg chiar de pe lilieci. Sigur că nu sunt diferit de tine, că vreau să vin înapoi ani mai târziu, să aleg codul și să înțeleg exact ce se întâmplă. Nu vreau să disecționez cele mai simple concepte, în cazul în care sunt situate parantezele, sau chiar modul în care marja este îndoită. Am creat obiceiuri care să mă ajute cu o dezvoltare rapidă, care mi-au păstrat sănătatea oarecum intact. Voi fi sincer, totuși, nu m-am gândit prea mult la modul în care scriu și organizez CSS-ul meu până de curând și asta este ceea ce împărtășesc astăzi.
Există o mulțime de modalități de a face ceea ce sugerez cu CSS. Permiteți-mi să fiu primul care a spus, nu folosiți nimic despre care scriu astăzi, dacă nivelul dvs. de confort nu este ridicat cu conceptele mele. În schimb, gândiți-vă la concepte și îmbunătățiți soluțiile despre care scriu. Distribuiți-vă propriile informații. Nu voi contesta cu voi dacă credeți că există o modalitate mai bună de a organiza foi de stil, deoarece în final nu există nici o cale corectă sau greșită. Cu toate acestea, cred că cu cât mai multă structură adăugați, cu atât mai bine sunteți în cele din urmă când lucrați cu CSS.
"Cât de ușor este pentru noi, ca dezvoltatori, să găsim rapid, să înțelegem, să reparăm sau să adăugăm o bază de cod dată? Cu cât este mai ușor această sarcină, cu atât este mai bună utilizarea internă".
Există câteva concepte pe care vreau să le acopere acum, în general, pentru a face ca sucurile creierului să funcționeze. În primul rând, există o concentrare asupra utilizabilității cu dezvoltarea web. Vrem ca utilizatorii site-urilor noastre să găsească mai repede lucrurile, să navigheze mai natural și să înțeleagă în mod intrinsec conceptele aplicațiilor noastre. Aceasta este o utilizare demnă de timp și de energie. Ceea ce este uitat uneori este uzabilitatea internă în toate planurile și discuțiile pentru proiectele noastre. Cât de ușor este pentru noi ca dezvoltatori, să găsim rapid, să înțelegem, să reparăm sau să adăugăm o bază de cod dată? Cu cât este mai ușor această sarcină, cu atât este mai bună utilizarea internă. În opinia mea, acel concept este demn de vremea și gândirea noastră ca și uzabilitatea la sfârșitul lunii.
În al doilea rând, amintiți-vă că există un C în CSS. E partea cascadă. Metoda pe care o folosesc ar putea să zboare în fața unor gânduri convenționale, dar când vă întoarceți într-un colț pentru a utiliza doar anumite aspecte ale CSS, pierdeți puterea. Când intenționez să proiectez un proiect mare, cred că selectorii de id ca "explică entitatea", selectorii de clasă ca "descriu entitatea" și atributele de stil ca "suprascrie ceea ce am spus". Am cascada proprietățile în jos pentru a micșora codul și dă o mică metodă pentru nebunie. Din nou, nu există modalități corecte sau greșite, dar când nu aveți niciun plan, vă pregătiți pentru o mulțime de lucruri suplimentare, ca să nu mai vorbim de cheltuieli suplimentare.
În cele din urmă, amintiți-vă că există mereu compromisuri în dezvoltare. Cele mai elegante moduri de a face lucrurile nu sunt întotdeauna cele mai eficiente.
Uneori, cele mai eficiente modalități de a face lucrurile te costă pe drum când trebuie să alegi codul pentru susținere.
Nimeni nu poate face aceste alegeri pentru dvs., dar trebuie să luați în considerare compromisurile în timp ce scrieți. Uneori trebuie să mutați un glonț doar puțin, probabil pentru a adăuga o cerere HTTP suplimentară pentru a face rezultatul final intern utilizabil. Alteori, trebuie să adăugați un comentariu bun pentru a vă aminti de alegerea pe care ați făcut-o și pentru a continua.
Există șanse să utilizați fie un cadru pentru a vă ocupa de CSS, fie să vă adăugați stilurile într-un mod cu care v-ați obișnuit, dar fără prea multă structură. Ambele au suprapuse și dezavantaje. Să ne uităm mai întâi la câteva cadre CSS, din gurile calului:
Există mai multe și, la fel ca un cadru pentru limbajul de servere de la alegere, fiecare are avantajele lor unul față de celălalt și fiecare are dezavantajele sale. Nu sunt aici pentru a vă îndepărta de la un cadru, așa cum le-am folosit în trecut și cred în concepte. Cred că atunci când lucrați la o echipă mare, nu există o alegere mai bună, deoarece standardizează stilurile dvs. și le oferă lecțiile voce a dezvoltatorului individual și a designerului. Acestea fiind spuse, cred că există unele dezavantaje în utilizarea unui cadru CSS, deoarece acesta adaugă la cheltuieli generale mai ales cu stiluri pe care nu le utilizați și curba de învățare este destul de mare. Acest lucru poate fi un pic frustrant în special în cazul proiectelor care au programe stricte. Acestea fiind spuse, curba de învățare este tocmai aceea, o curbă și în timp veți stăpâni oricare proiect considerați cel mai bine. Avantajul utilizării unui cadru este că acum ați îmbunătățit gradul de utilizare intern, deoarece utilizați o paradigmă a metodei stabilite, deși această metodă este ceva care este cel mai probabil în afara controlului dvs..
Cealaltă soluție este ceea ce eu numesc "Vestul Sălbatic" unde se întâmplă ceva. Vreau să fiu cinstit și să spun că de multe ori am împins ceva de la ușă fără să mă gândesc prea mult la viitor sau în cazul unui proiect foarte mic în care CSS nu este foarte substanțial. Curba de învățare aici nu este atât de rău, pentru că vă scrieți CSS în timp ce mergeți. Aveți control complet asupra destinului stilului vostru. Destul de cool până acum! Problema este utilitatea internă. Întoarceți-vă la acest proiect după ce nu mai este proaspătă în mintea ta și vor exista unele probleme. "De ce naiba am scris asta asa" sau "Nu am nici o idee despre ce vroiam sa spun prin acest comentariu" sau "De ce nu se schimba acele stiluri" sau "ce este aceasta bucata mare de control"? foaia de stil nu mai este proaspătă în mintea ta.
Dacă aș putea pune soluția cadru pe o scară alunecoasă cu soluția de vest sălbatic la celălalt capăt, cred că aș prefera ceva doar în mijloc. În timp ce un pat este prea greu, iar celălalt pat este prea moale, vreau să găsesc patul care este potrivit. Asta numesc soluția hibridă. Acesta împărtășește trăsăturile atât cu vestul sălbatic, cât și cu cadrele. Pe de o parte, am control asupra stilurilor mele, iar curba de învățare este destul de scăzută. Pe de altă parte, vreau să dau o mică structură la ceea ce scriu, astfel încât atunci când mă întorc la ea mai târziu, am cel puțin o familiaritate cu structura, pentru că construiesc metodele pe care fiecare proiect.
Este un pic de proiect DIY ca în îmbunătățirea acasă. Sunteți de tranzacționare structura și costul unui profesionist pentru confortul și familiaritatea de a folosi propriile mâini pentru a face munca. Ceea ce speriți în cele din urmă este același proiect finalizat, dar unul fără curba de învățare sau idei și concepte străine din versiunea industrială a puterii.
Gândindu-ne la alegerile pe care trebuie să le facem ca dezvoltatori, fac alegerea creșterii cererilor HTTP pentru o organizare mai bună. Știu că mă cost cu mine un pic de performanță, dar ceea ce am în cele din urmă este CSS, care este mai ușor de înțeles când trebuie să le privesc în continuare. Poți să faci o altă alegere aici și tu nu vei primi prea multe argumente de la mine. Prefer doar dimensiunile reduse ale fișierelor organizate într-o manieră consecventă peste un singur mare fișier sau antet CSS din HTML-ul meu.
reset.css : Un css de resetare este unul care stabilește toate sau cel puțin majoritatea stilurilor browserului pentru a anula. Folosesc o resetare css astfel încât să pot lupta unele diferențe cu browserele, și văd valoarea atunci când se ocupă cu probleme cruce browser. Nu este Nirvana, și există unii care preferă nici o resetare, sau ceea ce am citit recent, o resetare moale. Prefer să restabilesc totul și folosesc aroma lui Eric Meyer de resetare.
forms.css: Eu separez stilurile mele de formular de restul CSS-ului meu. Vreau să știu când lucrez la formulare și nu apar destul de mult, așa cum îmi doresc exact unde să merg.
global.css: Fișierul meu global css este ceva ce folosesc pentru fiecare proiect mai mare pe care îl scriu. Ce conține acest fișier mic sunt clase mici pe care le-aș putea folosi mereu și repede în proiecte. Regularea mea este că, dacă există o scurtătură pentru proprietate, probabil că nu aparține fișierului global. Nu aș folosi proprietatea fontului. De exemplu:
/ * Culori * / .red culoare: roșu; fundal: moșteni; . albastru culoare: albastru; fundal: moșteni; . culoare (culoare: negru; fundal: galben; / * Liste * /. Orizontală list-style-type: none; afișare: inline; .vertical list-style-type: none; afișare: bloc; / * Text * / .small font-size: mic; . mare font-size: large; .bold font-weight: bold;
Observați că acestea sunt clase foarte specifice, care adaugă regulilor de cascadă ale stilurilor. Deși nici unul dintre ele nu va fi utilizat în general ca unic stil pentru un element, ele se adaugă la descrierea elementului pe care îl aplică clasa.
style.css: My style.css este principalul meu controlor al stilului meu. Dacă vă gândiți în termeni de OO pentru CSS, stilul meu.css este clasa mea, în timp ce celelalte fișiere măresc clasa mea (oarecum oricum) și adaugă moștenirea obiectelor mele principale. Folosesc stil.css pentru a importa celelalte fișiere ale mele și pentru a defini selectorii și clasele mele locale, numai pentru proiect.
Modul meu hibrid se abate aici de la majoritatea oamenilor, întrucât regula mea generală cu ID-urile este doar de a explica elementul în cauză. Selectorii de ID sunt utilizați doar o singură dată pe pagină (inclusiv procesele GET), așa că vreau ca acestea să fie foarte specifice. Pentru a maximiza reutilizarea codului, orice proprietate în afara acestei explicații a unui element, chiar aș prefera să folosesc un selector de clasă. Deoarece acest ID este unic pentru pagină, vreau doar să folosesc explicații unice pentru acest selector.
De exemplu, lățimea mea ar fi oarecum unică. Plăcuțele și marginile mele ar fi oarecum unice. Poziția mea ar fi oarecum unică. S-ar putea argumenta că afișajul acestui selector ar fi oarecum unic. Culoarea mea pentru element; nu într-adevăr unic. Fundalul meu, din nou, nu prea unic. Pentru elementele care nu sunt cu adevărat unice, cred că acestea sunt "descriu elementul" pentru care folosesc selectorii de clasă.
Să ilustrăm acest lucru cu un mic cod. Pentru ușurință, folosesc un tutorial recent de Jeffrey Way intitulat Sfat rapid: Forme practice CSS. Ce-ar fi dacă am lua CSS original:
#container background: # 666; marja: auto; lățime: 500px; înălțime: 700px; padding-top: 30px; font-family: helvetica, arial, sans-serif; h1 background: # e3e3e3; fundal: -moz-linear-gradient (sus, # e3e3e3, # c8c8c8); fundal: -webkit-gradient (liniar, stânga sus, stânga jos, de la (# e3e3e3), la (# c8c8c8)); padding: 10px 20px; margin-stânga: -20px; marginea superioară: 0; poziție: relativă; lățime: 70%; -moz-box-shadow: 1px 1px 3px # 292929; -webkit-box-shadow: 1px 1px 3px # 292929; box-shadow: 1px 1px 3px # 292929; culoare: # 454545; text-shadow: 0 1px 0 alb;
și transformat în aceasta:
#container margin: auto; lățime: 500px; înălțime: 700px; padding-top: 30px; font-family: helvetica, arial, sans-serif; # head-one padding: 10px 20px; margin-stânga: -20px; marginea superioară: 0; poziție: relativă; lățime: 70%; .un fundal culoare: #fff; fundal: # 666; . fundal-fantezie background: # e3e3e3; fundal: -moz-linear-gradient (sus, # e3e3e3, # c8c8c8); fundal: -webkit-gradient (liniar, stânga sus, stânga jos, de la (# e3e3e3), la (# c8c8c8)); -moz-box-shadow: 1px 1px 3px # 292929; -webkit-box-shadow: 1px 1px 3px # 292929; culoare: # 454545; text-shadow: 0 1px 0 alb;
Până acum, tot ce am făcut cu adevărat este adăugarea a două noi clase de la selectorul unic h1 și a extras că h1 afară de un ID unic. N-am câștigat nimic pentru moment și, în realitate, am adăugat doar un pic mai mult deasupra capului meu. Unde este avantajul atunci?
Dacă credeți că pentru o clipă ați putea reutiliza aceste descrieri în altă parte, poate pentru un subrubric, atunci avem o reutilizare a codului. Să căutăm să vedem ce putem face acum. Iată cum arată inițial:
și iată cum arată aceasta cu un subrubric:
Am adăugat doar o nouă definiție acum:
# titlu-două padding: 10px 20px; margin-stânga: -20px; marginea superioară: 0; poziție: relativă; lățime: 30%;
Împreună cu un mic cod HTML:
Poziția mea
Sub-rubrica mea
Avem reutilizarea codului și avem o metodă care este consecventă. Dacă luați această metodă și o aplicați, veți reduce numărul de stiluri (sau obiecte, dacă preferați) pe care le scrieți. Mai puțin codul cu o metodă înseamnă o susținere mai ușoară la o dată ulterioară. Într-adevăr, nimic nu pătrunde pământul aici, dar când începeți să vă explicați selectorii de identitate, dar descrieți clasele dvs., este o metodă ușoară de a adăuga un pic de bun simț al codului.
Sunt sigur că cineva, undeva, ți-a spus să nu folosești niciodată atributul de stil. De asemenea, sunt sigur că unii dintre voi nu sunteți de acord cu mine și că este OK, pot să o iau. Voi rupe această regulă doar cu un avertisment. Nu folosiți-l niciodată fără să vă gândiți puțin la ceea ce faceți. Există utilizări legitime pentru atributul de stil, în special atunci când lucrați cu aplicații complexe folosind apeluri AJAX, dar acele utilizări provin din stratul dvs. de comportament.
Când trebuie să utilizați atributul de stil, atunci când trebuie să efectuați un apel final rapid pentru a suprascrie ceva în afișarea în cascadă pentru elementul care nu ar avea sens să adăugați la fișierul global.css. De exemplu, poate fi necesar să înlocuiți un stil din stratul dvs. de comportament bazat pe o acțiune a utilizatorului. Ea adaugă la complexitate doar un pic, dar adaugă la cascadă. Nu aș folosi mai multe proprietăți, deoarece aceasta este o depășire rapidă sau, mai degrabă, "uitați ce v-am spus, faceți acest lucru". Este o cascadă și ar trebui să vă tratați CSS-ul ca atare, în opinia mea.
Cheltuim mult timp punând accentul pe indentația noastră în codul și codul HTML, dar nu prea văd același accent în CSS. Ea face ca lumea să fie diferită. Să luăm din nou exemplul nostru de lucru:
Poziția mea
Sub-rubrica mea
Dacă am indent acest lucru în marcajul nostru, de ce să nu-l indentăm în același mod în CSS:
#container margin: auto; lățime: 500px; înălțime: 700px; padding-top: 30px; font-family: helvetica, arial, sans-serif; # head-one padding: 10px 20px; margin-stânga: -20px; marginea superioară: 0; poziție: relativă; lățime: 70%; # titlu-două padding: 10px 20px; margin-stânga: -20px; marginea superioară: 0; poziție: relativă; lățime: 30%;
Se adaugă doar un accent mai mic la ceea ce se întâmplă cu acești selectori de identificare. Înțeleg acum că sunt copii la div container, fără a-mi compara marja mea.
Atunci când decideți despre aspectul fișierului de stil, aceasta este regula pe care o folosesc. Trebuie să @ importați fișierele CSS suplimentare începând mai întâi cu fișierul reset.css și apoi restul. Definiți-vă următoarele elemente, cum ar fi h1, ancore etc. Apoi, definiți selectorii de identificare în stil.css. Dacă lucrați cu mai multe pagini, comentați începutul fiecărei pagini noi în interiorul indentării. De exemplu, #container este probabil un element al aspectului care este containerul pentru fiecare pagină, așa că începeți acolo cu indentarea și lucrați în a comenta unde utilizați fiecare element. În cele din urmă, definiți clasele dvs. În mod normal, nu mă încadrez în clase, datorită faptului că acestea sunt adesea refolosite, iar indentarea nu indică locul în care sunt folosite.
În cele din urmă, și probabil cel mai important, comentează CSS exact așa cum ați face codul de pe server. Dacă există vreun context pe care îl puteți da unei clase, cum ar fi elementele pe care le folosește sau identitatea pe care o potrivește, să o comenteze. Orice context pe care-l dați voinței voastre viitoare este ca și cum ați avea o mașină de timp. Marty McFly s-ar putea să nu fi bătut acel tip înfiorător din calea traficului care se apropia dacă ar fi citit mai întâi comentariile Flux Capacitor.
Sunt relativ sigur că metodele mele nu vor avea o nouă mișcare de dans numită după ea și nici nu va vindeca cancerul. Nici măcar nu sunt sigur dacă vor fi adaptate de o singură persoană în afara familiei mele. Acestea fiind spuse, chiar sper să luați conceptele departe de acest lucru și să construiți metode care să funcționeze pentru dvs. Dezvoltarea utilizabilității este un obiectiv pe care toți ar trebui să-l încercăm să-l realizăm. Când creați o metodologie, vă creșteți exponențial gradul de utilizare intern, pe măsură ce dezvoltați obiceiuri pe care le reutilizați și le împărtășiți cu echipa și cu alții. Rezolvă problemele de dezvoltare, crește productivitatea și scade costul general al dezvoltării. Este una dintre acele propuneri rare de câștig / câștig pe care le întâlniți în viața voastră zilnică de dezvoltare.
Vă mulțumim pentru lectură și vă rugăm să împărtășiți ideile dvs..
Accentsconagua