Udtrykke det

Re-Cycling er Buzzword og i Webudvikling betyder det ikke anderledes. Det sparer energi, i form af indsats!

Over år med at skrive CSS og skabe HTML fra design, har jeg fulgt nogle af bedste praksis, i jagten på at spare tid og energi i det, vi normalt betegnelsen som "Re-opfinde den dybe tallerken". Igen og igen har jeg fortalte mig selv, at jeg skal skabe nogle skabeloner, nogle standard genbruges CSS, som jeg ville bruge UD AF BOKSEN i mit fremtidige arbejde. Selvom det ikke helt, men jeg lykkedes at opnå nogle mål.

I fremme, Re-brug af CSS havde jeg et kig på de få CSS rammer, der er almindeligt tilgængelige for os, og besluttede at sætte dem til at bruge, da disse er afprøvet og testet og skabt af meget erfarne udviklere, end mig selv. Endnu vigtigere "UNDGÅ genopfinder".

Selvom almindelig viden til veteraner, har jeg forsøgt at pen nogle af de vigtigste begreber / bedste-praksis / tanker, der er lagt i at skabe disse rammer, at RE-CYKLING af CSS muligt. Håber dette vil hjælpe nogle CSS udviklere, der er lige ved at, og for nylig gik ombord på CSS vognen!

Keys Re-cykel af CSS:

Brug Navngivningskonventioner

Dette må være den vigtigste faktor i at gøre CSS / HTML genbruges. Give konsistente navne til sideelementer muliggør genbrug af siden komponenter og deres stil med lidt eller modifikationer. I tråd med dette argument, HTML5 selv, i en væsentlig ændring ændring i forhold til sine forgængere, er at indføre nogle strukturelle tags dvs. <article>, <section>, <header>, <aside>, og <nav> [ Hvad vil HTML5 medbringe? ]. Selv med HTML 4 (eller lavere), er det bedst at nævne standard dele af din side consistanly som i den simple eksempel nedenfor ...

Husk, de fleste sider på dit projekt, ender med at have de samme centrale strukturelle elementer. Identificere disse fælles grundlæggende sideelementer ....

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

Nulstil standardstiler (CSS nulstiller): Uanset om du bruger en ramme eller skriv din egen, skal du give CSS Nulstiller [ Hvad er CSS Nulstiller? ], da de reducerer eller sommetider fjerne visuelle uoverensstemmelser, der opstår mellem forskellige browsere. I simple ord CSS Reset Mechanism sætter stilarter HTML Element til nul eller null værdier, og dermed tilsidesætter enhver browser standardværdier kan de udgør. Dette giver en ren tavle at indstille egenskaberne af disse elementer uden for enhver User-Agent Defaults [ CSS2.1 User agent typografiark Defaults ]. Alle de CSS rammer har af reset-mekanisme. Hvis du skriver dit eget CSS Nulstiller, et advarende ord er, at hvis du tilfældigvis til at glemme at nulstille en vigtig egenskab, kan det føre til cross-browser problemer, som er meget svære at fejlrette. Husk, Behold en kopi af reset stilarter og slippe dem i hvert nyt projekt, du opretter.

  krop, div, dl, dt, dd, ul, ol, li,
  h1, h2, h3, h4, H5, H6,
  før, form, fieldset, input, skal du vælge, textarea,
  p, blockquote, tabel, th, td
  {
    kant: 0px;
    margin: 0;
    padding: 0;
  } 

Angive standarder (Baseline Styles) til Elements:

Når du har angivet (til nul eller nul) standardværdier for visse egenskaber af visse HTML-elementer, er det nødvendigt at anvende nogle stilarter på tværs af alle forekomster af disse elementer. Disse standardindstilling kan variere som pr design eller efter den bedste praksis, du følger.

De fleste CSS rammer, altid introducerer nogle nye standarder, ud over at nulstille standardbrowser stilarter.
Disse standarder er ugyldig af User-Agent Defaults (skrællet væk af CSS Reset), vil disse være konsistent på tværs af browsere.

Husk, at baseline-stilarter bruges til at indstille stilarter, som vil blive anvendt design-bred. f.eks.

  html {font-size: 77%; font-family: Arial, sans-serif;}
 stærk, h1, h2, h3, h4, h5, h6 {font-weight: fed;} 

Abstrakte Styles for almindelige HTML-Komponenter og almindelige klasser:

De fleste projekt bestående af flere sider vil have fælles HTML-elementer bruges på tværs af webstedet, for fx nogle slags former, advarsler og fejl, Custom popups, lightboxer osv. Da sådanne komponenter anvendes igen på tværs af projekter, vil det være nyttigt at give et sæt af klasser i forbindelse med foruddefinerede typografier for disse komponenter, og du kan spare dig selv en masse tid.

