Re-Cycling ist Buzzword und bei der Webentwicklung bedeutet es nicht anders. Es spart Energie, in Bezug auf Aufwand!
Über Jahre hinweg zu schreiben und Erstellen von HTML-CSS-Designs aus, ich habe ein paar Best Practices gefolgt, in der Verfolgung das spart Zeit und Energie in das, was wir gemeinhin als Begriff "Re-Erfindung des Rades". Immer wieder habe ich mir gesagt, dass ich ein paar Vorlagen zu erstellen, einige Standard-Mehrweg-CSS, die ich benutzen würde OUT OF THE BOX in meine zukünftige Arbeit. Obwohl nicht vollständig, aber ich habe es geschafft, einige Ziele zu erreichen.
Bei der Förderung, Re-Use von CSS, hatte ich einen Blick auf die wenigen CSS-Frameworks, die üblicherweise zur Verfügung zu stellen sind und beschlossen, sie zu benutzen, da diese erprobt und getestet und erstellt von erfahrenen Entwicklern viel, als ich. Noch wichtiger ist "vermeiden eine erneute Erfinden".
Obwohl allgemein bekannt, Veteranen, habe ich versucht zu Stift einige Schlüsselbegriffe / Best-Practices / Gedanken, die in die Schaffung dieser Rahmenbedingungen, um RE-cycling von CSS möglich gewesen ist. Hoffen, dass dies einige CSS-Entwickler, die gerade dabei sind und vor kurzem an Bord der CSS-Zug aufgesprungen zu helfen!
Keys Re-cycling von CSS:
Verwenden Sie Namenskonventionen
Dies hat zu der wichtigste Faktor bei der Herstellung der CSS / HTML wiederverwendbar sein. Giving konsistente Namen zu Seite Elemente ermöglicht die Wiederverwendung von Komponenten und deren Seite Stile mit wenig oder Modifikationen. Im Einklang mit diesem Argument, auch HTML5, zu einem grundlegenden Wandel Veränderung gegenüber seinen Vorgängern, ist es, einige strukturelle Tags nämlich einzuführen. <article>, <section>, <header>, <aside> und <nav> [ Was wird HTML5 zu bringen? ]. Selbst mit HTML 4 (oder niedriger), ist es am besten Standard Bereichen Ihrer Seite consistanly wie in der einfachen Beispiel unten zu nennen ...
Denken Sie daran, die meisten Seiten auf Ihr Projekt, am Ende mit den gleichen Kern Strukturelemente. Identifizieren Sie diese gemeinsamen Kern Seitenelemente ....
<div id="container">
<div id="header"> ... </ div>
<div id="nav"> ... </ div>
<div id="sidebar"> ... </ div>
<div id="footer"> ... </ div>
</ Div> Reset Default Styles (CSS Resets): Ob Sie einen Rahmen oder benutzen Sie schreib, müssen Sie CSS-Resets bieten [ Was sind CSS-Resets? ], da sie manchmal zu beseitigen oder zu reduzieren visuelle Unstimmigkeiten, die zwischen verschiedenen Browsern auftreten. In einfachen Worten die CSS-Reset-Mechanismus setzt die Stile der HTML-Element auf Null oder NULL-Werte und somit Vorrang vor allen Browser-Standardwerte können sie stellt. Dies bietet eine tabula rasa, um die Eigenschaften dieser Elemente ohne irgendwelche User-Agent-Defaults [gesetzt CSS2.1 User Agent Style Sheet Defaults ]. Alle CSS-Frameworks kann der Reset-Mechanismus haben. Wenn Sie mit dem Schreiben Sie eigene CSS-Resets werden, ist ein Wort der Vorsicht, dass, wenn Sie vergessen, eine wichtige Eigenschaft zurückgesetzt passieren, könnte es zu Cross-Browser-Probleme, die sehr schwer zu debuggen sind zu führen. Denken Sie daran, Behalten Sie eine Kopie der Reset-Stile und Drop in jedes neue Projekt, das Sie erstellen.
Körper, div, dl, dt, dd, ul, ol, li,
H1, H2, H3, H4, H5, H6,
vor, Form, fieldset, Input die Option, textarea,
p, blockquote, Tisch, th, td
{
border: 0px;
margin: 0;
padding: 0;
} Set Defaults (Baseline Styles), um Elemente:
Nachdem Sie (auf Null oder null) haben die Standardwerte bestimmter persönlicher Eigenschaften bestimmter HTML-Elemente, ist es notwendig, einige Stile in jedem Fall dieser Elemente gelten. Diese Voreinstellung kann nach der Gestaltung variieren oder nach die besten Praktiken, die Sie verfolgen.
Die meisten CSS-Frameworks, immer einige neue Vorgaben, zusätzlich zu Zurücksetzen Standard-Browser Stile.
Diese Standardwerte Unwirksamkeit der User-Agent-Defaults (weg von der CSS-Reset-gestrippt), werden diese im Einklang mit allen Browsern.
Erinnern Sie sich, Baseline Styles verwendet werden, um Stile, die gehen Design-weite verwendet werden soll. zB.
html {font-size: 77%; font-family: Arial, sans-serif;}
starke, H1, H2, H3, H4, H5, H6 {font-weight: bold;} Abstract Styles für Common HTML-Komponenten und gemeinsame Klassen:
Die meisten Vorhaben, die aus mehreren Seiten wird häufig HTML-Elemente auf der Website verwendet, zB für irgendeine Art von Formen, Warnungen und Fehlern, Custom Popups, Leuchtkästen etc. haben seit über solche Komponenten sind wieder über Projekte verwendet, wird es nützlich sein, die Bereitstellung eines Satz von Klassen mit vordefinierten Stilen für diese Komponenten verbunden und Sie ersparen sich eine Menge Zeit.
Abgesehen von der Definition wiederverwendbare Stile Definitionen für die gängigen HTML-Komponenten, konnten wir abstrakten Stilen Klassen in Bezug auf Typografie, Farbe oder sogar Layout. Ich selbst neigen Sie ... gemeinsame Klassen wie Clearfix, Font08, FontGrey, AlignL, DisplayB usw.
Form input {border: 0px; background: # FFFFFF; padding: 0px 10px; _padding: 0px 0px; height: 26px; color: # 000000; line-height: 30px; font-size: 1.1em;}
Form 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 {clear: both;}
. Teiler {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, um gemeinsame Browser Tücken
Verschiedene Browser CSS-Code zu implementieren und bieten unterschiedliche Niveau der Unterstützung für die CSS-Spezifikationen. Dies hat zur Folge .... "Browser-Quirks", dass wir den Entwicklern überlassen werden, um anzupacken. Insbesondere verfolgt die meisten IE6 CSS-Programmierer mit einer Frist zu erfüllen. Die gute Nachricht ist die Erfahrung hat gemeinsam möglich WIEDERVERWENDBAR Fixes für diese Probleme (oft als sogenannte gebracht CSS-Hacks ).
Denken Sie daran, halten Sie diese Hacks / Fixes handlich
/ * Die folgende zoom: 1 Regel ist speziell für den IE6 + IE7. * /
* Html. Clearfix,
*:. First-child + html clearfix {
zoom: 1;
} Halten Verfeinern der CSS
- Die Gewohnheit, Recycling-nicht zu euch kommen in Tag. Es muss entwickelt. So planen Sie Ihren Re-Cycling. Achten Sie hierauf, dass man abstrakte Vorgaben Stile, Typografie Definitionen, Layouts, HTML-Element Styles etc. Versuchen Sie, vorausschauend zu denken.
- Auch blicken zurück auf Ihre früheren Projekten, wird es dazu beitragen, Stile, die Sie verwenden oft über porjects neigen. Kurzfassung es.
- Entfernen Sie alle unbenutzten Stile. Diese Praxis wird Ihre CSS-Framework von einem gemeinsamen Symptom als "Aufblähung" zu halten -
- Nehmen Sie sich wiederholende Stile.
- Bauen Sie eine Reihe von Stilen, die flexibel genug, um es über die Projekte hinweg zu portieren sind.
Ein Blick auf CSS-Frameworks
Endlich. Wenn Sie inspiriert sind und beabsichtigen, eine oder mehrere der CSS-Frameworks verwenden, ist Heres kurze Liste von einigen wenigen populären ....
- 960 Grid System : Das 960 Grid System ist ein Versuch, Web-Entwicklung Workflow, indem sie häufig verwendete Dimensionen, basierend auf einer Breite von 960 Pixel zu optimieren. Es gibt drei Varianten: 12, 16 und 24 Säulen, die getrennt oder gemeinsam genutzt werden können. Dachte sich nichts, dass man nicht schaffen ein für Ihre eigenen leicht genug, Der Rahmen Raster-Vorlagen für den Druck im PDF-Format, dass man benutzen, um Ihre Seite designs.Bet skizzieren können bietet, wäre es einen professionellen Eindruck, wenn man ein paar Blätter tragen, wenn Sie gehen an einen Client für UI-Anforderungen sammeln. Es bietet auch Grundraster Vorlagen für beliebte Design-Software wie Fireworks, Flash, InDesign, Illustrator, Photoshop, Visio, etc. Bereitstellung eines "Starter for Ten" zu Ihrem Design Arbeit zu beginnen.
- Blueprint : Blueprint bietet deutlich klassifiziert CSS-Dateien für Resets, Grids, Formulare, Druck, Typografie, Plugins für Schaltflächen, Registerkarten und Sprites etc. Es bietet auch Unterstützung für IE als separates gehören.
- SenCSs : Im Gegensatz zu den beiden obengenannten SenCSs (sprich: Sense), verfügt nicht über CSS-Definitionen für das Layout. Die Informationen enthalten Schriftarten, Polsterungen, Ränder, Tabellen, Listen, Überschriften, blockquotes, Formulare und vieles mehr.
- BlueTrip : Seine ursprüngliche Anspruch auf Ruhm war, dass es eine Kombination der besten Features von anderen Frameworks wie andere Blue Print, Trip oli ... von wo aus er seinen Namen zur Verfügung gestellt wurde. Sein Feature-Set umfasst 24-Stützenraster, Typografie Stile, ORM-Stile, drucken, Buttons etc.
- YUI Grids : Geholt Ihnen durch den yahooo Developer Network unterstützt fluid-width (100%) Layouts sowie voreingestellte Layouts fester Breite auf 750px, 950px, 974px und, und die Fähigkeit, leicht auf eine beliebige Anzahl anpassen. Wie Sie sehen können, die technisch nur die Komponenten-Layout. YUI auch vorgesehen HTML / CSS-Sets für andere Seitenelemente
- YAML (Yet Another Multicolumn Layout)
- Emastic
Denken Sie daran, mit Hilfe von CSS-Frameworks bedeutet nicht, dass Sie faul, um ein eigenes zu erstellen sind ... Es impliziert, dass Sie klug, um von anderen Erfahrungen und Fehlern zu lernen, Zeit sparen und Produktivität steigern sind!!
