我们罗列了十几条相关的知识与注意点，大家可以系统的探讨一下，让我们编写的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