Խմբի բազմակի CSS ընտրիչները բարելավելու բեռի արագությունը
Արդյունավետությունը կարեւոր գործոն է հաջողված կայքում: Այդ կայքը պետք է լինի արդյունավետ, թե ինչպես է այն օգտագործում պատկերները առցանց : Սա կօգնի ապահովել, որ կայքը լավ է կատարում այցելուների համար եւ արագորեն իրենց սարքերի վրա բեռնում : Արդյունավետությունը պետք է նաեւ ձեր ամբողջ գործընթացի մի մասն է, որն օգնում է ձեզ պահել կայքի առաջընթացը ժամանակին եւ բյուջե:
Արդյունքում, արդյունավետությունը դերակատարում է դարձնում կայքի ստեղծման եւ երկարաժամկետ հաջողության բոլոր ասպեկտներում, այդ թվում նաեւ այն ոճերում, որոնք գրված են այդ կայքի CSS թերթիկների համար: Լինելով ստեղծագործելու ունակություն, CSS- ի մաքուր ֆայլերը իդեալական են, եւ այն միջոցներից մեկը, որը դուք կարող եք հասնել, միավորում է բազմաթիվ CSS ընտրողներ:
Խմբի ընտրողներ
Երբ դուք դասավորեք CSS ընտրողներին , նույն ոճերը կիրառեք մի քանի տարրեր, առանց ոճի թերթիկի ոճերի կրկնելու: Երկու կամ երեք կամ ավելի CSS կանոններ ունենալու փոխարեն, բոլորն էլ նույն բանն են անում (օրինակ, որոշ բաների գույնը սահմանել), դուք ունեք մեկ CSS կանոն, որն իրականացնում է ձեր էջը:
Կան մի շարք պատճառներ, թե ինչու է այս «ընտրողների խումբը» օգտվում էջից: Առաջին անգամ, ձեր ոճը ավելի փոքր կլինի եւ բեռնեք ավելի արագ: Ճիշտ է, ոճի թերթերը հիմնական մեղավորներից չեն, երբ խոսքը վերաբերում է դանդաղ բեռնված կայքերին: CSS- ի ֆայլերը տեքստային ֆայլեր են, այնպես որ, նույնիսկ իսկապես երկար CSS թերթիկները փոքր են, ֆայլի չափը իմաստուն, երբ unoptimized պատկերների համեմատ: Այնուամենայնիվ, ամեն մի քիչ ակնկալում է, եւ եթե կարող եք սափրել ձեր CSS- ի որոշ չափսերը եւ բեռնաթափել էջերը, որոնք ավելի արագ են, դա միշտ էլ լավ բան է:
Ընդհանուր առմամբ, վայրերում միջին բեռնվածության արագությունը 3 վայրկյանից պակաս է, 3-ից 7 վայրկյան միջին է, իսկ ավելի քան 7 վայրկյանը պարզապես դանդաղ է: Այս ցածր թվերը նշանակում են, որ դրանք հասնելու համար ձեր կայքում, դուք պետք է անեք այն ամենը, ինչ կարող եք: Սա է պատճառը, որ դուք կարող եք օգնել ձեր կայքի արագ օգտագործմամբ խմբավորված CSS ընտրողներին:
Ինչպես խմբագրել CSS սելեկտորները
CSS սելեկտորները խմբագրել միասին ձեր ոճաթերթում, օգտագործում եք ստորակետեր, բազմակի խմբավորված ընտրողների ոճով առանձնացնելու համար : Ստորեւ օրինակին ոճը ազդում է p եւ div տարրերին.
div, p {գույնը `# f00; }Կոմպլեկտը հիմնականում նշանակում է «եւ»: Այսպիսով այս ընտրողը վերաբերում է բոլոր պարբերության տարրերին եւ բոլոր բաժանման տարրերին: Եթե ստորակետը բացակայում էր, ապա այն կդառնար բոլոր ստորի տարրերը, որոնք բաժանման երեխա են: Դա շատ տարբեր տեսակի ընտրություն է, ուստի այս ստորակետը իսկապես փոխում է ընտրության իմաստը:
Ցանկացած ընտրության ձեւը կարող է խմբավորվել ցանկացած այլ ընտրողի հետ: Այս օրինակում դասի ընտրողը խմբավորված է ID ընտրիչով.
p.red, #sub {color: # f00; }Այսպիսով, այս ոճը կիրառվում է «կարմիր» դասի հատկանիշով ցանկացած կետի, եւ ցանկացած տարր (քանի որ մենք չենք նշում, ինչ տեսակի), որն ունի «ենթաբաժնում» ID հատկանիշ:
Դուք կարող եք միավորել ընտրողների ցանկացած քանակի միասին, ներառյալ ընտրողներ, որոնք միայնակ բառեր են եւ ընտրված ընտրողներ: Այս օրինակը ներառում է չորս տարբեր ընտրողներ.
p, .red, #sub, div ա: հղում {գույնը `# f00; }Այսպիսով, այս CSS կանոնը վերաբերում է հետեւյալը.
- Ցանկացած պարբերության տարր
- «Կարմիր» դասի ցանկացած տարր
- Ցանկացած տարր, որը ենթակա է «ենթաբաժնի»
- Անբաժանելի տարրերի «բաժանումը» կեղծ դասը, որը բաժանման կողմնակիցն է:
Այդ վերջին ընտրիչը բարդ ընտրություն է: Դուք կարող եք տեսնել այն հեշտությամբ զուգակցված մյուս սելեկտորների հետ այս CSS կանոնում: Այս կանոնով մենք սահմանում ենք այս 4 ընտրիչի # f00 գույնը (որը կարմիր), որը նախընտրելի է գրել 4 առանձին ընտրիչ `նույն արդյունքի հասնելու համար:
Սելեկտորների խմբավորման մեկ այլ օգուտ այն է, որ եթե դուք պետք է փոփոխություն կատարեք, ապա դուք կարող եք խմբագրել մեկ CSS կանոն, բազմակի փոխարեն: Սա նշանակում է, որ այս մոտեցումը ձեզ փրկում է էջի քաշը եւ ժամանակը, երբ խոսքը վերաբերում է կայքի ապագայում:
Ցանկացած ընտրող կարող է խմբավորված լինել
Ինչպես տեսնում եք վերոնշյալ օրինակներից, ցանկացած վավեր ընտրող կարող է տեղադրվել խմբի մեջ, եւ բոլոր տարրերը, որոնք համապատասխանում են բոլոր խմբավորված տարրերին, նույն ոճն են, որոնք հիմնված են այդ ոճի գույքի վրա:
Որոշ մարդիկ նախընտրում են ցուցակել տարրերը առանձին տողերում, որոնք կարդալու համար կարդալու համար: Կայքի տեսքը եւ բեռի արագությունը մնում են նույնը: Օրինակ, կարող եք միավորել ոճերը, ստորակետներով բաժանված մեկ ոճի գույքի մեկ կոդով:
th, td, p.red, div # firstred {գույնը `կարմիր; }
կամ կարող եք հստակության համար ցուցադրել ոճերի անհատական գծերը:
րդ,
td,
p.red,
div # firstred
{
գույնը `կարմիր;
}
Յուրաքանչյուր մեթոդ դուք օգտագործում եք մի քանի CSS ընտրողներ խմբավորելու համար, արագացնում է ձեր կայքը եւ դարձնում ավելի հեշտ կառավարել ոճերի երկարաժամկետ կառավարումը:
Իրական հոդվածը Ջենիֆեր Քրինինն է: Փոփոխված է Ջերեմի Գիրարդը, 5/8/17 թ .: