Þróa duglegur, straumlínulagað CSS
CSS er hægt að bera saman við verkfæri myndhöggvara; eins og myndhöggvara í vinnunni, notum við hönnuðir CSS til að búa til skipulagðar uppsetningar vefsíður.
Í gegnum árin hefur þetta ferli orðið skipulagt; reglur hafa verið gerðar til að búa til bestu starfsvenjur kóðunar.
Í þessari grein munum við skoða nokkrar hugmyndir sem þú getur notað þegar þú skrifar stílblöð til að flýta fyrir kóðann þinn.
Skilvirk CSS er auðvelt að stjórna og auðvelt að lesa og getur verið úrræði fyrir vefhönnuðir. Að skipuleggja er stórt skref, en með því að nota CSS getur verið svolítið flóknara en það.
Eins og þú lest þessa grein, haltu eigin óskum þínum í huga; Besta ráðin sem þú getur fengið frá hvaða verktaki er að finna eigin vinnubrögð. Sameina nokkrar af þeim aðferðum hér með eigin aðferðum til að ná sem mestum árangri.
Afhverju ertu að klára CSS?
Margir hönnuðir trufla framhlið og bakhlið tungumál þegar þeir tala um þáttunarkóða. CSS og HTML eru framhlið hönnunar tungumál notuð til að snið og stilla þætti á vefsíðu. Skrár eru sóttar og fluttar af vafranum gestur, sem þýðir að framhliðarkóði hefur verulegan hleðslutíma.
Kóðinn sem hlaðið er niður og flutt af vafranum tekur tíma til að lesa og reikna, rétt eins og kóða sem er skrifað á bakgrunni tungumálum (eins og PHP eða Ruby). Straumlínulagað CSS getur haft gagn af vefsíðu vegna þess að það getur dregið úr hleðslutíma og flýtt fyrir uppbyggingu á síðu-þáttum.
Ávinningurinn getur ekki verið augljós með háhraðatengingu í dag og háþróaður stýrikerfi. Þú gætir viljað líta á vefsíðuna þína í farsímaflugi til að bera saman álagstíma og sjá hvernig vefsíðan byrjar.
Þegar CSS er dulritað á skilvirkan hátt, ættirðu að sjá mynd og stíl vefsíðnaþátta eins og þau eru unnin. Þetta getur litið öðruvísi en vafra í vafra, en það gerist samt. Því meira sem þú prófar kóðann þinnar vefsíðu, því meira sem þú munt sjá það.
Haltu kóðanum þínum stöðluðum og einföldum. Ef þú ert að uppfæra bloggið þitt eða persónulega vefsíðu nokkra mánuði eftir upphaflega þróun, er það auðveldara að takast á við CSS stíl sem þú þekkir en að takast á við nýju. Aðlögun að settar staðlar hjálpar til lengri tíma litið.
Hvernig á að vinna með skilvirkum kóða
Til að byrja að stilla kóðun með bestu skilvirkni þarftu að samþykkja nokkrar nýjar hugmyndir. Þetta eru grundvallar CSS tækni sem notuð eru í dag með því að bjóða upp á vefsíður og forritara.
Haltu kóðanum þínum einfalt
Þetta má auðveldlega gleymast. Haltu því einfaldlega þegar þú kortleggir gögn úr stílum þínum. Búðu til gagnasöfn í dálkstakki ef þú þarft.
Byrjaðu með því að búa til lista yfir mismunandi hlutum til að vinna í stílum þínum. Þú getur falið í sér texta, eyðublöð, uppsetningarkassa, haus, fótur og annað sem þú gætir þurft. Til að virkilega skipuleggja getur þú brotið það niður í nokkrar þekktar stíll, svo sem id eða class fyrir flakk tengla.
Þetta fyrsta skref hjálpar til við að búa til teikningu fyrir vefsvæðið þitt með því að nota látlaus orð áður en þú kemst inn í hvaða stílmál sem er. Síðan er setið niður til að skrifa kóða mun auðveldara; að hafa auðlindalista fyrir framan þig mun hjálpa þér að hella út kóða á næstum ofbeldi.
Haltu blokkum kóða afmarkað og dreifður
Það er í gangi umræðu um hvernig CSS númer ætti að vera skrifuð. Þegar ég byrjaði fyrst notaði ég blokkatriði vegna þess að það var allt sem ég hafði nokkurn tíma séð. En einfalt merking er miklu hraðar þegar kemur að því að flokka texta og gera það læsilegt.
Ég geri ekki mál fyrir að hunsa CSS-blokkar-langt frá því. Þegar þú ert að takast á við mikilvægan þátt eða id sem hefur sex eða sjö helstu eignir, verður það auðveldara að halda því í lokuðu formi. Þú verður að einangra mikilvæga hluta af stíl þinni, sem gerir þeim auðveldara að finna í fljótu bragði.
Það er líka auðveldara að lesa langar stafir í lokasamtali vegna þess að flestir ritstjórar vefja langar línur, og að lesa eignargildi pör geta orðið ruglingslegt þegar þú hefur 10 eða fleiri til að fara í gegnum. Tilvera vefur hönnuður, þú þarft að hringja í hvernig á að geyma út CSS númerið. Haltu skilvirkni í huga og notaðu bestu dómgreind þína.
Vinna með öðrum hönnuðum
Ef þú ert faglegur vefur hönnuður eða leitast við að vera einn, líklega ertu að vinna með lið fyrr eða síðar. Þetta getur verið blessun eða bölvun, allt eftir liðinu.
Hönnuðir eru oft tregir til að gera verulegar breytingar á starfi sínu. CSS kóða er svolítið öðruvísi vegna þess að þú ert að reyna að búa til fallega skipulag með aðeins eigindalegum gildum og skrár geta orðið sóðalegir þegar liðin eru milli nokkurra handa. Svo vertu skipulögð.
Athugasemdir eru mikil hjálp. Ef línur eða blokkir af kóða gætu ruglað saman eða villt aðra, munu athugasemdir spara tíma. Útskýrið allt sem þú setur inn í stílblaðið eins glæsilegt og mögulegt er.
Gakktu úr skugga um að ekki séu afritaðar eða afritaðar stafir. Ímyndaðu þér að h1 til h4 fyrirsagnir eru settar hátt upp í CSS skjali, en þá breytir einhverri kóða niður niður letur þeirra. Þetta gæti verið mjög ruglingslegt fyrir einhvern sem ekki skrifaði kóðann og þarf nú að fara í gegnum og laga galla.
Samskipti eru einnig mikilvæg. Þú gætir skrifað skilvirka kóðann í kringum þig, en skortur á samskiptum mun dæma lið þitt. Leggðu áherslu á verkefnið sem er fyrir hendi og vinnðu með skapandi hugmyndum sem framleidd eru sameiginlega af liðinu (ekki bara þitt eigið).
Fylgstu með sérstökum CSS skjölum
Önnur leið til að halda kóða hreinu og skipulögð er að halda stílflokka aðskilin. Þetta virkar vel fyrir stórar vefsíður þar sem að halda öllum stíllunum í einu skjali væri óraunhæft.
Facebook er gott dæmi. Það hefur líklega margar mismunandi gerðir fyrir allar mismunandi síður sínar: snið, leit, skráning, myndir osfrv. Ef stíllinn var samsteyptur í einum skrá myndi ég ekki vilja vera sá sem þarf að raða í gegnum kóðann bara til að lagaðu einfaldan galla.
Facebook fær miklu meiri umferð en vefsvæðið þitt, en meginreglurnar eru þau sömu. Ef skipulag er áhyggjuefni, geta aðskildar stílblöð farið langt. Vefhönnuðir skipuleggja oft kóðann sem byggist á hlið skjalsins sem hann byggir á (td layout.css , text.css , forms.css ).
Ekki þarf að hlaða öllum stöfum á hverri síðu. Og hér liggur ávinningur: aðferðin gerir ráð fyrir meiri customization þegar þú setur upp vefsvæðið þitt. Þú munt skera niður á flokka tíma gríðarlega bara með því að búa til aðskildar skoðanir og stíl.
Testing Stuðningur við IE
Vefur verktaki hefur alltaf málað Internet Explorer sem illmenni, sérstaklega með CSS. Til allrar hamingju, þú getur sótt skilyrt athugasemdir (sem líta út eins og venjulegar athugasemdir við flestar vélar) í HTML.
Þú getur notað þetta til að beita stílum í Internet Explorer. Skoðaðu skilyrt athugasemdir ef þú þekkir ekki þau; Þeir geta reynst ómetanleg þegar CSS eiginleikar virka ekki rétt og þú þarft val.
Með útgáfu af Internet Explorer 9 Beta , við erum að fá smá nærri sameinaðri internetupplifun. Eina vandamálið er fjöldi fólks sem er enn í gangi vafra eins og gömul og IE6 og IE7, sem hafa alvarlegar vinnsluhugmyndir (vegna gallaða flutningsmála) og þurfa stundum ytri stíl. Sem betur fer hefur stuðningur batnað og Microsoft virðist vera að snúa hlutum í kring.
Bætir við efnisyfirliti
Þetta skref er valfrjálst, en mér finnst það virkar undur fyrir stílblöðin mín. Þú getur geymt borðið utan CSS skjalsins sjálft, en ég hef fundið þetta til að vera nokkuð gagnvirkt - sérstaklega vegna þess að bæta við athugasemdum inline er svo auðvelt.
Helstu ástæður fyrir því að setja inn innihaldsefni í stílum þínum eru að það auðveldar aðgang og hagræðir breytinguna. Settu merki í upphafi skjalsins til að aðgreina kóðann í rökréttar deildir.
Að búa til eigin lykla er góð leið. Til dæmis, ef þú ætlar að skipta töflunni þínum eftir helstu sviðum skjalsins (skipulag, letur, haus, flakk osfrv.), Gætirðu valið köflurnar með einstökum stafi.
Þú gætir notað =!layout og =!font að afmarka skipulag og leturgerðir, í sömu röð. Þú munt líklega ekki hlaupa inn í nákvæmlega röð stafi hvar sem er í kóðanum, svo að bæta þeim við bæði borðið þitt og upphaf hverrar athugasemdar ætti að vera öruggur. Notaðu síðan leitina í textaritlinum til að sleppa niður í hlutann sem þú vilt.
Þetta er líka góð stefna fyrir verkefni þar sem margir munu skoða kóðann. Það heldur allt skipulagt og aðgengilegt.
Það eru margar leiðir til að hámarka kóða og gera það skilvirkari og þessar ráðleggingar eru frábærir. CSS er að þróast og mikið af nýjum hugmyndum um það er byggt upp.
Þú þarft ástríðu og vígslu til að gera það í hönnunariðnaði. Ef þú getur haldið áfram ástríðu þína fyrir stafræna hönnun, þá ætti ekki að vera erfitt að fylgjast með CSS bestu starfsvenjum. Að ná til annarra í þessu mikla alþjóðlegu samfélagi vefhönnuða getur verið frábær hjálp; sérfræðingar í iðnaði eru yfirleitt ánægðir með að deila tækni og nýjungum.
Þessi færsla var skrifuð eingöngu fyrir Webdesigner Depot by Jake Rocheleau , ástríðufullur vefur hönnuður og félagslegur fjölmiðla áhugamaður. Jake elskar að lesa og skrifa um nýjustu stafræna og internetið þróun og tengsl við hönnun samfélagsins. Til að heyra meira um starf hans, finndu hann á Twitter @ jakerocheleau .
Hver eru aðferðir þínar til að hagræða CSS? Allar tillögur fyrir newbie CSS verktaki? Hvaða nýja eiginleika eða viðbótarstuðning viltu sjá í framtíðinni endurtekningum CSS?