5 Hakbang sa Sumulat Better CSS Part II
Ito ang ikalawang bahagi ng 5 Hakbang sa Sumulat Better CSS. May sobra-sobra ng CSS Tutorials ay makukuha sa internet ngunit ang ilang mga Tutorials ay kapaki-pakinabang. Sa ganitong tutorial makikita mo ang 5 hakbang na sumulat ng mas mahusay css code para sa iyong susunod na website ng proyekto. Umaasa ako na masisiyahan ka sa ito tutorial.
1. Panatilihin ang declarations CSS sa isang linya
dapat mong laging panatilihin declarations CSS sa isang linya, ito ay tumutulong sa pagsunod sa iyong CSS file na malinis at mas maliit. Ito rin ay tumutulong upang tanggalin ang mga hindi gustong espasyo at mga karakter.
Good Code
; color : # 333333 ; background : #cccccc ; } h2 (font-size: 18px; color: # 333,333; background: # cccccc;)
Bad Code
h2 ( font-size: 18px; ; color: # 333,333; ; background: # cccccc; )
2. Pagsamahin Sangkap
Isa sa mga pinakamahusay na paraan upang i-save ang mga linya ng code ay sa pamamagitan ng pagpangkat selectors. May ilang mga halimbawa sa ibaba kung ano ako ay nagre-refer sa.
Good Code
h1, h2, H3 ( ; color : # 333 ; font-family: Arial, Helvetica, walang-serif; color: # 333; )
Bad Code
h1 ( ; color : # 333 ; font-family: Arial, Helvetica, walang-serif; color: # 333; ) h2 ( ; color : # 333 ; font-family: Arial, Helvetica, walang-serif; color: # 333; ) H3 ( ; color : # 333 ; font-family: Arial, Helvetica, walang-serif; color: # 333; )
3. Gamitin ang "margin" sa Center Layout
Maraming mga beginners sa CSS hindi malaman kung bakit hindi lang ninyo magagamit ang magpalutang: center upang makamit ang centered na epekto sa block-antas na mga sangkap. Kung ito lamang ay kadali! Sa kasamaang palad, kailangan mong gamitin.
Code
# Lalagyan ( ; /* top, bottom - and left, right*/ margin: 0 auto; / * itaas, ibaba - at sa kaliwa, kanan * / width: xxxpx; )
4. Comment iyong CSS
Ito ay isang mahusay na ideya na i-comment ang iyong code sa seksyon. Upang magdagdag ng isang puna, kailangan lang magdagdag / * sa likod ng mga puna, at * / upang isara ito, tulad ng ito:
Code
/******** CODE START HERE ********/
5. Gamitin ang CSS siksikin kasangkapan
kung hindi mo nais na basura ang iyong oras sa pagbabago ng iyong mga lumang style sheet Maaari mo lamang gamitin ang online css siksikin kasangkapan, gumawa ng mga ito ang iyong trabaho sa ilang mga segundo.
i-tsek ito online css siksikin kasangkapan ...
Css maglinis
Clean Css
Css Optimiser
Flumpcakes Css optimizer
cssdrive Css Comperasor
W3C Css Validator
Paghihinuha
Ang mga ito ay lamang ang ilan sa mga tips na makakatulong sa akin na sumulat ng mas mahusay na code. Umaasa ako na ang tutorial ay maaari ring makatulong sa iyo na sumulat ng mas mahusay at malinis ang code. Mag-apply ang mga Tips sa iyong kasalukuyan at susunod na proyekto, at ikaw ay tiyak na pahalagahan ang mga pagsisikap.
Kung Isipin mo na ang tutorial ay maaaring maging mas mahusay, Paki-share sa amin. Comment sa amin
kung nais mong makatanggap ng mas maraming Tutorials mula sa amin, mangyaring isaalang-alang-subscribe sa aming mga feed sa pamamagitan ng RSS o sa pamamagitan ng email.
Promote sa Amin
Mga Kaugnay na Akda:
kung ikaw Naging masaya pagbabasa ng artikulong ito, mangyaring tingnan ang iba pang mga kaugnay na artikulo sa ibaba:
Revell says on: Nobyembre 27, 2009 at 9:05 Said:
Hi,
Una sa lahat, nice article! May mga hindi maraming mga artikulo na ang address na nakasulat estilo ng CSS. Ako ay may ilang mga saloobin sa unang point na kahit na. Sa aking opinyon ito ay mas mahusay na gamitin ang matagal na istilo ng pagsusulat habang ang pagbuo at magkaroon ng isang script "magpaliit" ang iyong CSS kapag gumagamit ng mga ito sa isang buhay na kapaligiran.
Dave says on: Nobyembre 27, 2009 at 10:06 Said:
Ako lubos na hindi sumasang-ayon sa point 1. Kapag nakuha mo 3 declarations, 1 linya ng code ay mahusay, ngunit kapag mayroong mga 6 o 7, ito ay makakakuha ng talagang mahirap basahin.
Lahat ng na-save siguro 1KB? Hindi ako kumuha ito.
Iba Pang kaysa na ang isa, ang ilang mga disenteng mga ideya dito.
Huling blog Dave's .. 2 na dapat ay may-CMS ma-enable ang plugin para sa WordPress
Nicolo 'Fasce says on: Nobyembre 27, 2009 at 10:34 Said:
Sumasang-ayon ako sa Dave, ang point 1 ay mali, dahil lamang na kung ang trabaho mo sa isang team na ito ay mahirap na basahin ang isang code na linya.
Dapat mo ring isulat ang code sa alpabetikong kaayusan para sa parehong layunin.
EJ Semeijn says on: Nobyembre 27, 2009 at 10:57 Said:
Bakit ihinto namin ang pag-post ng mga tips na ito? Internet ay puno ng mga tips na ito basics. At ako din hindi sumasang-ayon sa # 1. Hindi nito gawin ang iyong code sa mas madaling maintindihan, ito lang ang ginagawang mas mahirap.
Aking mga tips ay ilagay sa pahina ng istraktura sa iyong CSS, gumawa ng mga seksyon para i-reset, HEADINGS, form, mga sangkap ng HTML, fonts etc na paraan ng iyong CSS ay mas madaling maunawaan.
safetycopy says on: Nobyembre 27, 2009 at 9:38 Said:
Sumasang-ayon ako na may ilang mga iba pang mga tao comments - 1 point ang halimbawa ng masamang code ay hindi masamang code - ito lang ang isang kahaliling estilo. Ang post na ito ay lamang na maging kapaki-pakinabang upang makumpleto ang Newbies at hindi namin nais upang simulan ang pagtuturo sa kanila masamang pagpapalagay na!
huling blog safetycopy ..'s Photo
Magbiro says on: Nobyembre 29, 2009 at 4:38 Said:
Ko ang lahat ng mga ito maliban sa huling isa. Hindi ko mahanap ito kapaki-pakinabang sa siksikin ang aking css, pero hindi katulad ng lahat ng mga nakaraang mga mambabasa ko ang malakas na sumasang-ayon sa point # 1. Ko na lang na nagsimula ang aking pagsulat ng CSS sa isang linya at ito ay kamangha-mangha. Mag-iskrol ay malayo nabawasan. Ako hulaan ito ay isang personal na preference. Something na tumutulong na ang editor gamitin ko wraps ang code down na sa susunod na linya ng sa gayon ay walang horizontal scroll.
Huling blog magbiro's .. gumung-gumon sa Flickr
FAQPAL says on: Nobyembre 29, 2009 at 4:06 Said:
Good tip sa beginner, hindi ko magpaliit aking alinman sa CSS, marahil ng isang mas mataas proyekto ay makikinabang mula sa minifying, ngunit ang average na site ay hindi tunay na kailangan.
Bilang malayo bilang # 1 napupunta, sa tingin ko ang paraan ng pagsasalita ay kung ano ang pagkahagis off ang mga tao, sa halip na sinasabi, "Bad Code", marahil ito ay dapat sabihin ang gusto safetycopy ay iminungkahi, "Alternatibong Code".
Huling blog FAQPAL's .. Bubble Epekto sa CSS
favSHARE says on: Nobyembre 30, 2009 at 12:49 Said:
Ang artikulong ito ay ipinamahagi sa favSHARE.net. Go at boto ito!
huling blog favSHARE's .. 25 ng Web Layout Tutorials
Jean-Patrick Smith says on: Disyembre 11, 2009 at 11:15 Said:
Ako ay karaniwang lumikha ng isang PHP file na kasama ang lahat ng aking mga css file, minifies ito, at nagdadagdag ng compression + mawalan ng bisa ang mga header.
Paraan na hindi ako may sa sumang-ayon sa point # 1 ...
Ano ang higit na mahalaga kaysa sa pagkakaroon ng lahat ng iyong mga CSS sa isang linya ay ang pagbabawas ng bilang ng mga HTTP tawag sa CSS sprites at pagsamahin ang lahat ng iyong CSS / JS sa isang file.