Te drukken

Re-Cycling is Buzzword en in web ontwikkeling betekent het niet anders. Het bespaart energie, in termen van inspanning!

Meer dan jaar van het schrijven van CSS en het maken van HTML van de ontwerpen, heb ik volgde enkele best practices, in de uitoefening van besparen tijd en energie in wat we over het algemeen begrip als "opnieuw uitvinden van het wiel". Keer op keer heb ik tegen mezelf, dat ik een paar sjablonen maken, een aantal standaard herbruikbare CSS dat ik gebruik uit de doos in mijn toekomstige werk. Hoewel niet volledig, maar ik slaagde erin om een ​​aantal doelen te bereiken.

In het bevorderen van, Re-Gebruik van CSS, had ik een blik op de weinige CSS kaders die zijn algemeen beschikbaar voor ons en besloten om ze te gebruiken, omdat deze werden uitgeprobeerd en getest en gemaakt door veel ervaren ontwikkelaars, dan ikzelf. Nog belangrijker is "AVOID opnieuw aan het uitvinden".

Hoewel algemeen bekend om veteranen, heb ik geprobeerd om pen een aantal belangrijke concepten / best-practices / gedachten die is besteed aan het creëren van deze kaders, om RE-CYCLING van CSS mogelijk. Ik hoop dat dit zal enige CSS ontwikkelaars die op het punt om en onlangs aan boord van de CSS-bandwagon te helpen!

Keys Re-cycling van CSS:

Gebruik Naamgevingsconventies

Dit is toch wel de belangrijkste factor in het maken van de CSS / HTML herbruikbaar. Het geven van consistente namen aan pagina-elementen maakt het hergebruik van pagina componenten en hun stijl met weinig of wijzigingen. In lijn met dit argument, zelfs HTML5, in een grote verandering verandering ten opzichte van zijn voorgangers, is het introduceren van een aantal structurele codes te weten. <article>, <section>, <header>, <aside> en <nav> [ Wat zal HTML5 brengen? ]. Zelfs met HTML 4 (of lager), is het het beste de standaard onderdelen van uw pagina te noemen consistanly zoals in het eenvoudige voorbeeld hieronder ...

Vergeet niet, de meeste pagina's op uw project, uiteindelijk met dezelfde kern structurele elementen. Identificeer deze gemeenschappelijke kern pagina-elementen ....

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

Reset Default Styles (CSS Reset): Of u nu gebruik maken van een kader of schrijf uw eigen, u moet CSS Reset [ Wat zijn CSS Resets? ], omdat ze te verminderen of soms voorkomen visuele inconsistenties die zich voordoen tussen de verschillende browsers. In eenvoudige woorden de CSS Reset mechanisme stelt de stijlen van de HTML-element aan nul of null-waarden, waardoor dwingende elke browser standaard waarden die ze kunnen poses. Dit zorgt voor een schone lei aan de eigenschappen van deze elementen leegte van een User-Agent Standaardwaarden [set CSS2.1 User Agent Style Sheet Defaults ]. Alle CSS-frameworks hoeft van de reset-mechanisme. Als u het schrijven van je eigen CSS Resets, een woord van voorzichtigheid is dat als je toevallig vergeten om een ​​belangrijke eigenschap opnieuw in te stellen, Het kan leiden tot cross-browser problemen, die heel moeilijk te debuggen. Vergeet niet, Bewaar een kopie van de reset-stijlen en laat ze in elk nieuw project die u maakt.

  lichaam, div, dl, dt, dd, ul, ol, li, H1, H2, H3, H4, H5, H6, pre, vorm, fieldset, input, select, textarea, p, blockquote, tafel, th, td { border: 0px; margin: 0; padding: 0;} 

Set Defaults (Baseline Styles) naar elementen:

Nadat u hebt ingesteld (op nul of null) de standaard waarden van bepaalde attributen van bepaalde HTML-elementen, Het is noodzakelijk om een ​​aantal stijlen in ieder geval van deze elementen toe te passen. Deze standaard instelling kan variëren volgens het ontwerp of volgens de best practices die je volgt.

De meeste CSS-frameworks, altijd introduceert een aantal nieuwe in gebreke blijft, in aanvulling op het resetten van standaard browser stijlen.
Deze standaardwaarden zijn leegte van de User-Agent Defaults (weg ontdaan door de CSS Reset), zullen deze in overeenstemming te zijn in verschillende browsers.

Vergeet niet dat Baseline stijlen gebruikt om stijlen die gaan het ontwerp-breed worden gebruikt in te stellen. bijvoorbeeld.

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

Abstract Styles voor het gemeenschappelijk HTML-componenten en de laagste klassen:

