Ki ga izraža

Re-Kolesarjenje je buzzword in v razvoj spletnih strani, to pomeni nič drugače. To varčuje z energijo, z vidika truda!

Več letih pisanja CSS in ustvarjanje HTML od modelov, ki sem sledil nekaj najboljših praks pri uresničevanju prihranek časa in energije, v kar smo pogosto izraz kot "Re odkrivanja tople vode". Znova in znova, sem si rekel, da moram ustvariti nekaj predlog, nekateri standardni ponovno uporabiti CSS, da bi uporabil Out of the Box v svojem nadaljnjem delu. Čeprav ne povsem, ampak nisem uspela doseči nekatere cilje.

Pri pospeševanju, Ponovna uporaba CSS, sem imel pogled na nekaj okvirov, ki so pogosto CSS nam na voljo, in odločil, da jih uporabljajo, saj so te preizkušena in ustvaril veliko izkušenih razvijalcev, ki od sebe. Še pomembneje "IZOGNITE PONOVNO Iznajdba".

Čeprav je splošno znano, da veterani, sem poskušal pero nekateri ključni koncepti / najboljših praks / misli, da je šlo v ustvarjanje teh okvirov, da RE-KOLESARJENJE CSS mogoče. Upam, da bo to pomagalo nekaj CSS razvijalcem, ki so tik pred kratkim in se vkrcali na bandwagon CSS!

Tipke Re-kolesarske CSS:

Uporaba poimenovanje konvencij

To mora biti najpomembnejši dejavnik pri tem, da CSS / HTML ponovno uporaben. Dajanje doslednih imena elementov strani omogoča ponovno uporabo strani sestavin in njihovih stilov z malo ali sprememb. V skladu s tem argumentom tudi HTML5, na velike spremembe sprememb preko svojih predhodnikov, je uvesti nekatere strukturne viz oznak. <article>, <section>, <header>, <aside> in <nav> [ Kaj bo prinesla HTML5? ]. Tudi z HTML 4 (ali manj), je najbolje, če jih naštejemo standardne dele vaše strani consistanly kot v spodnjem primeru preprosto ...

Ne pozabite, da večina strani na svoj projekt, na koncu ima enake temeljne strukturne elemente. Prepoznavanje teh skupnih elementov strani temeljne ....

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

Ponastavi privzete sloge (CSS Ponastavi): Ali uporabljate okvir ali pisati svoje, morate zagotoviti Resetira CSS [ Kaj so Ponastavi CSS? ], kot so zmanjšanje ali odpravo včasih vizualne nedoslednosti, ki se pojavljajo med različnimi brskalniki. V preprostih besedah ​​Reset CSS mehanizem določa sloge HTML element z nič ali null vrednosti, kar zabrisala vse privzete vrednosti brskalnika, ki jih lahko predstavlja. To zagotavlja čisto skrilavca, da nastavite lastnosti te praznine elementov vseh User-Agent kršitev, [ CSS2.1 uporabnika Agent Defaults slogi ]. Vse CSS okviri pa so od ponovne mehanizma. Če pišete ste lastnik Resetira CSS, beseda previdnosti je, da če se zgodi, da pozabite ponastaviti ključno lastnost, bi to lahko pripeljalo do vprašanj, navzkrižno brskalnika in ki so zelo težko debug. Ne pozabite, hranite kopijo obnovljena stilov in spustite jih v vsakem novem projektu, ki ga ustvarite.

  Telo, div, dl, dt, dd, ul, ol, li,
  H1, H2, H3, H4, H5, H6,
  vnaprej, oblika, fieldset, vložek, izberite, textarea,
  p, blockquote, miza, th, td
  {
    meja: 0px;
    margin: 0;
    padding: 0;
  } 

Set Defaults (osnovna stili) na postavke:

Ko ste nastavili (nič ali null) privzete vrednosti nekaterih lastnosti nekaterih elementov HTML, je treba uporabiti nekatere sloge po vsej vsakem primeru teh elementov. To privzeta nastavitev lahko razlikujejo, kot na oblikovanje ali glede najboljše prakse, ki jih spremljate.

Večina okvirov CSS, vedno uvaja nekatere nove privzete nastavitve, poleg ponastavitvi privzetih slogov brskalnika.
Te privzete da praznine od User-Agent kršitev, (otrese jih Reset CSS), bo to veljalo tudi brskalnikov.

Ne pozabite, da se Osnovni stili uporabljajo za določitev slogov, ki jih bodo uporabljeni oblikovanje svetu. npr.

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

Povzetek Slogi za skupne HTML Komponente in običajne vrste:

Večina projekt sestavljen iz več strani bo imel skupne elemente HTML, ki se uporabljajo po vsem mestu, na primer neke vrste obrazcev, opozorila in napake, ki meri ljudstvo, ki LightBoxes itd Ker so te komponente uporabljajo znova čez projektov, bi bilo koristno za zagotovitev nabor razredov, povezanih z vnaprej določenih slogov za te komponente in jih lahko shranite si veliko časa.

