10 Best CSS Practices til að bæta kóða þinn
Það er mjög auðvelt að finna sjálfan þig að furða hvernig CSS þín varð að vera svo sóðaskapur.
Stundum er það afleiðing af slæmur kóðun frá upphafi, stundum er það vegna margra járnsöga og breytinga með tímanum.
Hver sem orsökin er, þarf það ekki að vera þannig. Að skrifa hreint, frábær viðráðanlegt CSS er einfalt þegar þú byrjar á hægri fæti og gerir kóðann auðveldara að viðhalda og breyta síðar.
Hér eru 11 ráð til að flýta fyrir ferlið, skrifa CSS sem er grannur, hraðar og líklegri til að gefa þér höfuðverk.
1. Vertu skipulögð
Rétt eins og allt annað, borgar það að halda þér skipulagt. Frekar en að sleppa í sjálfu sér í kennslustundum og flokkum í þeirri röð sem þau koma upp í hug, notaðu samfellda uppbyggingu.
Það mun hjálpa þér að halda cascading hluta CSS í huga og setur stíllinn þinn upp til að nýta sér stíl arfleifðar.
Lýsa flestum almennum hlutum þínum fyrst, þá ekki-svo-almennt og svo framvegis. Þetta leyfir CSS þínum að eignast eiginleika réttilega og gerir það miklu auðveldara fyrir þig að hunsa ákveðna stíl þegar þú þarft. Þú munt vera hraðari þegar þú breytir CSS þínum síðar vegna þess að það mun fylgja auðvelt að lesa, rökrétt uppbygging.
Notaðu uppbyggingu sem virkar best fyrir þig meðan þú heldur áfram í framtíðinni og öðrum forritara í huga.
- Endurstillir og overrides
- Tenglar og tegund
- Aðalskipulag
- Secondary skipulag mannvirki
- Formþættir
- Ýmislegt
2. Titill, dagsetning og skilti
Láttu aðra vita hver skrifaði CSS þinn, þegar það var skrifað og hver á að hafa samband ef þeir hafa spurningar um það. Þetta er sérstaklega gagnlegt við hönnun sniðmáta eða þemu.
Bíddu í eina mínútu ... hvað er það svolítið um litbrigði ? Í gegnum árin hef ég komist að því að bæta einföldum lista yfir algengar liti sem notuð eru í blöðum mínum eru mjög hjálpsamir við fyrstu þróun og þegar breytingar eru gerðar síðar.
Þetta sparar þér frá því að þurfa að opna Photoshop til að sýna lit frá hönnuninni eða líta upp litum á vefsvæðinu stíl fylgja (ef það hefur einn). Þegar þú þarft HTML kóða fyrir þá tiltekna bláu skaltu bara fletta upp og afrita hana.
3. Haltu sniðmátarsafninu
Þegar þú hefur sett upp á uppbyggingu sem þú vilt nota skaltu fjarlægja allt sem er ekki almennt og vista skráin sem CSS sniðmát til seinna notkunar.
Þú getur vistað margar útgáfur til margvíslegrar notkunar: Tvær dálkur skipulag, blogg skipulag, prenta, farsíma og svo framvegis. Coda (ritstjóri fyrir OSX) hefur ógnvekjandi klemma sem gerir þér kleift að gera þetta auðveldlega. Margir aðrir ritstjórar hafa svipaða eiginleika, en jafnvel einföld hópur textaskrár mun virka vel.
Það er geðveikt að endurskrifa hvert og eitt stílblöðin þín frá grunni, sérstaklega þegar þú notar sömu samninga og aðferðafræði í hverju.
4. Notaðu gagnlegar nafngiftarsamninga
Þú munt taka eftir hér að ofan þar sem ég lýsti nokkrum dálkum og ég kallaði þá col-alpha og col-beta. Hvers vegna ekki bara að hringja í þau col-left og col-right? Hugsaðu um breytingar í framtíðinni, alltaf.
Næsta ár gætir þú þurft að endurhanna síðuna þína og færa vinstri dálkinn til hægri. Þú ættir ekki að þurfa að endurnefna hlutinn í HTML þínum og endurnefna kennitöluið í stílblaðnum þínum til að breyta stöðu sinni.
Jú, þú gætir bara flytja þessi vinstri dálki til hægri og haltu auðkenniinu sem # col-vinstri, en hversu ruglingslegt er það? Ef nafnið segir til vinstri ættir maður að búast við því að það muni alltaf vera til vinstri. Þetta skilur þér ekki mikið pláss til að færa hlutina í kringum síðar.
Einn af helstu kostum CSS er hæfni til að aðgreina stíl frá efni. Þú getur endurhannað síðuna þína algerlega með því að breyta CSS án þess að snerta HTML. Svo ekki mýktu upp CSS með því að nota takmarkandi nöfn . Notaðu fjölhæfari nafngiftarsamninga og haltu áfram í samræmi.
Skildu stöðu eða stilla ákveðin orð úr stílum þínum og auðkenni. Hlekkur af .link-blár mun annaðhvort gera þér meiri vinnu eða gera stíllinn þinn mjög sóðalegur þegar viðskiptavinurinn biður þig síðar um að breyta þeim bláu tenglum í appelsínugult.
Nafni þættirnar þínar byggðar á því sem þeir eru, ekki hvað þeir líta út. Til dæmis er .comment-blár miklu minna fjölhæfur en .comment-beta og .post-largefont er takmarkandi en .post-titill.
5. Hyphens í stað Underscores
Eldri vafrar eins og að fá glitchy með undirstrikum í CSS, eða styðja þau ekki yfirleitt. Til að ná betri samhæfni aftur á bak, komdu í vana að nota bandstrik í staðinn. Notaðu # col-alfa frekar en #col_alpha.
6. Ekki endurtaka sjálfan þig
Endurnotaðu eiginleika þegar hægt er með því að flokka þætti í stað þess að lýsa yfir stíllunum aftur. Ef h1 og h2 þættir þínar nota bæði sömu leturstærð, lit og marmar, flokkaðu þær með kommu.
Þetta:
Þú ættir einnig að nýta flýtivísanir þegar mögulegt er. Vertu alltaf að leita að tækifærum til hópþátta og notaðu flýtileiðir yfirlýsingu.
Þú getur náð öllu þessu:
með aðeins þetta:
Það er mjög mikilvægt að þú skiljir röðina þar sem CSS túlkar þessar flýtileiðir: toppur, hægri, neðst, vinstri. Stórt réttsælis hring, byrjar á hádegi.
Einnig, ef efri og neðri eða vinstri og hægri eiginleiki eru þau sömu þarftu aðeins að nota tvo:
Þetta setur efstu og neðri mörkin til 1em, og vinstri og hægri margar til 0.
7. Bjartsýni fyrir léttar stílblöð
Með því að nota ofangreindar ráðleggingar geturðu virkilega skorið niður stærð stílblöðanna. Minni byrði hraðar og minni er auðveldara að viðhalda og uppfæra.
Skera út það sem þú þarft ekki og styrkja þar sem hægt er með því að flokka. Gæta skal varúðar þegar þú notar CSS ramma. Þú ert líklegri til að erfa mikið magn sem ekki verður notað.
Annar fljótur þjórfé fyrir grannt CSS: þú þarft ekki að tilgreina mælieiningar þegar þú notar núll. Ef framlegð er stillt á 0 þarftu ekki að segja 0px eða 0em. Núll er núll án tillits til mælieiningarinnar og CSS skilur þetta.
8. Skrifaðu grunninn þinn fyrir Gecko, þá Tweak fyrir Webkit og IE
Sparaðu þér vandræða með höfuðverk og skrifaðu CSS fyrst fyrir Gecko vafra (Firefox, Mozilla, Netscape, Flock, Camino). Ef CSS virkar rétt með Gecko er miklu líklegri til að vera vandamállaus í Webkit (Safari, Chrome) og Internet Explorer.
9. Staðfesta
Nýta sér Ókeypis CSS löggildir W3C . Ef þú ert fastur og útlitið þitt er ekki að gera það sem þú vilt gera þá mun CSS löggjafinn vera stór hjálp við að benda á villur.
10. Haltu snyrtilegu húsi
Sérgreindu vafra-sérstakan CSS í eigin stílhólf og fylgdu eftir þörfum með Javascript, miðlara-hliðarkóða eða skilyrt athugasemdir . Notaðu þessa aðferð til að koma í veg fyrir óhreina CSS hacks í aðalstílblöðunum þínum. Þetta mun halda CSS stöðinni hreinum og viðráðanlegri.
Skrifað eingöngu fyrir WDD eftir Jeff Couturier
Fylgir þú þessum aðferðum þegar þú skráir vefsíður þínar? Hvaða aðrar aðferðir notast við til að búa til betri kóða?