Re-Cycling ay Buzzword at Sa Web Development ang ibig sabihin nito walang ibang. Ito conserves ng enerhiya, sa mga tuntunin ng pagsisikap!
Sa paglipas ng taon ng pagsulat ng CSS at paglikha ng HTML mula sa disenyo, ako sinundan ng ilang mga pinakamahusay na kasanayan, sa paghabol ng pag-save ng oras at enerhiya sa kung ano ang aming karaniwang term bilang "Re-Inventing ang Wheel". Oras at oras muli, ako ay sinabi sa aking sarili, na ako dapat lumikha ng ilang mga template, ang ilang mga karaniwang muling magagamit ang CSS na ko bang gamitin ng kahon sa aking mga hinaharap na trabaho. Kahit na hindi ganap na ngunit ako ay pamahalaan upang makamit ang ilang mga ng mga layunin.
Sa furthering, Re-Paggamit ng CSS, ako ay tumingin sa ang ilang mga frameworks CSS na ay karaniwang magagamit sa amin at nagpasya upang ilagay ang mga ito upang gamitin, dahil ang mga ito ay sinubukan at nasubok at na nilikha sa pamamagitan ng magkano karanasan developer, kaysa sa aking sarili. Higit pang mga mahalaga ay "Iwasan ang RE-INVENTING".
Kahit na ang karaniwang kaalaman sa Beterano, ako sinubukan pen ilang mga pangunahing konsepto / mga pinakamahusay na kasanayan / mga saloobin na nawala sa paglikha ng mga frameworks na ito, upang gumawa ng mga posibleng ang RE-pagbibisikleta ng CSS. Sana ito ay makakatulong sa ilang ng mga developer ng CSS na lamang tungkol sa at kamakailan boarded ang CSS pambandang trak!
Keys Re-pagbibisikleta ng CSS:
Gamitin ang Madaling mapapangalanan balarila
Ito ay upang maging ang pinaka-mahalagang kadahilanan sa paggawa ng CSS / HTML muling-magagamit. Ang pagbibigay ng pare-pareho mga pangalan sa mga sangkap ng pahina ay nagbibigay-daan sa muling paggamit ng mga bahagi ng pahina at ang kanilang mga estilo na may kakaunti o pagbabago. Sa linya na may argument na ito, Kahit HTML5, sa isang malakihang pagbabago ng pagbabago sa kanyang predecessors, ay upang ipakilala ang ilang mga istraktura viz tag. <article>, <section>, <header>, <aside>, at <nav> [ Ano ang HTML5 dalhin? ]. Kahit na sa HTML 4 (o mas mababa), ito ay pinakamahusay na pangalan ng karaniwang mga seksyon ng iyong pahina consistanly tulad sa simpleng halimbawa sa ibaba ...
Tandaan, ang mga Karamihan sa mga pahina sa iyong proyekto, tapusin up nagkakaroon ng parehong istraktura elemento ng core. Kilalanin ang mga mga karaniwang mga elemento sa pahina ng core ....
<div id="container">
<div id="header"> ... </ div>
<div id="nav"> ... </ div>
<div id="sidebar"> ... </ div>
<div id="footer"> ... </ div>
</ Div> I-reset ang mga Estilo ng Default (CSS Resets): Kung gumamit ka ng isang framework o isulat ang iyong sarili, dapat kang magbigay ng CSS Resets [ Ano ang CSS Resets? ], bilang sila bawasan o alisin minsan ang mga visual na inconsistencies na nangyari sa pagitan ng iba't-ibang mga browser. Sa simpleng salita ang mekanismo ng CSS I-reset ang nagtatakda ng mga estilo ng HTML Sangkap sa zero o null halaga, kaya ang pinakamahalaga anumang browser halaga ng default na maaaring sila ay poses. Ito ay nagbibigay ng isang malinis na talaan ng mga kandidato upang itakda ang mga katangian ng mga sangkap na ito na walang bisa ng anumang User-Agent Default [ CSS2.1 User Agent Style Sheet Default ]. Ang lahat ng mga CSS frameworks ng pag-reset ng mekanismo. Kung ikaw ay sumusulat sa iyo CSS Resets, ang isang salita ng pag-iingat ay na kung mangyari mong kalimutan na i-reset ang isang key ari-arian, maaari itong humantong sa cross-browser isyu, na lubhang mahirap upang i-debug. Tandaan, Panatilihin ang isang kopya ng pag-reset ng estilo at i-drop ang mga ito sa bawat bagong proyekto kang lumikha ng.
body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, piliin, textarea,
p, Blockquote, talahanayan, th, td
{
border: 0px;
margin: 0;
padding: 0;
} Itakda ang default (baseline Estilo) sa Sangkap:
Matapos mong itakda (sa zero o null) ang mga Halaga ng default ng ilang mga katangian ng ilang mga HTML Sangkap, ay kinakailangan na mag-aplay ng ilang mga estilo sa buong bawat halimbawa ng mga sangkap na ito. Ang mga default na setting ay maaaring mag-iba ng bawat disenyo o ayon sa pinakamahusay na kasanayan mong sundin.
Karamihan sa CSS frameworks, palaging introduces ilang bagong mga default, sa karagdagan sa pag-reset sa default na estilo ng browser.
Ang mga default ng pagiging walang bisa ng User-Agent Default (Nakuha ang layo sa pamamagitan ng I-reset ang CSS), ang mga ito ay pare-pareho sa buong browser.
Tandaan, ang baseline estilo ay ginagamit upang itakda ang mga estilo na ay pumunta magamit disenyo-wide. hal.
html {font-size: 77%; font-pamilya: Arial, sans-serif;}
malakas, h1, h2, h3, h4, h5, h6 {font-timbang: bold;} Abstract na mga Estilo para sa mga Karaniwang mga HTML Bahagi at Karaniwang klase:
Karamihan sa mga proyekto na binubuo ng maraming mga pahina ay karaniwang HTML na mga elemento na ginagamit sa buong site, para sa eg ilang mga uri ng mga form, mga alerto at mga error, mga pasadyang mga Popup, LightBoxes atbp Dahil ang tulad ng mga bahagi ay ginagamit muli sa buong proyekto, ay maging kapaki-pakinabang na magbigay ng isang magtakda ng mga klase na nauugnay sa mga paunang-natukoy na mga estilo para sa mga bahagi at maaari mong i-save ang iyong sarili ng maraming oras.
Bukod sa pagtukoy ng mga magagamit muli kahulugan ng mga estilo para sa mga karaniwang HTML Component, maaari naming mga abstract estilo klase na nauukol sa palalimbagan, kulay o kahit na layout. Ko ang aking sarili ay may posibilidad mong gamitin ... karaniwang klase tulad ng Clearfix, Font08, FontGrey, AlignL, DisplayB atbp.
form na input {border: 0px; background: # ffffff; padding: 0px 10px; _padding: 0px 0px; taas: 26px; kulay: # 000000; linya-taas: 30px; font-size: 1.1em;}
form na textarea {border: 0px; background: # ffffff; kulay: # 000000; font-size: .9 em; linya-taas: 1.5em; overflow: makikita;}
. Fbold {font-timbang: bold; kulay: # cccccc;}
. Fgrey {kulay: # 666,666;}
. Flightgrey {kulay: # bbbbbb;}
. Clearfix {malinaw: parehong;}
. Divider {border-itaas: 1px solid # 647B06; hangganan-ilalim: 1px solid # 9CC00A; taas: 0px;}
. Displayb {display: block;}. Displayn {display: none;}
. Alignr {text-ihanay: karapatan}. Alignc {text-ihanay: center}
. Floatr {Float: karapatan;}. Floatl {Float: natitira;} Pag-aayos sa mga karaniwang quirks browser
Iba't-ibang mga browser ipatupad ang CSS code at magbigay ng iba't ibang antas ng suporta para sa mga pagtutukoy CSS. Ang resulta ng .... "Mga Browser Quirks", na namin ang mga developer ay iniwan sa pagharap sa isang bagay. Lalo na, IE6 haunts pinaka CSS coders na may deadline upang matugunan. Ang magandang balita ay karanasan ay nagdala ng sama-sama posibleng magagamit muli pag-aayos sa mga isyung ito (Kadalasan termed bilang CSS Hacks ).
Tandaan, Panatilihing mga hacks / pag-aayos na madaling gamitin
/ * Ang mga sumusunod na zoom: 1 patakaran ay partikular na para sa IE6 + IE7. * /
* Html. Clearfix,
*: Unang-anak + html clearfix sa {
zoom: 1;
} Panatilihin ang pagpipino ng iyong CSS
- Ang ugali ng re-pagbibisikleta ay hindi dumating sa iyo sa araw. Ito ay may binuo. Kaya planuhin ang iyong mga Re-Cycling. Tumungo ito sa isip na maaari mong abstract default estilo, mga palalimbagan kahulugan, Layout, HTML Sangkap Estilo atbp Subukang mag-isip nang maaga.
- Din tumingin ng bumalik sa iyong nakaraang mga proyekto, ito ay makatulong na makilala ang mga istilo na malamang mong gamitin madalas sa buong porjects. Abstract ito.
- Alisin ang anumang mga hindi nagamit na estilo. Ang pagsasanay na ito ay panatilihin ang iyong CSS framework mula sa isang karaniwang sintomas na tinatawag na "Bloating" -
- Alisin ang paulit-ulit estilo.
- Gumawa ng isang hanay ng mga estilo na ay sapat na kakayahang umangkop sa port ito sa buong proyekto.
A Look Sa CSS Frameworks
Sa wakas. Kung ikaw ay inspirasyon at balak na gamitin ang isa o higit pa ng sa CSS frameworks, Heres ay mabilis na listahan ng ilang mga tanyag na mga ....
- 960 Parilya System : Grid Ang 960 System ay isang pagsisikap upang talagusan ang daloy ng trabaho ng web pag-unlad sa pamamagitan ng pagbibigay ng mga karaniwang ginagamit na sukat, na batay sa isang lapad ng 960 pixels. May tatlong variants: 12, 16 at 24 mga hanay, na maaaring ginamit sa hiwalay o sa tandem. Iisip wala na hindi ka maaaring lumikha ng isa para sa iyong sariling madaling sapat, ang balangkas ay nagbibigay ng mga template ng grid para sa print sa PDF format, na maaaring gamitin ang isa sa dibuho ang iyong pahina designs.Bet, ito gumawa ng isang propesyonal na impression, kung dalhin ka ng ilang mga sheet kapag pumunta ka sa isang client para sa mga pangangailangan ng pagtitipon ng UI. Nagbibigay din ito ng mga pangunahing mga template ng grid para sa mga popular na disenyo software tulad ng Paputok, Flash, InDesign, ilustrador, Photoshop, Visio, atbp pagbibigay ng isang "starter para sa sampung" upang simulan ang iyong trabaho sa disenyo.
- Magplano : magplano nagbibigay nang tiyakan naiuri file CSS sa para Resets, Grids, Forms, Print, palalimbagan, plugin para sa mga pindutan, ang mga tab at sprites atbp Ito ay nagbibigay din ng suporta para sa IE bilang isang hiwalay na isama.
- SenCSs : Hindi tulad ng sa itaas dalawang, SenCSs (malinaw kahulugan), ay hindi magkaroon ng CSS na kahulugan para sa Layout. Ang isama ang mga font, paddings, margin, mga talahanayan, listahan, header, blockquotes, mga form at higit pa.
- BlueTrip : nito sa orihinal na paghahabol sa katanyagan ay na, ito ay isang kumbinasyon ng mga ang pinakamahusay na mga tampok na ibinigay sa pamamagitan ng iba pang mga frameworks iba tulad ng Blue print, Trip oli ... mula sa kung saan ito ay makakakuha ng ang pangalan nito. Nito hanay ng tampok na kabilang sa 24-haligi grid, mga palalimbagan estilo, sa orm estilo, print, pindutan atbp
- Yui Grids : nagdala sa iyo sa pamamagitan ng sa Yahooo Developer Network, ay sumusuporta sa mga likido-lapad (100%) layout pati na rin ang mga preset nakapirming-lapad ng layout sa 750px, 950px, 974px, at ang kakayahan upang madaling-customize sa anumang numero. Bilang maaari mong makita, nito technically lamang ang layout Component. Yui din na ibinigay sa HTML / CSS na mga hanay para sa iba pang mga sangkap ng pahina
- YAML (Ngunit isa pang Multicolumn Layout)
- Emastic
Tandaan, ang paggamit ng frameworks CSS ay hindi magpahiwatig na ikaw ay tamad na lumikha ng isa sa iyong sariling ... Ito ay nagpapahiwatig na ikaw ay matalino upang matuto mula sa mga iba sa karanasan at mga pagkakamali, makatipid ng oras at dagdagan produktibo!!!!
