Exprimarea IT

Re-Ciclism este Buzzword şi în dezvoltare web inseamna nimic diferit. Se economiseşte energie, în termeni de efort!

Peste ani de scris şi de crearea de CSS HTML de la design, am urmat câteva cateva cele mai bune practici, în căutarea de a economisi timp şi energie în ceea ce noi de obicei ca termenul de "Re-Inventing the Wheel". Ora şi timp, din nou, mi-am spus, că trebuie să creeze cateva sabloane, unele standard de re-utilizabile CSS, care mi-ar folosi DIN CUTIE în activitatea mea viitoare. Desi nu este complet, dar am reuşit să atingă unele dintre obiective.

În promovarea, Re-utilizarea de CSS, am avut o privire la câteva cadre CSS, care sunt de obicei disponibile la noi şi a decis să le folosească, aşa cum acestea sunt încercate şi testate şi creat de către dezvoltatorii de mult cu experienţă, decât mine. Mai important, "a evita re-Inventarea".

Deşi cunoştinţe comune la veterani, am încercat să stilou unele concepte-cheie / cele mai bune practici / gânduri, care a trecut în crearea acestor cadre, pentru a face RE-CICLISM de CSS posibil. Sper că acest lucru va ajuta unii dezvoltatori CSS care sunt doar pe cale de a şi urcat recent bandwagon CSS!

Taste Re-ciclism din CSS:

Folosiţi convenţiile Naming

Acest lucru trebuie să fie cel mai important factor în luarea CSS / HTML re-utilizabile. Acordarea de nume de consistente pentru elemente de pagină permite re-utilizarea de componente de pagină şi stilurile lor, cu puţin sau modificări. În conformitate cu acest argument, chiar HTML5, într-o schimbare schimbare majoră pe predecesorii săi, este de a introduce unele structurale şi anume etichetele. <article>, <section>, <header>, <aside>, şi <nav> [ Ce va aduce HTML5? ]. Chiar şi cu HTML 4 (sau mai mic), este cel mai bine pentru a numi secţiuni standard de pagina dvs. consistanly ca în exemplul de mai jos simplu ...

Amintiţi-vă, cele mai multe pagini de pe proiect, ajung având aceleaşi elemente de bază structurale. Identificarea acestor elemente comune de bază pagina ....

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

Reset Stiluri implicite (CSS Resetează): Indiferent dacă utilizaţi un cadru sau a scrie propriile dvs., trebuie să furnizeze CSS Resetează [ Ce sunt CSS Resetează? ], aşa cum se reduce sau elimina incoerenţele, uneori vizuale care apar între browsere diferite. În cuvinte simple, mecanismul de Reset CSS stabileşte stiluri de element HTML pentru valori zero sau null, imperative, astfel, orice valori implicite browser-ului se pot ridică. Acest lucru oferă o tabula rasa pentru a seta proprietăţile acestor elemente nule de orice valori prestabilite User-agent [ CSS2.1 User Agent de stil implicite Derivati ​​]. Toate cadrele CSS nu au mecanism de resetare. Dacă sunt scris tu propriul CSS Resetează, un cuvânt de precauţie este că, dacă se întâmplă să uitaţi să resetaţi o proprietate cheie, ar putea duce la probleme de cross-browser, care sunt foarte greu pentru a depana. Amintiţi-vă, păstraţi o copie a stilurilor de reset şi fixaţi-le în fiecare proiect nou pe care îl creaţi.

  corp, div, dl, dt, dd, ul, ol, li,
  H1, H2, H3, H4, H5, h6,
  pre, forma, FIELDSET, de intrare, selectaţi, textarea,
  p, blockquote, masă,-lea, TD
  {
    transfrontalieră: 0px;
    margin: 0;
    padding: 0;
  } 

Set Defaults (Stiluri de referinţă) la elemente:

După ce aţi setat (la zero sau null), valorile implicite de anumite atribute ale anumitor elemente HTML, este necesar să se aplice unele stiluri din fiecare instanţă a acestor elemente. Acestea ar putea varia setarea implicită ca pe design sau conform celor mai bune practici pe care le urmăriţi.

Cele mai multe cadre CSS, introduce mereu unele noi valori implicite, în plus faţă de resetarea stiluri browser prestabilit.
Aceste valori prestabilite fiind anulate din cele prestabilite de utilizator agent (deposedat departe de Reset CSS), acestea vor fi coerente în browsere.

Amintiţi-vă, stiluri de referinţă sunt folosite pentru a stabili stiluri, care vor fi utilizate de design la nivel. de exemplu.

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

Stiluri de abstract pentru componente comune HTML şi clasele comune:

Cea mai mare proiect compus din mai multe pagini va avea elemente comune HTML utilizate în întreaga site-ul, de exemplu, unele fel de forme, alerte si erori, popup-uri personalizate, lumini etc Deoarece aceste componente sunt folosite din nou în cadrul proiectelor, va fi util pentru a oferi un set de clase asociate cu stiluri predefinite pentru aceste componente şi aveţi posibilitatea să salvaţi-vă o mulţime de timp.