Bortset fra at definere genanvendelige stilarter definitioner for de fælles HTML komponenter, kunne vi abstrakte stilarter klasser vedrørende typografi, farve eller endda layout. Jeg har en tendens du bruger ... almindelige klasser som Clearfix, Font08, FontGrey, AlignL, DisplayB osv.

  form, input {border: 0px; baggrund: # ffffff; padding: 0px 10px; _padding: 0px 0px; Højde: 26px; color: # 000000; line-height: 30px; font-size: 1.1em;}
 form, textarea {border: 0px; baggrund: # ffffff; color: # 000000; font-size: .9 em; line-height: 1.5em; overløb: synligt;}
 . Fbold {font-weight: fed, farve: # CCCCCC;}
 . Fgrey {color: # 666666;}
 . Flightgrey {color: # bbbbbb;}
 . Clearfix {klart: begge;}
 . Divider {border-top: 1px solid # 647B06; border-bottom: 1px solid # 9CC00A, højde: 0px;}
 . Displayb {display: block;}. Displayn {display: none;}
 . Alignr {text-align: højre}. Alignc {text-align: center}
 . Floatr {float: højre;}. Floatl {float: left;} 

Rettelser til almindelige browser særheder

Forskellige browsere implementere CSS kode og med varierende grad af støtte til CSS specifikationerne. Resultatet af denne .... "Browser Quirks", at vi udviklere er tilbage til at tackle. Især IE6 hjemsøger de fleste CSS kodere med en frist til at opfylde. Den gode nyhed er erfaring har samlet mulige Genanvendelige rettelser til disse spørgsmål (ofte betegnes som CSS Hacks ).

Husk, Hold disse hacks / fixes handy

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

Hold Forbedring af din CSS

• Den vane med at re-cykling vil ikke komme til dig i dag. Det skal udvikles. Så planlægge din Re-Cycling. Husk dette i tankerne, at man kunne abstrakte standard stilarter, typografi definitioner, layout, HTML-element stilarter osv. Prøv at tænke fremad.
• Også ser tilbage på dine tidligere projekter, vil det hjælpe med at identificere typografier, som du har tendens til at bruge ofte på tværs af porjects. Abstract det.
• Fjern eventuelle ubrugte stilarter. Denne praksis vil holde din CSS rammerne af en fælles symptom kaldes "oppustethed" -
• Fjern gentagne stilarter.
• Byg et sæt af stilarter, der er fleksible nok til at overføre det på tværs af projekter.

Et kig på CSS Frameworks

Endelig. Hvis du bliver inspireret og har til hensigt at anvende en eller flere af de CSS rammer, Heres er hurtig liste over nogle populære dem ....

• 960 Grid System : Den 960 Grid System er et forsøg på at strømline webudvikling arbejdsgangen ved at give almindeligt anvendte dimensioner, baseret på en bredde på 960 pixels. Der er tre varianter: 12, 16 og 24 søjler, som kan anvendes separat eller i tandem. Thought noget, du ikke kan oprette en for din egen nemt nok, den rammer giver grid skabeloner til tryk i PDF-format, at man kan bruge til at tegne din side designs.Bet, ville det gøre et professionelt indtryk, hvis du medbringer nogle få ark, når du går til en klient til UI krav indsamling. Det giver også grundlæggende grid skabeloner til populære design software som Fireworks, Flash, InDesign, Illustrator, Photoshop, Visio, osv. giver en "starter for ti" for at starte dit design arbejde.
• Handleplanen : Blueprint giver tydeligt klassificeret CSS-filer til Nulstiller, gitre, formularer, Print, typografi, plugins til knapper, faneblade og sprites osv. Det giver også støtte til IE som en særskilt omfatter.
• SenCSs : I modsætning til ovenstående to, SenCSs (udtales Sense) ikke har CSS-definitioner for Layout. Det gør omfatter skrifttyper, polstring, marginer, tabeller, lister, overskrifter, blockquotes, formularer og meget mere.
• BlueTrip : Dens oprindelige krav til berømmelse var, at det var en kombination af de bedste funktioner fra andre andre rammer som blå print, Trip oli ... fra, hvor det får sit navn. Dens funktion sæt inkluderer 24-kolonne grid, typografi stilarter, Orm stilarter, print, knapper mv
• YUI Grids : Bragt til dig af den Yahooo Developer Network, understøtter væske-bredde (100%) layout samt forprogrammerede fast bredde layout på 750px, 950px, og 974px, samt mulighed for nemt at tilpasse til ethvert nummer. Som du kan se, den teknisk kun layout komponenter. YUI også HTML / CSS sæt til andre sideelementer
• YAML (Yet Another multikolonne Layout)
• Emastic

Husk, ved hjælp af CSS rammer betyder ikke, at du er doven til at skabe en af ​​dine egne ... Det betyder, at du er smart at lære af andres erfaringer og fejltagelser, spare tid og øge produktiviteten!!