Ilmaista sitä

Kierrätyksestä on Buzzword ja web-kehitys se tarkoittaa eroa. Se säästää energiaa, suhteen vaivaa!

Yli vuoden kirjoittamisen CSS ja luoda HTML-malleja, olen seurannut joitakin parhaita käytäntöjä, harjoittamisesta säästää aikaa ja energiaa, mitä me yleensä termiä "uudelleen keksimisestä Wheel". Kerta toisensa jälkeen olen kertonut itselleni, että minun on luotava muutamia malleja, jotkut vakio uudelleenkäyttävissä CSS olisin hyödyn irti BOX minun tulevassa työssään. Vaikka ei täysin, mutta en onnistunut saavuttaa joitakin tavoitteita.

Vuonna edistää, uudelleenkäyttö CSS, minulla oli tarkastella muutamia CSS puitteet, jotka ovat yleisesti saatavilla meille ja päätti laittaa ne käyttöön, koska ne ovat testattu ja luotu paljon kokeneita kehittäjiä, kuin itseäni. Vielä tärkeämpää "Vältä uudelleen keksimisestä".

Vaikka yleisesti tiedossa veteraaneille, olen yrittänyt kynä joitakin keskeisiä käsitteitä / parhaita käytäntöjä / ajatuksia menneen luomaan näissä puitteissa, jotta kierrätystä CSS mahdollista. Toivottavasti tämä auttaa joitakin CSS kehittäjille, jotka ovat juuri tulossa, ja viime aikoina nousseet CSS bandwagon!

Avaimet kierrätystä CSS:

Käytä nimeämistavat

Tämä on tärkein tekijä, mikä CSS / HTML uudelleen käytettävissä. Antaminen johdonmukaisia ​​nimiä sivulle osia mahdollistaa uudelleenkäytön sivun osien ja niiden tyyliä vähän tai muutoksin. Tämän mukaisesti väitteen, vaikka HTML5, suuria muutoksia muuttuvat ajan edeltäjänsä, on esitellä joitakin rakenteellisia tunnisteet eli. <article>, <section>, <header>, <aside> ja <nav> [ Mitä HTML5 tuo? ]. Vaikka HTML 4 (tai alempi), on parasta nimetä vakio osia sivusi consistanly kuten yksinkertainen esimerkki alla ...

Muista, että useimmat sivuihin projektin loppuun asti ottaa sama ydin rakenneosat. Tunnista nämä yhteiset keskeiset sivuelementti ....

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

Pal Tyylit (CSS Nollaa): Käytitpä kehyksen tai kirjoita, sinun on annettava CSS Nollaa [ Mitkä ovat CSS Nollaa? ], koska ne vähentävät tai joskus poistaa visuaalisia epäjohdonmukaisuuksia, joita esiintyy eri selaimissa. Yksinkertaisesti sanoen CSS palautusmekanismi asettaa tyylejä HTML Element nolla tai nolla-arvoja, mikä ohittaa minkä tahansa selaimen oletusarvoja ne saattavat aiheuttaa. Tämä tarjoaa puhtaalta pöydältä asettaa kyseisten alkuaineiden ominaisuuksista vailla mitään User-Agent oletukset [ CSS2.1 User Agent Style Sheet Defaults ]. Kaikki CSS puitteissa ei ole tehty palautusmekanismi. Jos kirjoitat omistat CSS Nollaa, varoituksen sana on, että jos unohdat palauttaa avaimen omaisuutta, se voisi johtaa rajat selaimet, jotka on hyvin vaikea debugata. Muista, Säilytä kopio reset tyylejä ja pudottaa ne jokaisen uuden projektin luot.

  runko, div, dl, dt, dd, ul, ol, li-
  H1, H2, H3, H4, H5, H6,
  pre-lomake, fieldset, input, select, textarea,
  p, blockquote, table, th, td
  {
    raja: 0px;
    margin: 0;
    padding: 0;
  } 

Valitse oletusasetukset (Baseline Tyylit) ja Elements:

Kun olet asettanut (nolla tai nolla) oletusarvoja tiettyjä ominaisuuksia tiettyjen HTML Elements, on välttämätöntä soveltaa joitakin tyylejä eri joka kerta nämä elementit. Nämä Oletusasetus saattaa vaihdella kohti suunnittelun mukaan tai parhaita käytäntöjä, joita seuraat.

Useimmat CSS puitteet, aina esittelee uusia oletusarvot lisäksi nollaamalla oletusselain tyylejä.
Nämä oletukset ovat vailla User-Agent Defaults (riisuttu pois CSS Reset), nämä ovat johdonmukaisia ​​eri selaimissa.

Muista, Baseline tyylejä käytetään määrittää tyylit, jotka aikovat käyttää suunnittelussa laajuisesti. esim..

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

Tiivistelmä Styles yhteisiksi HTML komponentit ja yhteinen luokat:

Suurin hanke koostuu useista sivuja on yhteiset HTML osia käytetään koko sivustossa, esim. Jonkinlainen lomakkeita, ilmoituksia ja virheitä, Custom Popups, valopöytien jne. Koska tällaisia ​​osia käytetään uudelleen eri hankkeiden, olisi hyvä antaa asettaa luokkien liittyvät valmiista tyyleistä näiden komponenttien ja voit säästää paljon aikaa.

