Duke shprehur IT

Re-Cycling është buzzword dhe në zhvillimin e web kjo do të thotë nuk janë të ndryshme. Ajo ruan energjinë, në kuptimin e përpjekje!

Gjatë viteve të shkruar CSS dhe HTML krijuar nga planet, unë e kam ndjekur disa praktikave pak të mira, në ndjekje të kursyer kohë dhe energji në atë që ne zakonisht termi si "Re-shpikur rrota të". Ora dhe koha përsëri, unë kam thënë veten time, se unë duhet të krijojë një templates disa, disa standarde ri-përdorshme CSS se unë do të përdorin të dalë nga kutia në punën time në të ardhmen. Edhe pse jo plotësisht, por unë kam arritur të arritur disa nga qëllimet.

Në vazhdimin, Re-Përdorimi i CSS, kam pasur një vështrim në disa kornizave CSS që janë zakonisht në dispozicion për ne dhe vendosi për të vënë ato në përdorim, pasi këto janë provuar dhe testuar dhe krijuar nga zhvilluesit e shumë përvojë, se veten time. Më e rëndësishmja "MOS RE-trillues".

Edhe pse njohuri të përbashkët për veteranët, kam provuar te stilolaps disa koncepte kryesore / më të mira të praktikave / mendimet që ka shkuar në krijimin e këtyre kornizave, për të bërë RE-i çiklizmit CSS e mundur. Shpresoj se kjo do të ndihmojë disa zhvilluesve CSS cilët janë vetëm në lidhje me të dhe së fundi hipi në bandwagon CSS!

Re Keys-i çiklizmit CSS:

Përdorimi Konventat emërtimin

Kjo duhet të jetë faktori më i rëndësishëm në marrjen e CSS / HTML ri përdorshme-. Dhënia e emrave të vazhdueshme për të elementeve faqe mundëson ri-përdorim të komponentëve faqe dhe stilet e tyre me pak apo modifikime. Në përputhje me këtë argument, Edhe HTML5, në një ndryshim ndryshim të madh mbi paraardhësit e tij, është për të futur disa strukturor dmth tags. <article>, <section>, <header>, <aside>, dhe <nav> [ Çfarë do të sjellë HTML5? ]. Edhe me HTML 4, paragrafi ose të ulët), ajo është e mirë për të përmendur pjesë standarde e faqes tuaj consistanly si në shembull të thjeshtë më poshtë ...

Mos harroni, faqet Shumica në projektin tuaj, deri në fund duke pasur elemente të njëjta thelbësore strukturore. Identifikimi këto elemente të përbashkëta faqe kryesore ....

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

Reset Styles paracaktuarin (CSS Rivendos): Nëse ju përdorni një kornizë ose shkruani tuaj, ju duhet të sigurojë CSS resets [ Cilat janë CSS Rivendos? ], si ato të reduktuar ose eliminuar mospërputhjet ndonjëherë vizuale që ndodhin në mes të shfletuesit të ndryshme. Me fjalë të thjeshta Mekanizmi Reset CSS vendos stilet e Element HTML ndaj vlerave zero ose null, kështu thelbësore të çdo vlerat e prezgjedhura shfletuesit ata mund të paraqet. Kjo siguron një propozoj të pastër për të vendosur vetitë e këtyre elementeve të ndonjë zbrazëti User-Agjenti defaults fjalës CSS2.1 Agjenti User Style Sheet defaults ]. Të gjitha kornizat CSS kanë të mekanizmit për risistemim. Nëse jeni duke shkruar ju vet CSS resets, një fjalë e kujdes është se nëse ju ndodh që të harrojnë për të rivendosur një pronë të rëndësishme, Kjo mund të çojë në ndër-shfletuesit çështjeve, që janë shumë e vështirë të korrigjoj. Mos harroni, të mbajë një kopje të stileve të rishkruhet dhe rënia e tyre në çdo projekt të ri të krijuar.

  trupit, div, DL, dt, dd, ul, ol, li,
  H1, H2, H3, H4, H5, h6,
  para, formë, FIELDSET, të dhëna, zgjidhni, Textarea,
  p, blockquote, tavolinë, th, td
  {
    Kufiri: 0PX;
    margin: 0;
    mbushje: 0;
  } 