În afară de definirea definiţii reutilizabile stiluri pentru componente comune HTML, am putea clase abstracte stiluri referitoare la tipografie, de culoare sau chiar aspectul. M-am tendinţa de a utiliza ... clasele comune, cum ar fi Clearfix, Font08, FontGrey, AlignL, DisplayB etc

  {frontieră de intrare sub forma: 0px; fundal: # FFFFFF; padding: 0px 10px; _padding: 0px 0px; inaltime: 26px; color: # 000000; linie-inaltime: 30px; font-size: 1.1em;}
 formularul de textarea {frontieră: 0px; fundal: # FFFFFF; culoare: # 000000; font-size: .9 le; linie-inaltime: 1.5em; depăşire: vizibil;}
 Fbold {font-greutate: bold; color: # CCCCCC;}.
 . Fgrey {color: # 666666;}
 . Flightgrey {color: # bbbbbb;}
 Clearfix {clar: ambele;}.
 Separator {border-top: 1px solid # 647B06; border-bottom: 1px solid # 9CC00A; inaltime: 0px;}.
 Displayb {display: block;}. Displayn {display: none;}.
 Alignr {text-align: right.}. Alignc {text-align: center}
 Floatr {float: drept;}. Floatl. {Float: left;} 

Remedieri pentru quirks browser comune

Browsere diferite punerea în aplicare a codului CSS şi asigura un nivel variabil de sprijin pentru caietul de sarcini CSS. Rezultatul acestei .... "Quirks browser", ca noi, dezvoltatorii sunt lăsate pentru a aborda. Mai ales, IE6 bântuie programatori mai CSS, cu un termen limită pentru a răspunde. Vestea buna este o experienţă a adus împreună remedieri posibile reutilizabile la aceste aspecte (adesea numit ca Hacks CSS ).

Amintiţi-vă, Păstraţi aceste hacks / remedieri la îndemână

  / * Zoom: 1 regula este în mod special pentru IE6 + IE7.  * /
    * HTML. Clearfix,
    *:. Primul copil + html clearfix {
           Zoom: 1;
      } 

Păstraţi Rafinare CSS-ul

• Obiceiul de a re-mersul cu bicicleta nu va veni la tine în zi. Ea are de dezvoltat. Plan astfel de Re-Ciclism. Ţineţi acest lucru în minte că ar putea defaults abstracte stiluri de definiţii, tipografie, Layouts, stiluri Elementul HTML, etc Încercaţi să vă gândiţi înainte.
• De asemenea, uita înapoi la proiectele tale din trecut, aceasta va ajuta la identificarea stilurile pe care le au tendinţa de a folosi de multe ori peste porjects. Rezumat ea.
• Îndepărtaţi orice stiluri neutilizate. Această practică va păstra cadrul CSS la un simptom comun numit "balonare" -
• Eliminaţi stilurile repetitive.
• A construi un set de stiluri care sunt suficient de flexibile pentru a se porta pe proiecte.

O privire la cadre CSS

În cele din urmă. Dacă sunteţi inspirat şi intenţionează să utilizeze una sau mai multe dintre cadre CSS, Heres este lista rapidă de câteva cele mai populare ....

• 960 Sistem Grid : Sistemul de 960 Grid este un efort de a eficientiza fluxul de lucru de dezvoltare web prin furnizarea de dimensiuni, utilizate în mod obişnuit bazate pe o lăţime de 960 pixeli. Există trei variante: 12, 16 şi 24 de coloane, care pot fi utilizate separat sau în tandem. Nimic nu gând că nu se poate crea una pentru propria ta destul de uşor, cadru prevede şabloane de reţea pentru imprimare în format PDF, pe care o poate folosi pentru a schiţa designs.Bet pagina dvs., ar face o impresie profesional, dacă purtaţi câteva coli atunci când te duci la un client pentru colectarea cerinţelor UI. Acesta prevede, de asemenea, şabloane de bază de reţea pentru software de proiectare populare cum ar fi focuri de artificii, Flash, InDesign, Illustrator, Photoshop, Visio, etc oferind o "Starter pentru zece" pentru a începe munca de proiectare.
• Plan : Planul prevede distinct clasificate în fişiere CSS pentru Resetează, Grile, Formulare, Print, tipografie, plugin-uri pentru butoane, filele si sprites etc oferă de asemenea suport pentru IE ca o separat includ.
• SenCSs : Spre deosebire de mai sus două, SenCSs (Sense pronunţat), nu are definiţii CSS pentru layout. Aceasta nu include fonturi, Garniture, marje, tabele, liste, anteturi, blockquotes, forme şi multe altele.
• BlueTrip : cererea iniţială a fost că faima, a fost o combinaţie de cele mai bune caracteristici oferite de alte cadre de alţii, cum ar fi albastru de imprimare, de călătorii Oli ... de unde se trage si numele acestuia. Set caracteristică include 24-coloană reţea, stiluri de tipografie, stiluri de ORM, de imprimare, butoanele, etc
• YUI Fileu : adus la tine de Developer Network Yahooo, susţine lichid-lăţime (100%), precum şi aspecte presetate cu lăţime fixă machete la 750px, 950px, si 974px, şi capacitatea de a personaliza cu uşurinţă la orice număr. După cum puteţi vedea, sa tehnic doar dispunerea componentelor. YUI oferit, de asemenea, HTML / CSS seturi pentru alte elemente de pagină
• YAML (Totuşi, un alt aspect multicolumn)
• Emastic

Amintiţi-vă, folosind cadre de CSS nu implică faptul că sunt leneşi pentru a crea unul propriu ... Aceasta înseamnă că eşti inteligent să înveţe din experienţa celorlalţi şi greşeli, a economisi timp şi creşterea productivităţii!!