5 koraka za drastično poboljšanje vašeg CSS znanja za 24 sata
Kodirali ste neko vrijeme i znate svoj put oko CSS datoteke. Sigurno niste majstor, ali s dovoljno toga možete stići kamo želite. Pitate se, hoćete li ikad prijeći točku gdje je CSS takva borba. Hoćete li ikad uspjeti razbiti složeni raspored, a da u konačnici ne pribjegnete pokušajima i pogreškama, pogledajte što djeluje, a što ne?
Dobra vijest je da zaista možete prijeći onu frustrirajuću točku gdje znate dovoljno CSS-a za kodiranje web stranice, ali nedostaju vam čvrsti temelji koji vam omogućuju kodiranje bez ikakvih smetnji da ne shvaćate točno kako ćete tamo doći " ideš, i ta je točka puno bliža nego što misliš. Predlažem da postoji pet tema koje će vam drastično potaknuti razumijevanje CSS-a. Provedite malo vremena čitajući o njima u naredna dvadeset i četiri sata i promijenit ćete način zauvijek.
Istražite elemente Envatoa
1. Omotajte svoj um oko pozicioniranja konteksta
Ako doista želite dobro razumjeti kako koristiti CSS za premještanje HTML elemenata tamo gdje želite da odu, apsolutno morate shvatiti pozicioniranje konteksta. I ne mislim samo na ležerno razumijevanje, mislim na duboko znanje o njihovim razlikama, ponašanjima, čudima, itd.
Zapravo postoji pet vrijednosti položaja koje biste trebali razumjeti. Ako ne možete imenovati svih pet bez da ih pogledate, onda ste definitivno glavni kandidat za ovo malo obrazovanja. Evo ih: statični, fiksni, relativni, apsolutni i nasljeđuju.
Morate znati i razumjeti svih pet, ali velike dvije koje će zaista promijeniti način na koji kodirate su apsolutno i relativno pozicioniranje. Naučiti da odvojeno upravljaju tim dvama pozicijama pozicioniranja i zatim skakati u način na koji rade zajedno, promijenit ću način na koji gledate CSS izgled, obećavam. To je otkriće koje će vam posao beskrajno olakšati.
Resursi da vas tamo dovedu
Slabost apsolutnog nasuprot relativnom pozicioniranju
Ovo je moj duboki zaron u temu pozicioniranja konteksta. Kratko spominjem i objašnjavam svih pet, ali se stvarno usredotočujem na velike dvije: kako se razlikuju, kako se razlikuju i kako rade zajedno. Pročitajte ovaj dio i dobro ćete doći na CSS pozicioniranje bez glavobolje.
CSS pozicioniranje 101
Ovaj dio dolazi s časnog bloga A List Apart tako da odmah znate da će biti i temeljit i nevjerojatno obrazovan. Članak je objavljen 2010. godine, ali podaci su i dalje savršeno relevantni i služe kao sjajan uvod u svih pet konteksta pozicioniranja. Nije baš vizualni članak, ali ima puno jednostavnih primjera koda koji će vam olakšati svaki koncept.
Saznajte CSS pozicioniranje u deset koraka
Ovo je fantastično kratak pregled različitih konteksta pozicioniranja. Umjesto jednog dugo namatanog članka, na ovoj se stranici nalazi mali okvir s deset kartica. Svaka kartica sadrži sitni isječak koda i rečenicu ili dvije koja objašnjavaju kôd. S desne strane je prikaz primjera uživo koji se ažurira sa svakom karticom. Ovaj je format fantastičan za vizualno povezivanje isječaka koda s izgledima koji stvaraju i toplo preporučujem da ga pogledate ako se borite s uglavnom objašnjenjima teksta poput onog gore iz ALA.
2. Master pluta
Kad prvi put učite CSS, plugovi izgledaju kao jedan od najspretresnijih sustava izgleda koji se mogu zamisliti. Jednom kada ih naučite koristiti na osnovnoj razini, tada morate naučiti sve o tome kako roditelji koji sadrže samo plutajuću djecu imaju srušenu visinu, a to onda dovodi do četrdeset i sedam različitih načina da se problem riješi kroz jasne popravke i manipulacije prelijevanjem.
Srećom, dugoročno se navikneš na koncepte koji stoje iza floatsa i oni čak mogu postati toliko jednostavni za upotrebu da im uopće ne daješ mnogo razmišljanja. Jedino što stoji između vas i tog cilja je čvrst ili dva članaka koji uistinu kopaju i temeljito objašnjavaju plutajuće ponašanje i tehnike iz temelja.
Resursi da vas tamo dovedu
Sve što nikada niste znali o CSS-u pluta
U ovom sam članku obrađivao gotovo cjelokupni spektar tema o floatsima u CSS-u. Započinje s osnovnom raspravom o tome što su plovci i kako djeluju. Nakon ovoga, govorim o tome kako plovci utječu na okvire uključenih elemenata, kako plovaci postaju čudni s elementima različitih visina, devet pravila koja pokrivaju ponašanje plovaka i naravno rušenje visine urušavanja te kako to popraviti.
Sve o plovku
Chris Coyier je oduvijek bio moj omiljeni autor kada je riječ o CSS-ovim temama i njegov uvod u floats ne razočara. Ako tražite kratku, ali jednostavnu raspravu o tome kako raditi s plovkom, ovaj komad vam je obuhvatio. Osobito mi se sviđaju jednostavne, atraktivne ilustracije korištene u cijelom članku.
Otajstvo CSS-ovog plutajućeg svojstva
Iako su djela Chrisa Coyiera obično kratka i jasna, sadržaj časopisa Smashing Magazine obično je prilično širok s puno primjera i relevantnih rasprava. Ovaj članak predstavlja koncept floata, govori vam o tome kako ih koristiti i brisati, a zatim se otvara rasprava o tome na kojem mjestu obično vidite plovke koji se koriste na web lokacijama stvarnog svijeta. Ako trebate vidjeti kako teorija oživljava, ova je za vas.
3. Znajte svoje odabranike
Jedan od ključeva za pisanje dobrog čistog CSS-a je da steknete uvid u to što su vam CSS selektori dostupni, kako rade i u kojoj su mjeri podržani u različitim preglednicima. Zvuči kao dovoljno jednostavna tema, ali u stvarnosti je svijet CSS-ovih selektora prilično složen.
Ovdje se može naučiti mnoštvo različitih zanimljivih stvari, od korištenja alata za odabir vrijednosti atributa i ciljanja ključnih riječi u imenima klase do načina na koji univerzalni selektor može biti od koristi za uklanjanje pogrešaka koda. Čak i ako mislite da možete osobno doći bez razumijevanja hrpe fantastičnih odabirača, istina je da i drugi koderi svakodnevno koriste ove stvari i da morate razumjeti što vidite kad pogodite izvorni prikaz!
Resursi da vas tamo dovedu
CSS selektori: Just the Tricky Bits
Ovo je zabavan članak koji se osvrće prije svega na složenije aspekte CSS-ovih selektora. Preskačem stvari s razine tla i uskočim u raspravu o tome kako se pojam DOM-a prevodi u ciljanje različitih aspekata vašeg dokumenta s CSS-om. Naučit ćete sve o odabiru djece i braće i sestara, kako lančati selektore i još puno toga.
30 CSS izbornika koje morate zapamtiti
Jeffrey Way je web dev rockstar i ovakvi članci dokazuju zašto. Ovaj članak o Nettuts + pokriva široku lepezu CSS-ovih odabirača u jednostavnom i kratkom formatu koji stavlja veliki naglasak na podršku preglednika. Iznenađujuće, Jeff je čak kodirao stranice uživo uživo za svakog od trideset odabranika.
Birači atributa CSS: Kako i zašto biste ih koristili
Birači vrijednosti atributa jedan su od najmoćnijih podskupova CSS odabirača, a CSS3 stvarno pojačava tu snagu. Nećete vjerovati koliko svestrani vaši selektori mogu postati s magijom vrijednosti atributa. Nakon što pročitate ovaj članak, kretat ćete se oko fraza poput "proizvoljnog birača vrijednosti atributa podstrija", poput profesionalaca.
4. Saznajte DRY koncepte kodiranja
"Ne ponavljajte sebe." Ova jednostavna fraza ima drastične implikacije kada je u pitanju kodiranje. Kada se zaista zarobite u DRY postupcima kodiranja, rezultat je čišće šifre, manje posla i prelijep novi tijek rada koji je jednako osnažujući i jednako strašan.
Za razliku od ostalih tema koje su poprilično uske, ova je prilično široka tema koja pokriva sve vrste različitih praksi, tehnika i ideja. Zanimljivo je da je jedna od stvari koja mi se nedavno usredotočila na postupke kodiranja DRY-a upotreba CSS pre-procesora.
Iako mnogi tvrde da pretprocesori dovode do loših praksi kodiranja, realnost je suprotna. Očito da i sami predprocesori pomažu u izbjegavanju ručnog ponavljanja, ali to nadilazi. Ispitivanje rezultata alata kao što su MANJ i SAS i ciljeva za jezike općenito dovelo je do toga da pišem bolji čisti CSS! Jednom kada savladate koncepte poput @extend u Sassu, ne možete si pomoći dok ne razmišljate o implikacijama kad kodirate samo CSS.
Resursi da vas tamo dovedu
SUHI CSS: Ne ponavljajte CSS
U ovom članku Steven Bradley vas upoznaje s temom DRY CSS-a i pokriva neke od njegovih glavnih principa i ciljeva. On svodi praksu na tri jednostavne ideje i pokazuje vam kako ih implementirati u stvarni tijek rada. Koncepti su u velikoj mjeri posuđeni iz prezentacije Jeremyja Clarkea koja pokriva istu temu.
Uvod u objektno orijentirani CSS (OOCSS)
Kao što sam već spomenuo, ideje svojstvene DRY CSS pokretu prilično su dalekosežne i izravno povezane s konceptima u drugim konstruktima. OOCS je sve popularnija metodologija koja ima za cilj pomoći u stvaranju bržih, učinkovitijih tablica stilova uz vrhunsku organizaciju i manje ponavljanja. U radu OOCS-a postoje dva glavna principa: odvajanje strukture od kože i razdvajanje spremnika i sadržaja. Ovaj članak časopisa Smashing provest će vas kroz osnovne ideje i pomoći vam da ih primijenite na vlastiti rad.
Uvod u SMACSS smjernice za pisanje CSS-a
Sjećate se Stevena Bradleyja iz prvog članka o DRY CSS-u? Napisao je i ovo djelo, koje objašnjava projekt sličan ali odvojen od OOCS-a: SMACSS (projekt Jonathana Snooka). Kao i kod OOCSS-a, SMACSS ima dva glavna cilja. Prvo je povećanje semantičke vrijednosti dijela HTML-a i sadržaja, a drugi je smanjenje očekivanja određene HTML strukture. Ovaj članak detaljno objašnjava oba cilja i pruža korisne primjere kodova tako da možete vidjeti SMACSS u akciji.
5. Znajte svoju podršku preglednika
Peti i posljednji ključ poboljšanja CSS-a jest znati što tamo radi. CSS3 je previše primamljiv za većinu nas da bismo ga ignorirali, ali tvrda je istina da čitav gomila toga ne funkcionira u određenim preglednicima (pod „određenim preglednicima“, naravno mislim na IE).
Velika tajna koju newbie web programeri trebaju upasti u glavu nije u tome što trebaju zapamtiti svaku pojedinu CSS značajku i kako svaki preglednik poznat čovjeku s tim rukuje, umjesto toga, što su vam na raspolaganju apsolutno nevjerojatni resursi koji vam daju ove informacije slobodno, samo moraš znati gdje tražiti.
Resursi da vas tamo dovedu
Podrška za preglednike za nokte u CSS3 i HTML5: Neprocjenjivi resursi koji će se koristiti danas
U ovom ću vam članku predstaviti relativno malo mjesta na kojima sam označen radi provjere podrške preglednika. Ti su resursi fantastični, vizualni i pružaju vam potrebne informacije trenutačno kako biste se mogli vratiti kodiranju. Pogledajte što su!
Podrška preglednika za CSS3: kakav je trenutačni status?
Ovaj članak je napisan prije više od godinu dana, pa je "trenutni status" komadljiv, ali nije dovoljno toga promijenjeno u ovom vremenu da bi informacije u ovom članku bile zastarjele. Služi kao nevjerojatno koristan pregled različitih CSS3 svojstava, podijeljenih u odjeljke na temelju onoga što svugdje radi i na što trebate paziti. Proći ćete samo nekoliko minuta i dobro je pročitati.
Važnost kompatibilnosti između preglednika: Savjeti i resursi
Ako ste doista novi u CSS-u i trebate osnovni uvod u temu kompatibilnosti preglednika i zašto je to važno, ovaj članak o Noupeu opisao vam je. Više od puke prodaje ideja o kompatibilnosti navodi popis velikih resursa koje možete koristiti da osigurate maksimalnu kompatibilnost. Posebno je zanimljiv popis alata koji će vam pomoći da testirate svoju web lokaciju u raznim preglednicima.
Pretpostavljam da ovo pročitam za 24 sata?
Predstavila sam vam pet apsolutno kritičnih tema za proučavanje i ne manje od petnaest članaka iz kojih možete naučiti načela koja trebate znati. Ovo je sve u redu, ali u svom naslovu obećao sam da ćeš se poboljšati u jednom danu i da svi nemaju vremena sjesti i pročitati petnaest dugih članaka!
Dobra vijest je da sam vam dao tri članka o svakoj temi, tako da biste imali nešto raznolikog izbora. Detaljno sam objasnio njihov sadržaj, tako da možete odabrati onaj koji najbolje odgovara vašim potrebama. Ne zaboravite odabrati članke za čitanje ne na temelju onoga što znate, već na onome što ne znate. Neka vam bude cilj popuniti praznine u vašem znanju.
Moj je prijedlog da pregledate gornji sadržaj i odaberete pet članaka za čitanje (po jedan iz svakog odjeljka). Čak i to je puno poduzeti u danu, ali većina njih nije previše tisuću riječi ili tako, mnoge su i manje. Uvjeren sam da to možeš povući. Ako ne možete, nema problema. Promijenite svoj cilj poboljšanja CSS vještina u jednom tjednu i čitajte jedan od svojih pet odabranih članaka svaki dan u sljedećih pet dana. Garantujem da će vam doći sljedeći tjedan mnogo bolje pisati jasan, koncizan, kompatibilan i ponovo dostupan CSS.
Koje druge koncepte preporučujete?
Sada kada ste pročitali mojih pet najboljih tema koje bi ljudi trebali razraditi kako bi poboljšali svoje CSS vještine, želim vas čuti. Koje druge teme mislite da se CSS koderi obično bore i koje resurse preporučujete svima koji žele naučiti više?
Fotografije sa fotografijama pružale su ljubaznost BigStocka