Defaults Bëje (stilet themelore) për elemente:

Pasi të keni vendosur (në zero ose NULL) vlerat e parazgjedhur të atributeve të caktuara të Elemente të caktuara HTML, Është e nevojshme të aplikoni disa stile të gjithë çdo rast të këtyre elementeve. Këto vendosjen e parazgjedhur mund të ndryshojnë si për dizajn ose në përputhje me praktikat më të mira që ju ndjekin.

Shumica kornizat CSS, gjithmonë prezanton disa standarte të reja, përveç në rivendosjen e stileve të shfletuesit parazgjedhur.
Këto standarte janë boshllëkun e User-Agjenti defaults simbolit hoqi larg nga Reset CSS), këto do të jenë në përputhje të gjithë shfletuesit.

Mos harroni, stilet themelore janë përdorur për të krijuar stile që do të përdoren design-gjerë. psh.

  html {font-size: 77%; font-family: Arial, sans shrift me dhëmbëza-;}
 fortë, H1, H2, H3, H4, H5, h6 {font-weight: bold;} 

Styles Abstract për komponentët e përbashkëta HTML dhe klasat e zakonshme:

Projekti më i përbërë nga disa faqe do të kenë elemente të përbashkëta HTML përdoren në të gjithë vendin, për lloj p.sh. disa prej formave, alarme dhe gabime, popups doganore, etj LightBoxes Që nga përbërësit e tillë janë përdorur pa pushim nëpër projekte, Ai do të jetë e dobishme për të siguruar një vendosur e klasave që lidhen me stile të paracaktuara për këto komponente dhe ju mund të kursejnë vetes një shumë kohë.

