Uttrycka det

Re-Cykling är Buzzword och i webb utveckling betyder det inte annorlunda. Det sparar energi, i form av ansträngning!

Under år av att skriva CSS och skapa HTML från design, jag har följt några bästa praxis, i strävan efter att spara tid och energi på det vi vanligtvis benämner som "Re-uppfinna hjulet". Gång på gång har jag sagt mig själv att jag måste skapa några mallar, några standard återanvändbar CSS som jag skulle använda UR rutan i mitt framtida arbete. Även om det inte helt, men jag lyckades att uppnå vissa av målen.

För att främja, återanvändning av CSS, hade jag en titt på de få CSS ramar som finns allmänt tillgänglig för oss och beslutade att sätta dem att använda, eftersom dessa är beprövade och skapad av mycket erfarna utvecklare, än jag själv. Ännu viktigare "AVOID att uppfinna".

Även bekant för veteraner, har jag försökt att pennan vissa centrala begrepp / bästa praxis / tankar som har gått in i att skapa dessa ramar, för att göra återvinning av CSS möjligt. Hoppas att detta kommer hjälpa vissa CSS utvecklare som är på väg att och nyligen gick ombord på CSS bandwagon!

Nycklar återvinning av CSS:

Använd Namnkonventioner

Detta måste vara den viktigaste faktorn vid framställning av CSS / HTML återanvändbar. Att ge konsekventa namn sidelement gör återanvändning av sidan komponenter och deras stilar med liten eller modifieringar. I linje med detta argument även HTML5, i en stor förändring förändring över sina föregångare, är att införa vissa strukturstöd taggar dvs. <article>, <sektion>, <header>, <aside> och <nav> [ Vad kommer HTML5 ta? ]. Även med HTML 4 (eller lägre), är det bäst att nämna vanliga delar av din sida consistanly som i det enkla exemplet nedan ...

Kom ihåg att de flesta sidor på ditt projekt, sluta med samma centrala strukturella element. Identifiera de gemensamma drag som grundläggande sida ....

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

Återställ Standard Styles (CSS Återställer): Oavsett om du använder en ram eller skriv, måste du ange CSS Återställer [ Vad är CSS Återställer? ], eftersom de minskar eller ibland eliminera visuella inkonsekvenser som uppstår mellan olika webbläsare. I enkla ord CSS Reset mekanismen sätter stilar av HTML-element för att noll eller null-värden och därmed åsidosätter de värden som standardwebbläsare de kan poser. Detta ger en ren skiffer för att ställa in egenskaper för dessa element tomrum som användaren Agent Defaults [ CSS2.1 Användarstatistik Agent Style Sheet standard ]. Alla CSS ramar har av återställning mekanism. Om du skriver din egen CSS Återställer är ett varningens ord att om du råkar glömma att återställa en nyckel fastighet, kan det leda till cross-browser frågor som är mycket svåra att felsöka. Kom ihåg att hålla en kopia av reset stilar och släppa dem i varje nytt projekt som du skapar.

  kropp, div, dl, dt, dd, ul, ol, li,
  H1, H2, H3, H4, H5, H6,
  pre, form, fieldset, input, Select, textarea,
  p, blockquote, tabell: e, td
  {
    border: 0px;
    margin: 0;
    padding: 0;
  } 

Ange standardinställningar (Baseline Stilar) till Elements:

När du har ställt in (till noll eller null) standardvärden för vissa attribut av vissa HTML-element, är det nödvändigt att tillämpa vissa stilar inom alla fall av dessa element. Dessa Standardinställningen kan variera per utformning eller enligt bästa praxis du följer.

De flesta CSS ramar, alltid introducerar några nya standardvärden, förutom att återställa stilar standardwebbläsare.
Dessa standard är ogiltiga av User-Agent Defaults (skalas bort av CSS Reset), kommer dessa att vara konsekvent över webbläsare.

Kom ihåg att utgångsläget stilar används för att ställa stilar som kommer att användas design-världen. t. ex.

  html {font-size: 77%, font-family: Arial, sans-serif;}
 stark, h1, h2, h3, h4, h5, H6 {font-weight: bold;} 

Abstrakta Stilar för vanliga HTML Komponenter och gemensamma klasser:

De flesta projekt som består av flera sidor kommer att ha gemensamma HTML-element som används på hela webbplatsen, för t.ex. vissa slags former, varningar och fel, personliga popups och ljusbord etc. Eftersom dessa komponenter används igen mellan projekt, kommer det vara lämpligt att ge en uppsättning klasser som är förknippade med fördefinierade stilar för dessa komponenter och du kan spara dig mycket tid.