Poleg opredelitev pojmov ponovno uporabo slogov za skupne HTML komponent, bi lahko abstraktni razredi stili, ki se nanašajo tipografije, barve ali celo postavitev. Sam sem pogosto uporabljate ... skupne razrede, kot so Clearfix in Font08 in FontGrey in AlignL in DisplayB itd

  Obrazec za vnos {border: 0px; background: # FFFFFF; padding: 0px 10px; _padding: 0px 0px; višina: 26px; color: # 000000; line-višina: 30px; font-size: 1.1em;}
 Obrazec textarea {border: 0px; background: # FFFFFF; color: # 000000; font-size: .9 em, line-višina: 1.5em; overflow: vidna;}
 . Fbold {font-weight: bold; color: # CCCCCC;}
 . Fgrey {color: # 666666;}
 . Flightgrey {color: # bbbbbb;}
 . Clearfix {jasen: oboje;}
 . Delilnik {meji-top: 1px solid # 647B06; meja bottom: 1px solid # 9CC00A, višina: 0px;}
 . Displayb {zaslon: blok;}. Displayn {display: none;}
 . Alignr {text-align: right}. Alignc {text-align: center}
 . Floatr {float: right;}. Floatl {float: left;} 

Popravki na skupnih quirks brskalnika

Različni brskalniki izvajati CSS kodo in zagotavljajo različno stopnjo podpore specifikacije CSS. Rezultat tega .... "Brskalnika quirks", da smo pustili razvijalci za reševanje. Še posebej, IE6 preganja najbolj CSS kodirniki z rokom za izpolnitev. Dobra novica je, izkušnje so skupaj prinesla morebitne popravke ponovno uporabo teh vprašanj (pogosto označilo kot Hacks CSS ).

Ne pozabite, Naj ti hacks / določa priročna

  / * Naslednje zoom: 1 pravilo je, posebej za IE6 ± IE7.  * /
    * Html. Clearfix,
    *:. Prvi otrok + html clearfix {
           zoom: 1;
      } 

Naj Izboljšanje Vaš CSS

• Navada ponovno kolesarjenja ne bo prišel k vam v dan. Treba je razviti. Tako načrtujejo obnovitev Kolesarjenje. Imejte to v mislih, da bi lahko abstraktne privzeto stili, tipografija definicije, postavitve HTML slogi Element itd Poskusite razmišljati naprej.
• Tudi pogled nazaj na svoje pretekle projekte, bo pomagala določiti sloge, ki ste nagnjeni k pogosto uporabljajo čez porjects. Povzetek tega.
• Odstranite vse neuporabljene sloge. Ta praksa bo vaš CSS okvir iz pogost simptom, imenovano "napenjanje" -
• Odstrani ponavljajoče sloge.
• Zgradite nabor stilov, ki so dovolj prožen, da ga čez pristanišče projektov.

Poglej Na okvirov CSS

Končno. Če ste navdih in nameravajo uporabiti enega ali več okvirov CSS, vsepovsod je hiter seznam nekaj pogosti pa ....

• 960 Grid sistem : 960 Grid sistem je prizadevanje za racionalizacijo poteka dela spletnega razvoja z zagotavljanjem običajne dimenzije, ki temelji na široki 960 slikovnih pik. Obstajajo tri različice: 12, 16 in 24 stolpcev, ki se lahko uporabljajo ločeno ali skupaj. Misel, da nič ne morete ustvariti eno za svoje enostavno dovolj, okvir zagotavlja mrežne predloge za tisk v formatu PDF, ki lahko uporabimo za skico vaše strani designs.Bet, bi bilo strokovno vtis, če nosite nekaj listov ko greš do neke osebe za UI zbiranje zahtev. Prav tako zagotavlja osnovne predloge na omrežje za popularno programsko opremo, kot so načrtovanje Fireworks, Flash, InDesign, Illustrator, Photoshop, Visio, itd zagotavlja starter "za deset" za začetek vašega načrtovanja dela.
• Blueprint : Blueprint zagotavlja izrazito razvrščene datoteke CSS za ponastavi, mreže, obrazce, tiskanje, tipografija, vtičnice za gumbov, zavihke in sprites itd Prav tako zagotavlja podporo za IE kot ločen vključujejo.
• SenCSs : za razliko od zgoraj dveh, SenCSs (izgovori Sense), nima CSS definicije za postavitev. To pa so pisave, paddings, robove, tabele, sezname, glave, ki blockquotes, obrazce in še več.
• BlueTrip : Njen prvotni do slave je bila, da je bilo kombinacija najboljših lastnosti, ki jih drugih okvirih, kot so Blue drugimi tisk, Trip Oli ..., od koder je dobil svoje ime. Njen nabor funkcij vključuje 24-stolpec omrežje, tipografija stilov, ki ORM stilov, tiskanje gumbi itd
• YUI GRID : Stran je bila prikazana v okviru mreže za razvijalce Yahooo, podpira tekočine širino (100%) postavitev, kot tudi vnaprej fiksno širino postavitve na 750px in 950px ter 974px in sposobnost, da lahko prilagodite za poljubno število. Kot lahko vidite, njegovi tehnično le za postavitev komponent. YUI tudi HTML / CSS sklopov za druge elemente strani
• YAML (Še ena Multicolumn Postavitev)
• Emastic

Ne pozabite, z uporabo CSS okvirov ne pomeni, da ste leni, da ustvarite eno svojo ... To pomeni, da ste pametni, da se učijo iz izkušenj drugih in napak, prihranila čas in povečala PRODUKTIVNOSTI!!