De meeste project dat bestaat uit meerdere pagina's zullen gemeenschappelijke HTML-elementen die gebruikt worden in de site, voor bijv. Een soort van vormen, waarschuwingen en fouten, Custom Popups, Lichtbakken enz. moeten Aangezien dergelijke componenten worden gebruikt keer op keer over projecten, zal het nuttig zijn om een ​​te bieden set van klassen in verband met vooraf gedefinieerde stijlen voor deze onderdelen en je kunt bespaart jezelf een hoop tijd.

Naast het definiëren van herbruikbare stijlen definities voor de gewone HTML-onderdelen, kunnen we abstracte stijlen klassen met betrekking tot typografie, kleur en zelfs lay-out. Ik heb zelf de neiging u gebruik maken van ... gemeenschappelijke klassen zoals Clearfix, Font08, FontGrey, AlignL, DisplayB etc.

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

Fixes voor gemeenschappelijke browser quirks

Verschillende browsers implementeren CSS-code en met uiteenlopende mate van ondersteuning voor de CSS-specificaties. Het resultaat van deze .... "Browser Quirks", dat we de ontwikkelaars worden overgelaten aan te pakken. Vooral IE6 achtervolgt de meeste CSS-coders met een deadline halen. Het goede nieuws is ervaring heeft samen mogelijk HERBRUIKBARE fixes gebracht om deze problemen (vaak aangeduid als CSS Hacks ).

Vergeet niet, Houd deze hacks / fixes handig

  / * De volgende zoom: een regel is specifiek voor IE6 + IE7.  * /
    * Html. Clearfix,
    *:. First-child + html Clearfix {
           zoom: 1;
      } 

Houd het verfijnen van uw CSS

• De gewoonte van re-cycling zal niet tot u komen in de dag. Het te ontwikkelen. Dus plan je Re-Fietsen. Houd dit in gedachten dat je zou kunnen abstracte standaard stijlen, typografie definities, indelingen, HTML Element Styles etc. Probeer vooruit te denken.
• Ook terug te kijken op uw projecten uit het verleden, zal het helpen bij het identificeren stijlen die je de neiging om vaak te gebruiken in porjects. Abstract het.
• Verwijder alle ongebruikte stijlen. Deze praktijk zorgt ervoor dat je CSS kader van een veel voorkomend symptoom genaamd "opgeblazen gevoel" -
• Verwijder repeterende stijlen.
• Bouw een set van stijlen die flexibel genoeg zijn om het over te zetten in projecten.

Een blik op CSS Frameworks

Eindelijk. Als u geïnspireerd en zijn van plan een of meer van de CSS kaders te gebruiken, Heres is snel lijst van een paar populaire ....

• 960 Grid System : De 960 Grid System is een poging om web development workflow te stroomlijnen door middel van algemeen gebruikte dimensies, op basis van een breedte van 960 pixels. Er zijn drie varianten: 12, 16 en 24 kolommen die afzonderlijk of samen worden toegepast. Gedachte niets dat je niet kunt een voor uw eigen te maken gemakkelijk genoeg, Het kader rooster sjablonen voor print in PDF-formaat, dat je kunt gebruiken om uw pagina designs.Bet schetsen biedt, zou het een professionele indruk, als je een paar vellen bij het uitvoeren ga je naar een client voor UI eisen verzamelen. Het biedt ook basisraster templates voor populaire design software zoals Fireworks, Flash, InDesign, Illustrator, Photoshop, Visio, etc. die een "starter voor tien" om uw ontwerpen te beginnen.
• Blueprint : Blueprint biedt duidelijk geclassificeerd CSS-bestanden voor de Reset, grids, formulieren, Print, Typografie, Plugins voor knoppen, tabbladen en sprites enz. Het biedt ook ondersteuning voor IE als een apart op te nemen.
• SenCSs : In tegenstelling tot de twee bovengenoemde, SenCSs (spreek uit Sense), geen CSS-definities voor lay-out. Het doet onder andere lettertypen, vullingen, marges, tabellen, lijsten, headers, blockquotes, formulieren en nog veel meer.
• BlueTrip : De oorspronkelijke claim to fame was dat, het was een combinatie van de beste functies van andere andere frameworks zoals Blauwdruk, Trip oli ... van waar het dankt zijn naam. Het pakket bevat 24-kolom raster, typografie stijlen, ORM stijlen, print, knoppen etc.
• YUI Grids : Gebracht aan u door de Yahooo Developer Network, ondersteunt vloeistof-width (100%) lay-outs en vooraf ingestelde vaste breedte lay-outs op 750px, 950px en 974px, en de mogelijkheid om eenvoudig aan te passen aan een willekeurig aantal. Zoals u kunt zien, zijn technisch gewoon de lay-out onderdelen. YUI ook HTML / CSS bedoelde set andere pagina-elementen
• YAML (Yet Another Multicolumn lay-out)
• Emastic

Vergeet niet, met behulp van CSS kaders betekent niet dat je lui bent om een ​​van je eigen te maken ... Het houdt in dat je slim bent om te leren van anderen ervaren en fouten, SAVE en verhogen de productiviteit!!