Uttrykke IT

Re-Sykling er Buzzword og i webutvikling betyr det ikke annerledes. Det sparer energi, i form av innsats!

Over år med å skrive CSS og lage HTML fra design, har jeg fulgt noen beste praksis, i jakten på å spare tid og energi på det vi vanligvis begrepet som "Re-Inventing the Wheel". Gang på gang har jeg fortalt meg selv at jeg må lage noen maler, noen standard gjenbrukbare CSS som jeg ville bruke UT av boksen i mitt videre arbeid. Selv om ikke helt, men jeg klarte å oppnå noen av målene.

I fremme, Re-Bruk av CSS, hadde jeg en titt på de få CSS rammeverk som er lettest tilgjengelig for oss, og bestemte seg for å sette dem i bruk, da disse er prøvd og testet og skapt av mye erfarne utviklere, enn meg selv. Enda viktigere "unngå ny oppfunnet".

Selv om felles kunnskap til veteraner, har jeg forsøkt å pennen noen sentrale begreper / beste praksis / tanker som har gått inn i å skape disse rammene, for å gjøre RE-sykling av CSS mulig. Håper dette vil hjelpe noen CSS utviklere som er bare om til og nylig gikk om bord i CSS lasset!

Keys Re-sykling av CSS:

Bruk navnekonvensjoner

Dette må være den viktigste faktoren i å gjøre CSS / HTML gjenbrukbare. Gi konsekvente navn til sideelementer muliggjør gjenbruk av siden komponenter og deres stiler med liten eller modifikasjoner. I tråd med dette argumentet, Even HTML5, i en stor endring endring over sine forgjengere, er å introdusere noen strukturelle tags viz. <article>, <section>, <header>, <aside>, og <nav> [ Hva vil HTML5 bringe? ]. Selv med HTML 4 (eller lavere), er det best å nevne standard deler av siden consistanly som i det enkle eksemplet nedenfor ...

Husk at de fleste sidene på prosjektet, ender opp med å ha de samme sentrale strukturelle elementer. Identifisere disse fellesfagene sideelementer ....

  <div id="container">
    <div id="header"> ... </ div>
    <div id="nav"> ... </ div>
    <div id="sidebar"> ... </ div>
    <div id="footer"> ... </ div>
   </ Div> 

Resett standard stiler (CSS Tilbakestillinger): Enten du bruker et rammeverk eller skriv din egen, må du oppgi CSS Tilbakestiller [ Hva er CSS Tilbakestiller? ], som de reduserer eller noen ganger eliminere visuelle uoverensstemmelser som oppstår mellom ulike nettlesere. I enkle ord CSS Reset Mechanism setter stiler av HTML-element til null eller null verdier, og dermed overstyre eventuelle nettleserens standardverdier de kan positurer. Dette gir et rent rulleblad for å angi egenskapene av disse elementene blottet for enhver Bruker-agent Standarder [ CSS2.1 User Agent stilark Defaults ]. Alle CSS rammene har av reset mekanisme. Hvis du skriver du egen CSS Tilbakestiller, er et ord av forsiktighet at hvis du tilfeldigvis har glemt å tilbakestille en tast eiendom, kan det føre til kryss-nettleser saker, som er svært vanskelig å feilsøke. Husk Behold en kopi av Tilbake stiler og slippe dem inn hver nye prosjekt du oppretter.

  kropp, div, dl, dt, dd, ul, ol, Li, H1, H2, H3, H4, H5, H6, pre, form, fieldset, inngang, velger, textarea, p, blockquote, bord, th, td { border: 0px; margin: 0; padding: 0;} 

Angi Defaults (baseline Stil) til Elements:

Etter at du har satt (til null eller null) standardverdiene av visse attributter av visse HTML-elementer, er det nødvendig å bruke noen stiler tvers hver forekomst av disse elementene. Disse standardinnstillingen kan variere per utformingen eller etter beste praksis du følger.

De fleste CSS rammeverk, introduserer alltid noen nye standarder, i tillegg til å tilbakestille standard nettleser stiler.
Disse standardene er ugyldig av User-Agent Defaults (strippet bort av CSS Reset), vil disse være konsekvent på tvers av nettlesere.

Husk, Baseline stiler brukes til å sette stiler som skal brukes design-bred. f.eks.

  html {font-size: 77%; font-family: Arial, sans-serif;}
 sterk, H1, H2, H3, H4, H5, H6 {font-weight: bold;} 

Abstrakte Styles for vanlige HTML-komponenter og vanlige klasser:

De fleste prosjekt bestående av flere sider vil ha felles HTML-elementer brukes i hele området, for eksempel noen slags former, varsler og feil, Custom popups og lysbokser osv. Siden slike komponenter er brukt om igjen på tvers av prosjekter, vil det være nyttig å gi en sett av klasser forbundet med forhåndsdefinerte stiler for disse komponentene, og du kan spare deg mye tid.