Bortsett från att definiera återanvändbara Stildefinitioner för de gemensamma HTML-komponenter, kan vi abstrakta stilar klasser som gäller typografi, färg eller ens layout. Jag själv brukar du använda ... vanliga klasser som Clearfix, Font08, FontGrey, alignl, DisplayB etc.

  formulärdata {border: 0px; Bakgrund: # FFFFFF; padding: 0px 10px; _padding: 0px 0px; höjd: 26px; color: # 000000; line-height: 30px; font-size: 1.1em;}
 formen TextArea {border: 0px; Bakgrund: # FFFFFF; color: # 000000; font-size: .9 EM, line-height: 1.5em; spill: synlig;}
 . Fbold {font-weight: bold; color: # CCCCCC;}
 . Fgrey {color: # 666666;}
 . Flightgrey {color: # bbbbbb;}
 . Clearfix {tydligt: ​​båda;}
 . Divider {border-top: 1px solid # 647B06, border-bottom: 1px solid # 9CC00A, höjd: 0px;}
 . Displayb {display: block;}. Displayn {display: none;}
 . Alignr {text-align: höger}. Alignc {text-align: center}
 . Floatr {float: höger;}. Floatl {float: left;} 

Fixar till vanliga webbläsare quirks

Olika webbläsare genomföra CSS-kod och ge varierande grad av stöd för CSS specifikationer. Resultatet av denna .... "Webbläsare Quirks", som vi utvecklare kvar att ta itu med. Speciellt spökar IE6 mest CSS kodare med en tid att passa. Den goda nyheten är erfarenheten har samlat möjliga återanvändbara korrigeringar i dessa frågor (ofta kallas CSS Hacks ).

Kom ihåg att hålla dessa hacka / korrigeringar hands

  / * Följande zoom: 1 regel är specifikt för IE6 + IE7.  * /
    * HTML. Clearfix,
    *. Första-barn + html clearfix {
           zoom: 1;
      } 

Håll förfina din CSS

• Vanan att återvinning inte kommer till dig i dag. Det måste utvecklas. Så planera din Re-Cykling. Ha detta i åtanke att du kan abstrakta defaults stilar, definitioner typografi, layout, HTML-format Element etc. Försök att tänka framåt.
• Också titta tillbaka på dina tidigare projekt kommer det att hjälpa till att identifiera format som du brukar använda ofta över porjects. Sammanfattning det.
• Ta bort alla oanvända produkter. Denna praxis kommer att hålla din CSS ramen från ett vanligt symptom som kallas "Uppblåsthet" -
• Ta bort repetitiva stilar.
• Bygg en uppsättning stilar som är flexibla nog att porta den över projekt.

En titt på CSS Frameworks

Äntligen. Om du är inspirerade och tänker använda ett eller flera av CSS ramar är Heres snabb lista på några populära ....

• 960 Grid System : Det 960 Grid System är ett försök att effektivisera arbetsflödet webbutveckling genom att tillhandahålla allmänt använda mått, baserat på en bredd på 960 bildpunkter. Det finns tre varianter: 12, 16 och 24 kolumner, vilka kan användas separat eller i tandem. Tanke ingenting som du inte kan skapa en för din egen lätt nog, ger en ram nätet mallar för utskrift i PDF-format, som man kan använda för att skissa din sida designs.Bet, skulle det göra ett professionellt intryck, om du har ett par ark när du går till en klient för UI krav på insamling. Det ger också grundläggande grid mallar för populära design program som Fireworks, Flash, InDesign, Illustrator, Photoshop, Visio, etc. ger en "starter för tio" för att börja din design arbete.
• Blueprint : Blueprint ger tydligt klassificeras CSS-filer för Återställer, galler, formulär, Print, typografi, insticksprogram för knappar, flikar och sprites etc. Det ger också stöd för IE som en separat innehålla.
• SenCSs : Till skillnad från ovanstående två, SenCSs (uttalas Sense), inte har CSS definitioner för layout. Den omfattar teckensnitt, stoppningar, marginaler, tabeller, listor, rubriker, blockquotes, formulär och mycket mer.
• BlueTrip : Dess ursprungliga fordran till berömmelse var att det var en kombination av de bästa funktionerna som tillhandahålls av andra andra ramverk som Blue Print, Trip oli ... från där den fått sitt namn. Dess funktioner inkluderar 24-kolumnen galler, stilar typografi, stilar Orm, Skriv ut, knappar mm
• YUI Galler : Kommit med till dig av Yahooo Developer Network stödjer flytande bredd (100%) layouter samt förinställda fast bredd layouter på 750px, 950px och 974px, och möjlighet att enkelt anpassa till valfritt nummer. Som ni kan se, den tekniskt bara layout komponenter. YUI gav också HTML / CSS satser för andra sidelement
• Yaml (Yet Another flera kolumner layout)
• Emastic

Kom ihåg att använda CSS ramar innebär inte att du är lat för att skapa en egen ... Det innebär att du är smart att lära av andra erfarenheter och misstag, spara tid och öka produktiviteten!!