Përveç përcaktimit stilet reusable përkufizimet për komponentë të përbashkëta HTML, ne mund stilet abstrakte klasat që kanë të bëjnë për të, ngjyra tipografi apo edhe layout. Unë vetë kanë tendencë që ju përdorni ... klasa të përbashkëta si Clearfix, të Font08, të FontGrey, të AlignL, të DisplayB etj

  input formë {border: 0PX; background: # ffffff; padding: 10px 0PX; _padding: 0PX 0PX; height: 26px; color: # 000000; line-height: 30px; font-size: 1.1em;}
 formë Textarea {border: 0PX; background: # ffffff; color: # 000000; font-size: .9 em, line-height: 1.5em, del nga shtrati: dukshme;}
 . Fbold {font-weight: bold; color: # cccccc;}
 . Fgrey {color: # 666666;}
 . Flightgrey {color: # bbbbbb;}
 . Clearfix {qartë: të dyja;}
 . Ndan {border-top: 1px solid # 647B06; kufirit-bottom: solid 1px # 9CC00A; height: 0PX;}
 . Displayb {display: block;}. Displayn {display: none;}
 . Alignr {text-align: right}. Alignc {text-align: qendra}
 . Floatr {float: right;}. Floatl {float: majtas;} 

Fixes për keto lojra fjalesh përbashkëta shfletuesit

Shfletues të ndryshme të zbatojë kodin CSS dhe të sigurojë nivel të ndryshme të mbështetjes për specifikimet e CSS. Rezultati i kësaj .... "Quirks browser", që ne zhvilluesve kanë mbetur për të trajtuar. Sidomos, IE6 Haunts Coders më CSS me një afat për të përmbushur. Lajm i mirë është eksperienca ka sjellë së bashku fixes mundshme reusable për këto çështje (termi shpesh si hacks CSS ).

Mos harroni, Mbani këto hacks / fixes i dobishëm

   / * Zoom vijon: 1 rregull është posaçërisht për IE6 + IE7.  *. / Html clearfix *, *: e para-fëmijë + html clearfix. {Zoom: 1;} 

Mbani Rafinimi CSS juaj

• Zakoni i ri çiklizmit të nuk do të vijnë tek ju në ditë. Ajo ka për të zhvilluar. Pra, planifikoni çiklizmit Re-in tuaj. Mbajnë këtë në mend se ju mund të defaults stilet abstrakte, përkufizime shtypshkrimi, Layouts, stilet HTML Element etj Mundohuni të mendoni përpara.
• Gjithashtu shikojnë mbrapa në projektet tuaja të kaluara, ajo do të ndihmojë në identifikimin e stile që ju kanë tendencë për të përdorur shpesh në të gjithë porjects. Abstract saj.
• Hiq ndonjë stilet papërdorura. Kjo praktikë do të mbajë CSS kuadrin tuaj nga një simptomë të përbashkët të quajtur "bloating" -
• Hiq stile të përsëritura.
• Ndërtimi i një sërë stilet që janë mjaft fleksibile për të portit atë përtej projekteve.

Një Shiko Në kornizat CSS

Së fundi. Nëse jeni të frymëzuar dhe synojnë për të përdorur një apo më shumë nga kornizat CSS, Heres është lista e shpejtë të një ato pak të njohura ....

• 960 Sistemi Grid : 960 Sistemi Grid është një përpjekje për të përmirësuar zhvillimin e punës web duke ofruar dimensione të përdorura zakonisht, bazuar në një gjerësi prej 960 pixels. Ka tre variante: 12, 16 dhe 24 kolona, ​​të cilat mund të përdoren veçmas apo së bashku. Asgjë menduar se ju nuk mund të krijojë një për tuaj mjaft lehtë, Korniza ofron templates rrjetit për shtyp në formatin PDF, që mund t'i përdorni për të sketch designs.Bet faqen tuaj, Ai do të bëjë një përshtypje profesionale, në qoftë se keni kryer një fletë pak kur ju shkoni në një klient për UI mbledhjen e kërkesave. Ajo gjithashtu ofron templates bazë rrjetit për design software popullor si Fireworks, Flash, Illustrator InDesign,, Photoshop, Visio, etj siguruar një "iniciativë për dhjetë" për të filluar punën tuaj design.
• Propozimit : Propozimit ofron klasifikuara qartë fotografi CSS për resets, rrjetet, format, të shtypura, shtypshkrimi, plugins për butonat, skedat dhe sprites etj Ajo gjithashtu ofron mbështetje për IE si një rast i veçantë përfshijnë.
• SenCSs : Ndryshe nga dy të mësipërm, SenCSs (Sense theksuar), nuk ka përkufizime për CSS Layout. Ai e bën të përfshijë fonts, paddings, kufijtë, tavolina, listat, headers, të blockquotes, format dhe më shumë.
• BlueTrip : pretendim i saj fillestar për të famës ishte se, ajo ishte një kombinim i karakteristikat më të mira të ofruara nga kornizat e tjera e tjera si, print Trip Oli Blue ... nga ku ajo merr emrin e saj. Tipar i saj përfshin 24-kolonë rrjetit, stilet shtypshkrimi, stilet orm, të shtypura, butonat etj
• Yui rrjetet : Sjellur tek ju prej Rrjeti Zhvilluesish Yahooo, mbështet lëng-Gjerësia (100%) Layouts si dhe paraprakisht me gjerësi fikse Layouts në 750px, i 950px, dhe 974px, dhe aftësinë për të lehtë të rregulloje në çdo numër. Siç mund ta shikoni, teknikisht e saj vetëm Components layout. Yui gjithashtu siguroi HTML / CSS vendos per elementet faqe të tjera
• YAML (Yet Another Multicolumn Layout)
• Emastic

Mos harroni, duke përdorur CSS kornizave nuk do të thotë që ju jeni dembel për të krijuar një nga mesi juaj ... Kjo do të thotë që ju jeni i zgjuar për të mësuar nga të tjerët eksperiencë dhe gabimet, kurseni kohë dhe në rritjen e produktivitetit!