Re-Riteņbraukšana CSS: Paraugieties CSS ietvarstruktūru
Re-Riteņbraukšana ir Buzzword un web izstrāde tas nozīmē, ne ar ko neatšķiras. Tas taupa enerģiju, kas izpaužas centienos!
Vairāk nekā gadu rakstiski CSS un veidot HTML no dizainparaugiem, esmu sekojis dažus labākās prakses, lai sasniegtu ietaupot laiku un enerģiju, ko mēs parasti termins kā "izgudrošana no jauna ritenis". Atkal un atkal, man ir teicis sevi, ka man ir izveidot dažas veidnes, daži standarta otrreizēji izmantojami CSS, ka es varētu izmantot ārpus zonas savā turpmākajā darbā. Taču ne pilnībā, bet es izdevās panākt dažus mērķus.
Veicināja, atkalizmantošana CSS, man bija apskatīt retajiem CSS sistēmu, kas ir plaši pieejami mums un nolēma nodot tos izmantot, jo tie ir izmēģināts un pārbaudīts un rada daudz pieredzējuši attīstītāji, kas par mani. Vēl svarīgāk "izvairītos no atkārtotas izgudrošana".
Lai gan zināms veterāniem, esmu mēģinājis pildspalvu daži galvenie jēdzieni / paraugprakses / domas, ka ir ieguldīts radot šos pamatprincipus, lai padarītu Re-Riteņbraukšana CSS iespējas. Ceru, ka tas palīdzēs daži CSS izstrādātājiem, kas ir tikai par to un nesen iekļuva CSS bandwagon!
Atslēgas Re-riteņbraukšana CSS skaits:
Izmantot nosaukumu konvencijām
Tam ir jābūt vissvarīgākais faktors, lai padarītu CSS / HTML atkalizmantojami. Piešķirt konsekventu nosaukumus lapas elementiem iespējo atkalizmantot lapas komponentiem un to stilu ar neliela vai modifikācijas. Saskaņā ar šo argumentu, pat HTML5, būtiskas izmaiņas, izmaiņas laika tās priekšgājējiem, ir ieviest dažas strukturālas tags viz. <article>, <section>, <header>, <aside>, un <nav> [ Ko HTML5 celt? ]. Pat ar 4 HTML (vai mazāk), tas ir labākais nosaukt standarta sadaļām savā lapā consistanly tāpat kā vienkāršu piemēru zemāk ...
Atcerieties, Lielākā daļa lapām jūsu projekta, galu galā, kam tos pašus galvenos strukturālos elementus. Identificēt šos kopīgas pamatinformācijas lapas elementus ....
<div id="container"> <div id="header"> ... </ div> <div id="nav"> ... </ div> <div id="sidebar"> ... </ div> <div id="footer"> ... </ div> </ Div>
Reset noklusējuma stilu (CSS Atiestata): Vai jūs izmantojat sistēmu vai rakstīt savu, jums ir jāsniedz CSS nodzēš [ Kas ir CSS Atiestata? ], jo tie samazina vai dažreiz likvidēt vizuālos neatbilstības, kas rodas starp dažādām pārlūkprogrammām. Vienkāršā vārdiem, CSS Reset mehānisms nosaka stilus HTML elements ar nulles vai Null vērtībām, tādējādi ignorējot jebkādas pārlūka noklusējuma vērtības var pozās. Tas nodrošina tīru šīferis, lai uzstādītu īpašības šo elementu neesošu jebkādu User-agent noklusējumu [ CSS2.1 lietotāja aģents Style Sheet noklusējumu ]. Visi CSS sistēmas darīt ir par reset mehānismu. Ja jūs rakstāt jums pieder CSS nodzēš, ņemiet ir tas, ka ja tev gadās aizmirst nomainīt galveno īpašumu, tas var radīt krustenisko pārlūkprogrammas jautājumiem, kas ir ļoti grūti atkļūdot. Atceros, Keep kopiju reset stilu un nomest tos katram jaunam projektam, ko jūs izveidojat.
ķermeņa, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, H5, H6, iepriekš, forma, fieldset, ievadi, izvēlieties, textarea, p, Blokcitāts, galds, th, td { border: 0px; margin: 0; padding: 0; }
Noteikti Noklusējumi (pamata stili) elementiem skaits:
Kad esat (līdz nullei vai null) noklusējuma vērtības atsevišķu atribūtu dažu HTML elementus, ir nepieciešams piemērot dažus stilus visos gadījumos šo elementu. Šie noklusējuma iestatījums var atšķirties, kā vienu dizaina vai pēc labākās prakses jums sekot.
Lielākā daļa CSS sistēmas, vienmēr ievieš dažus jaunus noklusējumus, papildus atiestatīt noklusējuma pārlūkprogrammu stilus.
Šie noklusējuma tiek anulētas no User-agent noklusējumu panta attīrīta prom ar CSS Reset), tie būs konsekventi visiem pārlūkiem.
Atcerieties, sākuma stili tiek izmantoti, lai noteiktu stilu, kas gatavojas izmantot dizainu visā. piem.
html {font-size: 77%, font-family: Arial, sans-serif;} spēcīga, H1, H2, H3, H4, H5, H6 {font-weight: bold;}
Abstract stili Kopīgās HTML komponenšu un kopējām kategorijām:
Lielākā projekts sastāv no vairākām lapām būs kopīgi HTML elementus, ko izmanto visā vietnē, piemēram, kaut kādu formu, brīdinājumus un kļūdas, lietotāja logus, gaismas kastes u.tml Tā kā šie komponenti tiek izmantoti atkal visos projektos, tā būs noderīga, lai nodrošinātu komplekts klasēs, ar iepriekš definētiem stiliem šīm sastāvdaļām un jūs varat saglabāt sevi daudz laika.
Izņemot definēt atkārtoti lietojamu stilu definīcijas kopējo HTML sastāvdaļas, mēs varētu abstraktu stilu klases, kas attiecas uz tipogrāfijas, krāsu vai pat izkārtojumu. Es pats mēdz lietot ... kopīgus kursus, piemēram Clearfix un Font08 un FontGrey un AlignL un DisplayB uc
veidlapa ievade {border: 0px; fons: # FFFFFF; padding: 0px 10px; _padding: 0px 0px; augstums: 26px; krāsa: # 000000; līnijas augstums: 30px; font-size: 1.1em;} veidlapa textarea {border: 0px; fons: # FFFFFF; krāsa: # 000000; font-size: .9 em; līnijas augstums: 1.5em; pārplūde: redzams;} . Fbold {font-weight: bold; krāsa: # cccccc;} . Fgrey {color: # 666.666;} . Flightgrey {color: # bbbbbb;} . Clearfix {skaidra: gan;} . Dalītājs {border-top: 1px solid # 647B06; robežu apakšā: 1px solid # 9CC00A, augstums: 0px;} . Displayb {display: block;}. Displayn {display: none;} . Alignr {text-align: right}. Alignc {text-align: center} . Floatr {float: right;}. Floatl {float: left;}
Gadam uz kopīgiem pārlūkprogrammas quirks
Dažādi pārlūki īstenot CSS kodu un sniedz dažāda līmeņa atbalstu CSS specifikācijas. Rezultāts šai .... "Pārlūka quirks", ka mēs izstrādātāji ir palikuši risināt. Īpaši, IE6 vajā visvairāk CSS coders ar termiņu izpildīt. Labā ziņa ir pieredze savedis kopā iespējamos atkārtoti lietojamu labojumus šajos jautājumos, bieži vien sauc par CSS ceļveži ).
Atcerieties, Turēt šos hacks / labojumi parocīgs
/ * Šādiem tālummaiņa: 1 noteikums ir īpaši IE6 + IE7. * / * Html. Clearfix, *:. 1.-bērns + html clearfix { tālummaiņa: 1; }
Saglabāt Attīrīšanas savu CSS
- Atkārtotas velosipēdu ieradums nenāks pie jums dienu. Tā ir izstrādāta. Tāpēc plānot savu Re-Riteņbraukšana. Sedz to prātā, ka jūs varētu abstrakti noklusējumus stili, tipogrāfija definīcijas, Izkārtojumi, HTML Element stili uc Mēģiniet domāt uz priekšu.
- Arī atskatīties uz savu agrāko projektu, tas palīdzēs noteikt stilu, kas jūs cenšas izmantot bieži pāri porjects. Abstrakts to.
- Noņemt neizmantotos stilus. Šī prakse saglabās jūsu CSS sistēmu no kopējā simptoms sauc par "Vēdera uzpūšanās" -
- Noņemt atkārtotas stilus.
- Būvēt virkni stilu, kas ir pietiekami elastīga, lai ostas to pa projektiem.
Paraugieties CSS ietvarstruktūru
Beidzot. Ja Jums ir iedvesmoti un plāno izmantot vienu vai vairākus CSS sistēmu, Lūk ir ātrs sarakstu dažus tautas tiem ....
- 960 Režģis sistēma : 960 Režģis sistēma ir centieni racionalizēt interneta attīstības darbplūsmu, sniedzot visbiežāk izmantotās dimensijas, pamatojoties uz platumu 960 pikseļi. Ir trīs varianti: 12, 16 un 24 kolonnām, kuras var izmantot atsevišķi vai kopā. Doma nekas, ka jūs nevarat izveidot vienu savu paviegli, sistēma nodrošina koordinātu veidnes drukā PDF formātā, kas var izmantot, lai ieskicēt savu lapu designs.Bet, tas dotu profesionālu iespaidu, ja jūs veikt dažas lapas, jo doties uz klientam UI prasībām vākšana. Tā arī nodrošina pamata režģi veidnes tautas dizains programmatūru, piemēram, uguņošana, Flash, InDesign, Illustrator, Photoshop, Visio uc, izstrādājot "starteri desmit, lai sāktu savu dizaina darbu.
- Projekts : Projekts ir paredzēts skaidri klasificēti CSS failus nodzēš, režģu, veidlapas, drukāt, tipogrāfija, plugins pogas, cilpiņas un sprites utt Tā arī nodrošina atbalstu IE kā atsevišķs ietver.
- SenCSs : Atšķirībā no iepriekš divās, SenCSs (izrunā Sense), nav CSS definīcijas izkārtojums. Tas ietver fontus, paddings, peļņas, tabulas, sarakstus, galvenes, blockquotes, veidus un vairāk.
- BlueTrip : Tās sākotnējais prasījums fame bija, ka tas bija kombinācija no labākajiem iezīmes sniegto citu starpā sistēmām, piemēram, Blue drukāt, ceļojumu oli ... no kurienes tas izpaužas tā nosaukumu. Tās iezīme, kas ietilpst 24 kolonnu tīklu, tipogrāfijas stili, Orm stilus, drukāt, pogas uc
- Yui Režģi : Kas jums ar to windows Developer Network, atbalsta šķidrumu platums, 100%), izkārtojumu, kā arī iepriekš uzstādītās fiksēta platuma izkārtojumus pie 750px un 950px un 974px un, un spēja viegli pielāgot jebkuram skaitam. Kā jūs varat redzēt, tā tehniski tikai izkārtojuma komponentes. Yui arī sniedz HTML / CSS komplekti citu lapas elementu
- YAML (Vēl viens Multicolumn izkārtojums)
- Emastic
Atcerieties, izmantojot CSS regulējumu nenozīmē, ka jums ir slinks, lai radītu vienu no savu ... Tas nozīmē, ka jums ir gudrs, lai mācītos no citiem pieredzes un kļūdām, ietaupīt laiku un palielināt produktivitāti!!