Lisäksi määritellä uudelleen tyylimääritykset yhteisen HTML komponentit, voisimme abstrakti tyylejä luokat liittyvät typografia, väri tai jopa asettelua. Itselläni on tapana käytät ... yhteisiä luokkia kuten Clearfix, Font08, FontGrey, AlignL, DisplayB jne.

  lomake input {border: 0px; background: # ffffff; padding: 0px 10px; _padding: 0px 0px; height: 26px; color: # 000000; line-height: 30px, font-size: 1.1em;}
 lomake textarea {border: 0px; background: # ffffff; color: # 000000; font-size: 0.9 EM; line-height: 1.5em, overflow: visible;}
 . Fbold {font-weight: bold; color: # cccccc;}
 . Fgrey {color: # 666666;}
 . Flightgrey {color: # bbbbbb;}
 . Clearfix {selvä: molemmat;}
 . Jakaja {border-top: 1px solid # 647B06, border-bottom: 1px solid # 9CC00A, korkeus: 0px;}
 . Displayb {display: block;}. Displayn {display: none;}
 . Alignr {text-align: right}. Alignc {text-align: center}
 . Floatr {float: right;}. Floatl {float: left;} 

Korjauksia yhteiset selaimen quirks

Eri selaimet toteuttavat CSS ja tarjoavat vaihtelevia tukitaso CSS vaatimukset. Tuloksena .... "Selaimen koukero", että me kehittäjät jäävät puuttumaan. Varsinkin IE6 kummittelee eniten CSS kooderit joiden määräaika tavata. Hyvä uutinen on, kokemus on tuonut yhteen mahdollisia uudelleenkäytettäviä korjaa näitä asioita (usein ilmaisua kuin CSS Hacks ).

Muista, Pidä nämä hacks / korjaukset kätevä

  / * Seuraavat zoom: 1 sääntö on nimenomaan IE6 + IE7.  * /
    * Html. Clearfix,
    *: First-child + html. Clearfix {
           zoom: 1;
      } 

Pidä Haun CSS

• Tapana kierrätystä ei tule sinulle päivässä. On kehitetty. Joten suunnittele kierrätystä. Pitäkää tämä mielessä, että voisit abstrakti defaults tyylit, typografia määritelmiä, ulkoasuja, HTML Element Styles tms. Yritä ajatella eteenpäin.
• Myös muistella mennyttä hankkeita, se auttaa tunnistamaan tyylit taipumus käyttää usein eri porjects. Abstract sitä.
• Poista kaikki käyttämättömät tyylit. Tämä käytäntö pitää CSS puitteet kuin yleinen oire nimeltä "Turvotus" -
• Poista toistuvia tyylejä.
• Rakenna joukko tyylejä, jotka ovat riittävän joustavia sovittaakseen sen eri hankkeisiin.

CSS Frameworks

Lopuksi. Jos olet inspiroi ja aikovat käyttää yhtä tai useampaa CSS kehysten, Tässäpä on nopea luettelo muutamia suosittuja niistä ....

• 960 Grid System : 960 Grid System on pyrkimys tehostaa web-kehitystä työnkulkua tarjoamalla yleisesti käytettyjä mittoja, jotka perustuvat leveys 960 pikseliä. On olemassa kolme vaihtoehtoa: 12, 16 ja 24 saraketta, joita voidaan käyttää erikseen tai yhdessä. Ajatus mitään, et voi luoda oman helposti tarpeeksi, kehys tarjoaa verkko malleja tulostaa PDF-muodossa, jotka voidaan käyttää hahmotella sivun designs.Bet, se tekisi ammattimaisen vaikutelman, jos teillä muutama arkki kun menet asiakkaalle UI vaatimusten keräämiseen. Se tarjoaa myös perustiedot verkkoon malleja suosittuja suunnittelun ohjelmistot, kuten ilotulitus, Flash, InDesign, Illustrator, Photoshop, Visio jne. tarjoavat "starter kymmenen" aloittaa oman suunnittelutyöhön.
• Blueprint : Blueprint antaa olennaisesti luokiteltu CSS tiedostot Palauttaa, Ristikot, lomakkeet, Print, typografia, Plugins ja napit, välilehdet ja sprites jne. Se tukee myös IE erillisenä kuuluu.
• SenCSs : Toisin kuin edellä mainitut kaksi, SenCSs (lausutaan Sense), ei CSS määritelmät Layout. Se sisältää fontteja, pehmusteita, marginaalit, taulukot, luettelot, otsikot, blockquotes, lomakkeita ja muuta.
• BlueTrip : Sen alkuperäinen väittävät fame oli, se oli yhdistelmä parhaita ominaisuuksia jota muilla muut puitteet kuten Blue Print-Trip OLI ... mistä se saa nimensä. Sen ominaisuuksia ovat 24-sarake grid, typografia tyylejä, ORM tyylejä, tulostaa, painikkeet jne.
• YUI Ristikot : Tuonut sinulle Yahooo Developer Network tukee neste-width (100%) kaavoista sekä esiasetettu tasalevyisellä asettelujen at 750px, 950px ja 974px, sekä kyky helposti räätälöidä mihin tahansa numeroon. Kuten huomaatte, teknisesti aivan layout komponentit. YUI myös HTML / CSS sarjat muiden elementtien
• YAML (Yet Another multicolumn asettelu)
• Emastic

Muista, CSS kehyksiä ei tarkoita että olet laiska luoda oman ... Se tarkoittaa, että olet fiksu oppia muiden kokemuksista ja virheistä, säästää aikaa ja lisätä tuottavuutta!!