El reciclatge és paraula de moda i en el desenvolupament web significa que no és diferent. Es conserva l'energia, en termes d'esforç!
En els últims anys de l'escriptura i la creació d'HTML CSS a partir de dissenys, que han seguit una sèrie de pràctiques recomanades, en la recerca d'estalvi de temps i energia en el que generalment anomenem "reinventar la roda". Una i altra vegada, m'he dit que he de crear unes quantes plantilles, algun estàndard reutilitzables CSS que usaria fora de la caixa en el meu treball futur. Encara que no del tot, però me les vaig arreglar per aconseguir alguns dels objectius.
En la promoció, re-ús de CSS, he fet una ullada als pocs marcs de CSS que estan comunament disponibles per a nosaltres i va decidir posar-les en pràctica, ja que aquests són de provada eficàcia i creat pels desenvolupadors experimentats tant, que jo mateix. Més important encara "Eviti tornar a inventar".
Encara que el coneixement comú als veterans, he tractat de ploma alguns dels principals conceptes i millors pràctiques i pensaments que ha passat en la creació d'aquests marcs de referència, per fer reciclatge de CSS és possible. Espero que això ajudarà a que alguns desenvolupadors de CSS que estan a punt de i, recentment, van abordar el tren CSS!
Tecles de ciclisme Re de CSS:
Utilitzeu Convencions de nomenclatura
Això ha de ser el factor més important en la presa de la CSS / HTML reutilitzable. Donar noms consistents en elements de pàgina permet la reutilització dels components de la pàgina i els seus estils amb poca o modificacions. En línia amb aquest argument, HTML5 Fins i tot, en un canvi important canvi respecte als seus predecessors, és a dir introduir algunes etiquetes estructural. <article>, <sección>, <header>, <aside> i <nav> [ Què va a aportar HTML5? ]. Fins i tot amb HTML 4 (o inferior), el millor és trucar a les seccions habituals de la pàgina consistanly com en l'exemple senzill a continuació ...
Recordeu, la majoria pàgines del seu projecte, arribar a tenir els elements bàsics estructurals mateixes. Identificar els elements bàsics comuns pàgina ....
<div id="contenedor">
<div id="cabecera"> ... </ div>
<div id="nav"> ... </ div>
<div id="sidebar"> ... </ div>
<div id="footer"> ... </ div>
</ Div> Restablir estils predeterminats Restableix (CSS): Si vostè utilitza un marc o escriure el seu propi, ha de proporcionar Restableix CSS [ Quins són Restableix CSS? ], ja que reduir o eliminar les incoherències de vegades visuals que es produeixen entre diferents navegadors. En paraules simples, el mecanisme de restabliment CSS estableix els estils d'element HTML en els valors de zero o nul · la, reemplaçant així els valors per defecte del navegador poden planteja. Això proporciona un creu i ratlla per establir les propietats d'aquests elements sense efecte dels impagaments User-Agent [ Agent d'usuari CSS2.1 predeterminats de fulls d'estil ]. Tots els marcs de la CSS ni cap mecanisme de restabliment. Si va a escriure vostè el propietari de Restableix CSS, una paraula d'advertència és que si t'oblides de restablir una propietat clau, i podria conduir a problemes de cross-browser, que són molt difícils de depurar. Recordeu, mantingui una còpia dels estils de reinici i posar-la a cada projecte nou que creu.
cos, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
abans, la forma, fieldset, d'entrada, selecció, àrea de text,
p, blockquote, taula, th, td
{
border: 0px;
margin: 0;
padding: 0;
} Establir valors predeterminats (Estils de línia de base) als elements:
Després d'haver establert (en zero o nul) els valors per defecte de certs atributs de certs elements d'HTML, cal aplicar alguns dels estils a través de totes les instàncies d'aquests elements. Aquests ajustaments per defecte pot variar segons el disseny o d'acord amb les millors pràctiques que segueixen.
La majoria dels marcs de CSS, sempre introdueix alguns nous valors per defecte, a més de restablir els estils predeterminats del navegador.
Aquests valors per defecte és buit dels valors predeterminats d'User-Agent (despullat pel restabliment CSS), aquests seran en tots els navegadors.
Recordeu, els estils de línia de base s'utilitzen per definir els estils que van ser utilitzats en tot el disseny. per exemple.
html {font-size: 77%; font-family: Arial, sans-serif;}
fort, h1, h2, h3, h4, h5, h6 {font-weight: bold;} Estils Resum de components comuns d'HTML i classes comuns:
La major part del projecte que consta de diverses pàgines es tenen en comú els elements HTML utilitzats en tot el lloc, per exemple, algun tipus de formularis, alertes i els errors, finestres emergents personalitzats, Taules de llum, etc Atès que aquests components s'utilitzen de nou a través de projectes, que seran útils per a proporcionar una un conjunt de classes associades amb estils predefinits per a aquests components i vostè pot estalviar molt de temps.
A part de la definició de les definicions d'estils reutilitzables per als components comuns d'HTML, podríem classes d'estils abstractes relacionats amb la tipografia, el color o el disseny, fins i tot. Jo mateix tendeixo a utilitzar ... les classes comunes com Clearfix, Font08, FontGrey, AlignL, etc DisplayB
formulari d'entrada {border: 0px; background: # ffffff; padding: 0px 10px; _padding: 0px 0px; alçada: 26px; color: # 000000; line-height: 30px; font-size: 1.1em;}
forma 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;}
. Divisor de {border-top: 1px solid # 647B06; border-bottom: 1px solid # 9CC00A; alçada: 0px;}
. Displayb {display: block;}. Displayn {display: none;}
. Alignr {text-align: right}. Alignc {text-align: center}
. Floatr {float: right;}. Floatl {float: left;} Solucions a errors comuns peculiaritats navegador
Diversos navegadors posar en pràctica el codi CSS i proporcionar diferent nivell de suport a les especificacions de CSS. El resultat d'aquesta .... "Capricis del navegador", que els desenvolupadors es deixen d'abordar. Sobretot, persegueix els codificadors de la majoria de IE6 CSS amb un termini de complir. La bona notícia és que l'experiència ha reunit les possibles solucions reutilitzables per a aquestes qüestions (sovint anomenat com hacks CSS ).
Recordeu, mantingui aquests hacks / correccions a mà
/ * El zoom el següent: 1 regla és específicament per IE6 + IE7. * /
* Html. Clearfix,
*:. First-child + html {clearfix
zoom: 1;
} Seguiu ajustant la seva CSS
- L'hàbit de reciclatge, no vindrà a tu en el dia. Ha de desenvolupat. Així que el pla del seu reciclatge. Tingui-ho en compte que vostè podria defecte estils abstractes, les definicions de la tipografia, dissenys, estils d'elements HTML, etc Intenta pensar en el futur.
- També mirar cap enrere en els seus projectes anteriors, l'ajudarà a identificar els estils que tendeixen a utilitzar amb freqüència a través porjects. Resum ella.
- Traieu tots els estils no utilitzats. Aquesta pràctica es mantindrà el marc de CSS d'un símptoma comú que es diu "Inflor" -
- Treure estils repetitius.
- Construir un conjunt d'estils que són prou flexibles com per transportar-lo a través de projectes.
Una mirada als marcs CSS
Finalment. Si està inspirat i utilitzeu un o més dels marcs de CSS, Heres és una llista ràpida d'alguns dels més populars ....
- 960 Grid System : El sistema de quadrícula 960 és un esforç per racionalitzar el flux de treball de desenvolupament web, proporcionant les dimensions d'ús comú, sobre la base d'un ample de 960 píxels. Existeixen tres variants: 12, 16 i columnes 24, que poden ser utilitzats per separat o en tàndem. Res de pensament que no es pot crear un per la seva pròpia facilitat, El marc proporciona plantilles de la xarxa per a la impressió en format PDF, que es pot utilitzar per traçar la seva designs.Bet pàgina, es faria una impressió professional, si vostè porta unes quantes fulles quan vostè va a un client per a la recollida de requisits d'interfície d'usuari. També ofereix plantilles bàsiques de xarxa per al programari de disseny popular com Fireworks, Flash, InDesign, Illustrator, Photoshop, Visio, etc proporcionar un "Starter for Tingues" per començar el seu treball de disseny.
- Blueprint : Blueprint proporciona clarament classificats per al restabliment dels arxius CSS, reixetes, formularis, impressió, tipografia, Connectors per als botons, pestanyes i sprites, etc També proporciona suport per IE com per separat inclouen.
- SenCSs : A diferència dels dos anteriors, SenCSs (pronunciat sentit), no té definicions CSS per a la maquetació. S'inclou fonts, farcits, marges, taules, llistes, encapçalats, Tabulacions, formes i molt més.
- BlueTrip : La seva demanda principal a la fama va ser això, va ser una combinació de les millors característiques proporcionades per altres marcs d'altres com Blue oli d'impressió, de viatge ... d'aquí el seu nom. El seu conjunt de característiques inclou 24-columna de la quadrícula, els estils de tipografia, estils de ORM, d'impressió, botons, etc
- Reixetes de YUI : Presentat a vostè per la xarxa de desenvolupadors Yahooo, suporta ample de líquid (100%), així com els dissenys preestablerts dissenys d'amplada fixa en 750px, 950px, 974px, i, i la possibilitat de personalitzar fàcilment a qualsevol nombre. Com es pot veure, el seu punt de vista tècnic només els components de disseny. YUI també va proporcionar HTML / CSS per als conjunts d'elements de pàgina
- YAML (No obstant això, un altre disseny de diverses columnes)
- Emastic
Recorda que l'ús de marcs CSS no implica que vostè és mandrós per crear un de propi ... Això implica que vostè és intel · ligent per aprendre de l'experiència d'altres i errors, estalviar temps i augmenten la productivitat!
