名站网址导航为大家提供关于网站网页设计设计相关的的教程知识。
- 本篇文章具体介绍如下
我们罗列了十几条相关的知识与注意点，大家可以系统的探讨一下，让我们编写的Web页面打开更加流畅。
请不要告诉我，你看不懂E文，只是你不愿意看！！！
1、howthestylesystembreaksuprules
Thestylesystembreaksrulesupintofourprimarycategories.Itiscriticaltounderstandthesecategories,astheyarethefirstlineofdefenseasfarasrulematchingisconcerned.Iusethetermkeyselectorintheparagraphsthatfollow.Thekeyselectorisdefinedtobetherightmostoccurrenceofanidselector,aclassselector,oratagselector.
1.1、IDRules
ThefirstcategoryconsistsofthoserulesthathaveanIDselectorastheirkeyselector.
button#backButton{}/*ThisisanID-categorizedrule*/
#urlBar[type="autocomplete"]{}/*ThisisanID-categorizedrule*/
treeitem>treerow>treecell#myCell:active{}/*ThisisanID-categorizedrule*/
1.2、ClassRules
Ifarulehasaclassspecifiedasitskeyselector,thenitfallsintothiscategory.
button.toolbarButton{}/*Aclass-basedrule*/
.fancyText{}/*Aclass-basedrule*/
menuitem>.menu-left[checked="true"]{}/*Aclass-basedrule*/
1.3、TagRules
IfnoclassorIDisspecifiedasthekeyselector,thenthenextpotentialcategoryforaruleisthetagcategory.Ifarulehasatagspecifiedasitskeyselector,thentherulefallsintothiscategory.
td{}/*Atag-basedrule*/
treeitem>treerow{}/*Atag-basedrule*/
input[type="checkbox"]{}/*Atag-basedrule*/
1.4、UniversalRules
Allotherrulesfallintothiscategory.
:table{}/*Auniversalrule*/
[hidden="true"]{}/*Auniversalrule*/
*{}/*Auniversalrule*/
tree>[collapsed="true"]{}/*Auniversalrule*/
2、howtheStyleSystemMatchesRules
Thestylesystemmatchesarulebystartingwiththerightmostselectorandmovingtotheleftthroughtherule'sselectors.Aslongasyourlittlesubtreecontinuestocheckout,thestylesystemwillcontinuemovingtotheleftuntiliteithermatchestheruleorbailsoutbecauseofamismatch.
Yourfirstlineofdefenseistherulefilteringthatoccursbasedonthetypeofthekeyselector.Thepurposeofthiscategorizationistofilteroutrulessothatyoudon'tevenhavetowastetimetryingtomatchthem.Thisisthekeytodramaticallyincreasingperformance.Thefewerrulesthatyouevenhavetocheckforagivenelement,thefasterstyleresolutionwillbe.Asanexample,ifyourelementhasanID,thenonlyIDrulesthatmatchyourelement'sIDwillbechecked.Onlyclassrulesforaclassfoundonyourelementwillbechecked.Onlytagrulesthatmatchyourtagwillbechecked.Universalruleswillalwaysbechecked.
3、GuidelinesforEfficientCSS
3.1、AvoidUniversalRules!
Makesurearuledoesn'tendupintheuniversalcategory!
3.2、Don'tqualifyID-categorizedruleswithtagnamesorclasses
IfyouhaveastylerulethathasanIDselectorasitskeyselector,don'tbotheralsoaddingthetagnametotherule.IDsareunique,soyou'reslowingdownthematchingfornorealreason.
BAD-button#backButton{}
BAD-.menu-left#newMenuIcon{}
GOOD-#backButton{}
GOOD-#newMenuIcon{}
3.3、Don'tqualifyclass-categorizedruleswithtagnames
Similartotheruleabove,allofourclasseswillbeunique.Theconventionyoushoulduseistoincludethetagnameintheclassname.
BAD-treecell.indented{}
GOOD-.treecell-indented{}
3.4、Trytoputrulesintothemostspecificcategoryyoucan!
Thesinglebiggestcauseofslowdowninoursystemisthatwehavetoomanyrulesinthetagcategory.Byaddingclassestoourelements,wecanfurthersubdividetheserulesintoclasscategories,andthenwenolongerwastetimetryingtomatchasmanyrulesforagiventag.
BAD-treeitem[mailfolder="true"]>treerow>treecell{}
GOOD-.treecell-mailfolder{}
3.5、Avoidthedescendantselector!
ThedescendantselectoristhemostexpensiveselectorinCSS.Itisdreadfullyexpensive,especiallyifaruleusingtheselectorisinthetagoruniversalcategory.Frequentlywhatisreallydesiredisthechildselector.TheuseofthedescendantselectorisbannedinUICSSwithouttheexplicitapprovalofyourskin'smoduleowner.
BAD-treeheadtreerowtreecell{}
BETTER,BUTSTILLBAD(seenextguideline)-treehead>treerow>treecell{}
3.6、Tag-categorizedrulesshouldnevercontainachildselector!
Avoidusingthechildselectorwithtag-categorizedrules.Youwilldramaticallyincreasethematchingtime(especiallyiftheruleislikelytobematchedmoreoftenthannot)foralloccurrencesofthatelement.
BAD-treehead>treerow>treecell{}
BEST-.treecell-header{}
3.7、Questionallusagesofthechildselector!
Becarefulaboutusingthechildselector.Ifyoucancomeupwithawaytoavoidhavingtouseit,doso.Inparticular,thechildselectorisfrequentlyusedwithRDFtreesandmenuslikeso.
BAD-treeitem[IsImapServer="true"]>treerow>.tree-folderpane-icon{}
RememberthatattributesfromRDFcanbeduplicatedinatemplate!TakeadvantageofthisfacttoduplicateRDFpropertiesonchildXULelementsthatwishtochangebasedoffthatattribute.
GOOD-.tree-folderpane-icon[IsImapServer="true"]{}
3.8、Relyoninheritance!
Learnwhichpropertiesinherit,andallowthemtodoso!WehaveexplicitlysetupXULwidgetrysothatyoucanputlist-style-image(justoneexample)orfontrulesontheparenttag,anditwillfilterintotheanonymouscontent.Youdon'thavetowastetimewritingarulethattalksdirectlytotheanonymouscontent.
BAD-#bookmarkMenuItem>.menu-left{list-style-image:url(blah);}
GOOD-#bookmarkMenuItem{list-style-image:url(blah);}
Intheaboveexample,thedesiretostyletheanonymouscontent(withoutunderstandingthatlist-style-imageinherits)resultedinarulethatwasintheclasscategory,whenthisrulereallyshouldhaveendedupbeinginthemostspecificcategoryofall,theIDcategory.
Remember,especiallywithanonymouscontent,thattheyallhavethesameclasses!Thebadruleabovecausestheiconofeverymenutobecheckedtoseeifitiscontainedinthebookmarksmenuitem.Thisishideouslyexpensive(sincetherearemanymenus);thisrulenevershouldhaveevenbeencheckedbyanymenuotherthanthebookmarksmenu.
3.9、Use-moz-image-region!
Puttingabunchofimagesintoasingleimagefileandselectingthemwith-moz-image-regionperformssignificantlybetterthanputtingeachimageintoitsownfile.
OriginalDocumentInformation－Author:Davidhyatt
好了关于网站网页设计设计相关的这篇文章就给大家介绍到这里不明白的地方给本站留言。声明，本站内容来源于互联网，如果侵犯了你的权益请联系本站删除。,网站网页设计,教程,网站网页设计制作,注意,相关,acronym标记和abbr标记的不同之处