Bortsett fra å definere gjenbrukbare stildefinisjoner for de vanlige HTML-komponenter, kan vi abstrakte stiler klasser knyttet til typografi, farge eller layout. Jeg selv pleier du bruker ... vanlige klasser som Clearfix, Font08, FontGrey, AlignL, DisplayB etc.

  skjema inngang {border: 0px; bakgrunn: # FFFFFF; padding: 0px 10px; _padding: 0px 0px; høyde: 26px; color: # 000000; linje-høyde: 30px; font-size: 1.1em;}
 skjema textarea {border: 0px; bakgrunn: # FFFFFF; color: # 000000; font-size: .9 em; linje-høyde: 1.5em; overflow: visible;}
 . Fbold {font-weight: bold; color: # CCCCCC;}
 . Fgrey {color: # 666666;}
 . Flightgrey {color: # bbbbbb;}
 . Clearfix {klar: begge;}
 . Divider {border-top: 1px solid # 647B06; border-bottom: 1px solid # 9CC00A, høyde: 0px;}
 . Displayb {display: block;}. Displayn {display: none;}
 . Alignr {text-align: right}. Alignc {text-align: center}
 . Floatr {float: right;}. Floatl {float: left;} 

Fikser på vanlige nettleser quirks

Forskjellige nettlesere implementere CSS koden og gi varierende grad av støtte for CSS spesifikasjonene. Resultatet av dette .... "Browser quirks", som vi utviklere er igjen å takle. Spesielt hjemsøker IE6 mest CSS programmerere med en deadline. Den gode nyheten er erfaring har samlet mulige gjenbrukbare løsninger på disse problemene (ofte betegnet som CSS Hacks ).

Husk Hold disse hacks / feilrettinger hendig

  / * Følgende zoom: 1 regelen er spesielt for IE6 + IE7.  * /
    * Html. Clearfix,
    *:. Første-barn + html clearfix {
           zoom: 1;
      } 

Hold Avgrense CSS

• Den vanen med re-sykling vil ikke komme til deg i dag. Det må utvikles. Så planlegger Re-Sykling. Ha dette i tankene at du kunne abstrakte defaults stiler, typografi definisjoner, layout, HTML element stiler ol Prøv å tenke fremover.
• Også ser tilbake på tidligere prosjekter, vil det bidra til å identifisere stiler som du pleier å bruke ofte på tvers porjects. Abstract det.
• Fjern eventuelle ubrukte stiler. Denne praksisen vil holde CSS rammeverk fra et vanlig symptom som heter "oppblåsthet" -
• Fjern repeterende stiler.
• Bygg et sett med stiler som er fleksible nok til å portere det på tvers av prosjekter.

A Look At CSS Frameworks

Endelig. Hvis du blir inspirert og har tenkt å bruke en eller flere av CSS rammeverk, er Heres rask liste over noen populære ....

• 960 Grid System : The 960 Grid System er et forsøk på å strømlinjeforme webutvikling arbeidsflyten ved å gi vanlige dimensjoner, basert på en bredde på 960 piksler. Det er tre varianter: 12, 16 og 24 kolonner, som kan brukes separat eller i tandem. Tanke ingenting at du ikke kan lage en for din egen enkelt nok, gir rammene grid maler for utskrift i PDF format, som man kan bruke til å skissere din side designs.Bet, ville det gjøre et profesjonelt inntrykk, hvis du bærer noen ark når du går til en klient for UI krav Gathering. Det gir også grunnleggende grid maler for populær design software som fyrverkeri, Flash, InDesign, Illustrator, Photoshop, Visio, etc. som gir en "startpakke for ti" for å starte prosjektering.
• Blueprint : Blueprint gir tydelig klassifisert CSS-filer for tilbakestilles Rister, skjemaer, Print, typografi, Plugins for knapper, faner og sprites osv. Det gir også støtte for IE som en egen omfatte.
• SenCSs : I motsetning til de ovennevnte to, SenCSs (uttales Sense), ikke har CSS definisjoner for layout. Det inkluderer skrifter, polstringer, marginer, tabeller, lister, overskrifter, blockquotes, skjemaer og mer.
• BlueTrip : Dens opprinnelige krav til berømmelse var at det var en kombinasjon av de beste funksjonene som tilbys av andre andre rammeverk som blå skrift, Trip Oli ... fra hvor den har fått navnet sitt. Dens funksjon sett omfatter 24-kolonne rutenett, typografi stiler, Orm stiler, print, knapper osv.
• YUI Grids : Brakt til deg av Yahooo Developer Network, støtter væske-bredde (100%) layouter samt forhåndsinnstilte fast bredde oppsett på 750px, 950px, og 974px, og muligheten til enkelt å tilpasse til en rekke. Som du kan se, dets teknisk bare layout komponenter. YUI også HTML / CSS sett for andre sideelementer
• YAML (Yet Another Multicolumn Layout)
• Emastic

Husk å bruke CSS rammeverk betyr ikke at du er lat til å lage deg en egen ... Det innebærer at du er smart å lære av andre erfaringer og feil, spare tid og øke produktiviteten!!