Re-Cycling è Buzzword e nello sviluppo Web significa non è diverso. Si risparmia energia, in termini di sforzo!
Nel corso degli anni di scrittura e la creazione di CSS HTML da disegni, ho seguito poche procedure consigliate, in cerca di risparmiare tempo ed energia in ciò che comunemente termine come "Re-inventare la ruota". Di volta in volta, mi sono detto che devo creare alcuni modelli, qualche standard riutilizzabile CSS che avrei usato OUT OF THE BOX nel mio lavoro futuro. Anche se non completamente, ma sono riuscito a raggiungere alcuni degli obiettivi.
In promozione, Re-Use di CSS, ho avuto uno sguardo ai quadri pochi CSS che sono comunemente a nostra disposizione e ha deciso di farne uso, in quanto questi sono provati e testati e realizzati da sviluppatori molto esperti, di me. Ancora più importante "evitate di reinventare".
Anche se noto ai veterani, ho cercato di penna alcuni concetti chiave / best practice / pensieri che è andato a creare questi quadri, per rendere RE-CYCLING del CSS possibile. Spero che questo aiuterà alcuni sviluppatori di CSS che sono sul punto e recentemente saliti a bordo del carrozzone CSS!
Keys Re-ciclismo di CSS:
Utilizzare convenzioni di denominazione
Questo deve essere il fattore più importante nel rendere il CSS / HTML riutilizzabile. Dare nomi coerenti per gli elementi della pagina consente il riutilizzo di componenti delle pagine e dei loro stili con poco o modifiche. In linea con questo argomento, anche HTML5, in un cambiamento importante cambiamento rispetto ai suoi predecessori, è quello di introdurre alcune cioè strutturale tag. <article>, <section>, <header>, <aside> e <nav> [ HTML5 Cosa portare? ]. Anche con HTML 4 (o inferiore), è meglio dare un nome sezioni standard della pagina consistanly come nel semplice esempio qui sotto ...
Ricordate, La maggior parte delle pagine del tuo progetto, finisce per avere gli elementi fondamentali stessi strutturali. Identificare questi comuni elementi della pagina di base ....
<div id="container">
<div id="header"> ... </ div>
<div id="nav"> ... </ div>
<div id="sidebar"> ... </ div>
<div id="footer"> ... </ div>
</ Div> Ripristina stili di default (Ripristina CSS): Se si utilizza un quadro o scrivere la propria, è necessario fornire Ripristina CSS [ Cosa sono Ripristina i CSS? ], in quanto riducono o, talvolta, eliminare le incoerenze visive che si verificano tra i vari browser. In parole semplici il meccanismo di ripristino CSS definisce gli stili di elementi HTML a valori zero o nulla, ignorando i valori di default del browser possono pone. Ciò fornisce una tabula rasa per impostare le proprietà di questi elementi di vuoto di qualsiasi User-Agent Defaults [ CSS2.1 User Agent Defaults fogli di stile ]. Tutti i quadri CSS hanno meccanismo di reset. Se si sta scrivendo il proprietario Ripristina CSS, una parola di cautela è che se vi capita di dimenticare di reimpostare una proprietà chiave, si potrebbe portare a problemi di cross-browser, che sono molto difficili da eseguire il debug. Ricorda, a mantenere una copia degli stili di reset e di farli cadere in ogni nuovo progetto che si crea.
corpo, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, select, textarea,
p, blockquote, tavola, th, td
{
border: 0px;
margin: 0;
padding: 0;
} Impostare stili predefiniti (basale) a elementi:
Dopo aver impostato (a zero o null) i valori di default di certi attributi di alcuni elementi HTML, è necessario applicare alcuni stili attraverso tutte le istanze di questi elementi. Queste impostazioni di default potrebbe variare come da progetto o secondo le migliori pratiche che si sta seguendo.
La maggior parte dei framework CSS, introduce sempre delle nuove impostazioni predefinite, oltre al ripristino degli stili di default del browser.
Questi valori predefiniti essendo priva di User-Agent (Defaults strappato via da Reset CSS), questi saranno coerenti in tutti i browser.
Ricordate, gli stili della linea di base vengono utilizzati per impostare gli stili che stanno andando essere utilizzati a livello di progettazione. es.
html {font-size: 77%; font-family: Arial, sans-serif;}
forte, h1, h2, h3, h4, h5, h6 {font-weight: bold;} Stili astratti comuni per i componenti HTML e classi comuni:
La maggior parte di progetto costituito da più pagine avrà comuni elementi HTML utilizzati in tutto il sito, per esempio, hanno una sorta di forme, allarmi ed errori, pop-up personalizzati, Archivio ecc Dato che tali componenti sono utilizzati più volte tra i progetti, sarà utile per fornire un set di classi associate con gli stili predefiniti per questi componenti e si può risparmiare un sacco di tempo.
Oltre a definire le definizioni riutilizzabili stili per i componenti più comuni HTML, potremmo classi astratte stili appartenenti alla tipografia, il colore o addirittura layout. Mi tendenza si usa ... le classi comuni come Clearfix, Font08, FontGrey, alignl, ecc DisplayB
modulo di input {border: 0px; background: # FFFFFF; padding: 0px 10px; _padding: 0px 0px; altezza: 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;}
. 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;} Correzioni per i difetti dei browser più comuni
Vari browser implementare il codice CSS e fornire diverso livello di supporto per le specifiche CSS. Il risultato di questo .... Quirks "Browser", che noi gli sviluppatori sono rimasti da affrontare. In particolare, IE6 ossessiona più codificatori CSS con una scadenza da rispettare. La buona notizia è l'esperienza ha messo insieme le possibili correzioni riutilizzabili per questi problemi (spesso definito come Hacks CSS ).
Ricorda, a mantenere questi hack / correzioni a portata di mano
/ * Lo zoom seguente: 1 regola è specifica per IE6 + IE7. * /
* Html. Clearfix,
*:. First-child + html clearfix {
zoom: 1;
} Tenere Ottimizzazione della CSS
- L'abitudine di riciclo, non verrà a voi in giornata. Deve sviluppato. Quindi, progettare la vostra Re-Cycling. Tenete a mente che si potrebbe default stili astratti, definizioni tipografia, layout, gli stili degli elementi HTML, ecc Provate a pensare al futuro.
- Anche guardare indietro ai vostri progetti passati, che aiuterà a identificare gli stili che si tende a usare spesso in porjects. Riassunto esso.
- Rimuovere tutti gli stili inutilizzati. Questa pratica non mancherà di tenere il framework CSS da un sintomo comune chiamato "rigonfiamento" -
- Rimuovere gli stili ripetitivi.
- Costruire un insieme di stili che sono abbastanza flessibili da portarlo tra i progetti.
A Look At Frameworks CSS
Infine. Se si sono ispirati e che intendono utilizzare uno o più dei framework CSS, Heres è rapido elenco di alcune fra le più popolari ....
- 960 Grid System : il 960 Grid System è uno sforzo per snellire lo sviluppo del flusso di lavoro web, fornendo le dimensioni comunemente utilizzati, sulla base di una larghezza di 960 pixel. Ci sono tre varianti: 12, 16 e 24 colonne, che possono essere utilizzate separatamente o in tandem. Niente di pensiero che non è possibile crearne uno per il proprio abbastanza facilmente, Il framework fornisce modelli di griglia per la stampa in formato PDF, che si può usare per disegnare il vostro designs.Bet pagina, Sarebbe in modo professionale, se si svolge alcuni fogli quando si va ad un cliente per la raccolta di requisiti utente. Esso fornisce inoltre i modelli di rete di base per il software di progettazione popolari come Fireworks, Flash, InDesign, Illustrator, Photoshop, Visio, ecc fornendo una "starter per dieci" per iniziare il lavoro di progettazione.
- Blueprint : Blueprint fornisce distintamente classificati file CSS per i reset, griglie, forme, stampa, tipografia, Plugin per schede e pulsanti, sprite ecc, e prevede anche il supporto per IE come entità includere.
- SenCSs : A differenza di quanto sopra due, SenCSs (Sense pronunciato), non hanno definizioni CSS per il layout. Essa include i font, imbottiture, margini, elenchi, tabelle, intestazioni, blockquote, form e altro ancora.
- BlueTrip : La sua domanda principale era che la fama, era una combinazione delle migliori caratteristiche fornite da altri quadri di altri come Blue print, oli di viaggio ... da cui prende il nome. Le sue caratteristiche includono 24-colonna della griglia, stili tipografici, gli stili di ORM, di stampa, pulsanti, ecc
- YUI Grids : Portato a voi da Developer Network Yahooo, supporta fluido larghezza (100%) così come layout preimpostati layout a larghezza fissa a 750px, 950px e 974px, e la possibilità di personalizzare facilmente a qualsiasi numero. Come si può vedere, tecnicamente solo i componenti di layout. YUI anche fornito HTML / CSS set per altri elementi della pagina
- YAML (Yet Another multicolonna Layout)
- Emastic
Ricordate, utilizzando gli schemi CSS non significa che siete pigri per crearne uno tutto tuo ... Ciò implica che tu sia intelligente per imparare dalle esperienze altrui e gli errori, risparmiare tempo e aumentare la produttività!!
