《高效整潔css代碼原則（efficient and clean css code principle）》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、高效整潔css代碼原則（EfficientandcleanCSScodeprinciple）EfficientandcleanCSScodeprinciples(upanddown)CSSitisnotdifficult,butinlargeprojects,itbecomesdifficulttomanage,especiallythedifferentpeopleintheCSSwritingstyleisslightlydifferent,theteamisevenmoredifficulttocommunicate,it

2、summarizessomehowtoachievetheCSScodeprinciple,neat:1.usingReset,butnotglobalResetThedefaultattributesofdifferentbrowserelementsaredifferent.UsingResetcanresetsomeofthedefaultattributesofbrowserelementstoachievebrowsercompatibility.Butnotice,pleasedon'tuseglobalReset:

3、*{margin:0;padding:0;}Thisisnotjustbecauseit'sslowandinefficient,butitalsocausessomeunnecessaryelementstoresetthemarginsandmargins.Inthisrecommendation,werefertothepracticesofYUIResetandEricMeyer.Clearandmargin**//**Body,H1,H2,H3,H4,H5,H6,HR,p,Blockquote,structuralel

4、ements/**/structuralelementsDL,DT,DD,UL,ol,Li,list/elementslistelements.Pre,textformatting/elementstextformatelements.Form,fieldset,legend,button,input,textarea,form/elementsformelements.Th,TD,table/elementsformelements.Img/*imgelements*/{pictureelementBorder:mediumn

5、one;Margin:0;Padding:0;}Setthedefaultfont**//**Body,button,input,select,textarea{Font:12px/1.5'song',Tahoma,Srial,Helvetica,sans-serif;}H1,H2,H3,H4,H5,H6{font-size:100%;}Em{font-style:normal;}Theelementsofthelist**//**resetUL,ol{list-style:none}Reset/**ahyperlinkelem

6、ent**/A{text-decoration:none;color:#333;}A:hover{text-decoration:underline;color:#F40;}Reset/**pictureelement**/Img{border:0px;}Resetthetableelement**//**Table{border-collapse:collapse;border-spacing:0;}2.goodnaminghabitsNodoubt,messyornosemanticnamingcode,whowillbec

7、razytosee.Justlikethiscode:.aaabb{margin:2px;color:red;}Idon'tthinkevenbeginnerscannameaclassinarealproject,buthaveyoueverthoughtthatit'salsoproblematic?:

MynameisWiky

8、enthestylewillbechanged:.red{color:bule;}Thiskindofnamingcanbeconfusing,andthesamesidebarcalled.LeftBarcanalsobetroublesomeifyounee