Re Dviračiai CSS: Tuo CSS sistemomis Žvilgsnis
Re-dviračių Buzzword ir Web Development reiškia nesiskiria. Ji taupo energiją, pastangų!
Per metus raštu CSS ir kurti HTML iš dizaino, aš po keletą geriausios praktikos, siekiant taupyti laiką ir energiją, ką mes paprastai terminas "Pakartotinis išradimas the Wheel". Laikas ir vėl, aš pasakiau sau, kad man reikia sukurti keletą šablonų, kai standartinis pakartotinai naudoti CSS, kad norėčiau naudoti savo būsimo darbo Out of the box. Nors ne visiškai, bet man pavyko pasiekti kai kurių tikslų.
Be toliau, pakartotinis naudojimas CSS, aš turėjo bent keletą CSS sistemas, kurios yra visuotinai prieinami mus ir nusprendė įdėti juos naudoti, nes jie bandė ir išbandyta ir sukūrė daug patyrusių programuotojų atrodo, nei sau. Dar svarbiau - išvengti pakartotinio sukurta ".
Nors žinoma, veteranų, aš bandė su rašikliu, kai pagrindinės sąvokos, geriausia praktika ir (arba) mintys, kad atvyko į kuriant šias sistemas, RE-Cycling CSS. Tikiuosi tai padės kai kurių CSS kūrėjai, kurie tik ruošiasi ir neseniai sėdo CSS orkestru!
Klavišai Re-dviračių CSS:
Naudokite pavadinimų konvencijų
Tai turi būti svarbiausias veiksnys, CSS / HTML pakartojamais. Suteikti puslapio elementus, atitinkančius pavadinimus leidžia pakartotinį naudojimą puslapių komponentų ir jų stilių su mažai arba pakeitimus. Atitinka šio argumento, Net HTML5, esminio pakeitimo pokyčiui per jo pirmtakai, įvesti tam tikrą struktūrinę žymės viz. <article>, <section>, <header>, <aside> ir <nav> [, Ką HTML5 bus pareikšti? ]. Net su HTML 4 straipsnio arba mažiau), tai geriausia pavadinti standartinius skirsnius savo puslapyje consistanly kaip paprastą pavyzdį žemiau ...
Atminkite, Dauguma Jūsų projekto puslapius, galų gale, turintys tuos pačius pagrindinius struktūrinius elementus. Nustatyti šiuos bendrus esminius puslapio elementus ....
<div id="container"> <div id="header"> ... </ div> <div id="nav"> ... </ div> <div id="sidebar"> ... </ div> <div id="footer"> ... </ div> </ Div>
Atstatyti numatytuosius stilius (CSS Atstato): Nesvarbu, ar jūs naudojate sistemą arba parašyti savo, jūs turite pateikti CSS naujo [ Kas yra CSS Atstato? ], nes jie sumažina arba kartais pašalinti vizualinius neatitikimus, atsirandančius tarp įvairių naršyklių. Paprastais žodžiais tariant CSS Atstatyti mechanizmas nustato stilius HTML elementui neišskiriančių ar neapibrėžtų reikšmių, todėl viršesnis jokių naršyklės numatytąsias vertes, jie gali kelia. Tai suteikia nepriekaištinga reputacija, nustatyti šie elementai neturi jokių user-agent numatytąsias [savybes CSS2.1 User Agent Style Sheet numatytuosius parametrus ]. Visi CSS sistemas turi iš reset mechanizmą. Jeigu rašote jūs savo CSS naujo, Žodis atsargiai, kad jei atsitiktų pamiršti naujo pagrindinį turtą, gali sukelti kryžminį naršyklės klausimais, kad yra labai sunku derinti. Atminkite, kad laikyti Atstatos stilius kopiją ir upuść juos į kiekvieną naują projektą, kurį sukurti.
kūnas, div, dl dt, dd, ul, olis, li, H1, H2, H3, H4, H5, H6, iš anksto, forma, fieldset, įėjimas, pasirinkite, Textarea, p blockquote, stalas, TH, TD { border: 0px margin: 0; padding: 0;} Rinkinys Numatyt (pradinis stiliai) elementais:
Po to, kai jūs nustatėte (nulį arba NULL) numatytąsias vertes tam tikrų atributų tam tikrų HTML elementų, būtina taikyti keletą visoje kiekvieno iš šių elementų, pavyzdžiui stilius. Tai numatytasis parametras gali skirtis, kaip už dizaino arba pagal geriausią praktiką, jums sekti.
Dauguma CSS sistemas, visada įvedamos kai kurios naujos defaults, be naujo numatytuosius naršyklės stilių.
Šie nutylėjimą yra tuščia User-Agent numatytąsias [, nulupama toli CSS Reset), tai bus nuosekli visose naršyklėse.
Atminkite, kad pradiniai stilius yra naudojamas, norint nustatyti ketinate būti naudojamos visos dizaino stilių. pvz.
HTML {font-size: 77%; font-family: Arial, sans-serif;} stiprus, h1, h2, h3, h4, h5, h6 {font-weight: bold;}
Anotacija stiliai Bendrojo HTML komponentai ir bendrų klasių:
Dauguma projektas sudarytas iš kelių puslapių turėti bendrų HTML elementus, naudojamus visoje svetainėje pvz., kai rūšies formų, perspėjimų ir klaidų, nestandartinių langų, švieslentes tt Kadangi tokios sudėtinės dalys vėl naudojami visoje projektų, ji bus naudinga teikti klasių, susijusių su iš anksto nustatytų stilių šių sudedamųjų dalių ir galite sutaupyti sau daug laiko.
Be daugkartinio naudojimo stilių apibrėžti bendrų HTML komponentai, galėtume abstrakčios stilius klasės, susiję su tipografijos, spalvos ar net išdėstymą. Aš pats linkęs naudoti ... bendras pamokas, pavyzdžiui Clearfix, Font08, FontGrey, AlignL, DisplayB tt
forma įvesties {border: 0px background: # FFFFFF; padding: 10px; _padding 0px: 0px 0px; aukštis: 26px; spalva: # 000000; line-height: 30px; font-size: 1.1em;} forma Textarea {siena: 0px; background: # FFFFFF; spalva: # 000000; font-size: .9 Em, line-height: 1,5 tarpo; perpildymas: matomas;} . Fbold {font-weight: bold; spalva: # cccccc;} Fgrey {color: # 666666;} Flightgrey {color: # bbbbbb;} Clearfix {aiški: tiek;} Paskirstytojas {border-top: 1px solid # 647B06, border-bottom: 1px solid # 9CC00A, aukštis: 0px;} Displayb {kalbomis: bloko;}. Displayn {display: none;} Alignr {text-align: right}. Alignc {text-align: center} Floatr {float: teisė;}. Floatl {float: left;}
Išspręsti į bendrų naršyklės Photoshop
Įvairūs naršyklių įgyvendinti CSS kodą ir suteikti skirtingą paramos CSS specifikacijų lygį. Tai rezultatas .... "Naršyklės Quirks", kad mes, kūrėjai paliko spręsti. Ypač, IE6, neduoda ramybės daugumai CSS programuotojams su termino patenkinti. Geros naujienos yra tai patirtis atnešė kartu galimas daugkartinio pataisymai į šiuos klausimus (dažnai vadinamo "kaip CSS hacks ).
Atminkite, laikyti šios hacks ir (arba) nustato patogu
/ * Taip priartinimas: 1 taisyklė yra specialiai IE6 + IE7. * / * Html. Clearfix, *: Pirmosios vaiko + html clearfix { priartinimas: 1; }
Laikyti Jūsų CSS tobulinimas
- Pakartotinai dviračiu įprotis ne ateis į jūsų dieną. Ji turi būti kuriama. Taigi planuoti savo Re dviračiu. Turėkite tai omenyje, kad galėtumėte abstraktūs nutylėjimą stilius, tipografijos apibrėžimai, išdėstymas, HTML elementas stiliai ir tt Stenkitės galvoti.
- Taip pat pažvelgti atgal į savo ankstesnių projektų, ji padės nustatyti stilių, kad jūs dažnai linkę naudoti visoje porjects. Anotacija jį.
- Pašalinti nenaudojamus stilius. Ši praktika bus išlaikyti jūsų CSS sistemą nuo bendros simptomų vadinamas "pūtimas" -
- Pašalinti pasikartojančius stilius.
- Sukurkite keletą stilių, kad yra pakankamai lanksti, kad uosto veiklą pagal projektus.
Žiūrėk Tuo CSS sistemomis
Pagaliau. Jei įkvepia ir ketinate naudoti vieną ar daugiau CSS sistemas, "Heres yra greitas sąrašą keletas populiarių tuos ....
- 960 Tinklelis sistema : 960 Tinklelis sistema yra pastangos supaprastinti interneto vystymosi eigą dažniausiai naudojamas dimensijas, kurių plotis 960 pikselių. Yra trys variantai: 12, 16 ir 24 stulpeliai, kurie gali būti naudojami atskirai arba kartu. Mintis nieko, kad jūs negalite sukurti vieną savo lengvai pakankamai, sistema suteikia tinklo šablonus Spausdinti PDF formatu, kad galima naudoti eskizas savo puslapį designs.Bet,, Būtų priimti profesionalų įspūdį, jei norite atlikti keletą lakštais, kai jūs einate į kliento UI reikalavimų rinkimo. Ji taip pat suteikia pagrindines tinklo šablonus populiarus projektavimo programinės įrangos kaip Fejerverkai, Flash, InDesign, Illustrator, Photoshop, Visio ir kt., Teikiančios "starterį už dešimt", kad pradėti savo projektinį darbą.
- Projektas : Projekte aiškiai klasifikuojami CSS failus iš naujo, tinklai, formas, spausdinti, tipografinių, mygtukai įskiepių, skirtukus ir animacinius tt Ji taip pat teikia paramą IE kaip atskiras įtraukti.
- SenCSs : Skirtingai nei aukščiau dvi, SenCSs (tariama jausmas), neturi turėti CSS Layout apibrėžimus. Jis apima šriftus, paddings, paraštes, lenteles, sąrašus, antraštes, katalogas, formas ir daugiau.
- BlueTrip : pirminis ieškinys į šlovę, kad ji buvo teikiamų kitų sistemų, pavyzdžiui, Blue spausdinti, kelionės Oli ... iš kur jis gauna savo pavadinimą iš geriausių savybių derinys. Jo funkcijų rinkinys apima 24 stulpelio tinklelį, tipografijos stilius, ORM stilius, spausdinti, mygtukų ir tt
- Yui tinkleliai : Atvežtas į Jūsų "Yahooo Developer Network, palaiko skysčių pločio (100%) maketus, taip pat iš anksto fiksuoto pločio maketai 750px, 950px ir 974px, ir galimybė lengvai pritaikyti bet kokį skaičių. Kaip matote, techniškai vos išdėstymo komponentai. Yui taip pat HTML / CSS kitų puslapio elementų rinkinius
- Yaml (Yet Another Multicolumn išdėstymas)
- Emastic
Atminkite, kad naudojant CSS sistemas nereiškia, kad esate tingus susikurti savo ... Tai reiškia, kad esate protingas, kad mokytis iš kitų patirties ir klaidų, Taupykite laiką ir didinti našumą!!
