బహుళ CSS సెలెక్టర్లు గ్రూపింగ్

లోడ్ వేగం వేగవంతం గ్రూప్ బహుళ CSS సెలెక్టర్లు

విజయవంతమైన వెబ్ సైట్ లో సమర్ధత ఒక ముఖ్య కారకం. ఈ సైట్ ఆన్లైన్లో చిత్రాలను ఎలా ఉపయోగిస్తుందో దానిలో సమర్థవంతంగా ఉండాలి. ఇది సందర్శకులకు సైట్ బాగా పని చేస్తుంది మరియు వారి పరికరాల్లో వేగంగా లోడ్ అవుతుందని ఇది నిర్ధారిస్తుంది. సమర్థత మీ మొత్తం ప్రక్రియలో భాగంగా ఉండాలి, సమయం మరియు బడ్జెట్ పై సైట్ యొక్క పురోగతిని ఉంచడానికి మీకు సహాయం చేస్తుంది.

అంతిమంగా, సైట్ యొక్క CSS షీట్లు కోసం వ్రాసిన శైలులు సహా, వెబ్సైట్ యొక్క సృష్టి మరియు దీర్ఘకాలిక విజయం యొక్క అన్ని అంశాలలో సామర్థ్యాన్ని ఒక పాత్ర పోషిస్తుంది. లీన్, క్లీనర్ CSS ఫైళ్ళను సృష్టించడం అనేది ఆదర్శంగా ఉంటుంది, మరియు ఈ సాధనాలను మీరు సాధించగలగడానికి ఇది ఒకటి.

గ్రూపింగ్ సెలెక్టర్లు

మీరు సమూహ CSS సెలెక్టర్లు , మీరు మీ శైలి షీట్ శైలులు పునరావృతం లేకుండా అనేక అంశాలను అదే శైలులు దరఖాస్తు చేసినప్పుడు. బదులుగా రెండు లేదా మూడు లేదా మరింత CSS నియమాలు కలిగి, ఇవన్నీ ఇదే చేయండి (ఉదాహరణకు, ఏదో ఎరుపు రంగు సెట్), మీరు మీ పేజీ కోసం సాధించడానికి ఇది ఒక సింగిల్ CSS పాలన కలిగి.

ఈ "సెలెక్టర్లు యొక్క సమూహం" ప్రయోజనం ఎందుకు అనేక కారణాలు ఉన్నాయి. ముందుగానే, మీ శైలి షీట్ చిన్నదిగా ఉంటుంది మరియు త్వరగా లోడ్ అవుతుంది. ఇది లోడ్ సైట్లు నెమ్మదిగా వచ్చినప్పుడు శైలి షీట్లు ప్రధాన నేరస్థుల్లో ఒకరుగా లేవు. CSS ఫైళ్లు టెక్స్ట్ ఫైళ్లు, కాబట్టి కూడా నిజంగా పొడవైన CSS షీట్లు చిన్నవిగా ఉంటాయి, ఫైలు పరిమాణం WISE, unoptimized చిత్రాలు పోలిస్తే. ఇప్పటికీ, ప్రతి చిన్న బిట్ గణనలు, మరియు మీరు మీ CSS యొక్క కొంత పరిమాణం గొరుగుట మరియు చాలా వేగవంతమైన పేజీలను లోడ్ చేస్తే, ఇది ఎల్లప్పుడూ మంచిది.

సాధారణంగా, సైట్లు కోసం సగటు కంటే తక్కువ వేగం 3 సెకన్లు కంటే తక్కువ; 3 నుండి 7 సెకన్లు సగటున, మరియు 7 కంటే ఎక్కువ సెకన్లు చాలా నెమ్మదిగా ఉంటుంది. ఈ తక్కువ సంఖ్యలో, మీ సైట్ తో వాటిని సాధించడానికి, మీరు చెయ్యవచ్చు ప్రతిదీ మీరు అవసరం! మీరు సమూహమైన CSS సెలెక్టర్లు ఉపయోగించి మీ సైట్ వేగవంతమైన ఉంచడానికి ఎందుకు ఈ ఉంది.

ఎలా గ్రూప్ CSS సెలెక్టర్లు కు

మీ శైలి షీట్లో కలిసి CSS సెలెక్టర్లు సమూహించడానికి, మీరు శైలిలో బహుళ సమూహం సెలెక్టర్లు వేరు కామాలతో ఉపయోగిస్తారు . క్రింద ఉన్న ఉదాహరణలో, శైలి p మరియు div మూలకాన్ని ప్రభావితం చేస్తుంది:

div, p {color: # f00; }

కామా ప్రాథమికంగా అర్థం "మరియు". కాబట్టి ఈ సెలెక్టర్ అన్ని పేరా అంశాలు మరియు అన్ని విభాగ అంశాలకు వర్తిస్తుంది. కామాకు తప్పిపోయినట్లయితే, అది బదులుగా ఒక విభాగం యొక్క పిల్లల అన్ని పేరా మూలకాలుగా ఉంటుంది. సెలెక్టర్ చాలా భిన్నంగా ఉంటుంది, కాబట్టి ఈ కామా నిజంగా సెలెక్టర్ యొక్క అర్ధాన్ని మార్చదు!

సెలెక్టర్ యొక్క ఏదైనా రూపం ఏదైనా ఇతర సెలెక్టర్లతో సమూహం చేయబడుతుంది. ఈ ఉదాహరణలో, తరగతి సెలెక్టర్ ఒక ఐచ్చిక సెలెక్టర్తో సమూహం చేయబడుతుంది:

p.red, #sub {color: # f00; }

కాబట్టి ఈ శైలి "ఎరుపు" యొక్క తరగతి లక్షణంతో ఏ పేరాకి వర్తిస్తుంది మరియు "సబ్" యొక్క ID లక్షణాన్ని కలిగి ఉన్న ఏదైనా మూలకం (ఏ విధమైన రకాన్ని తెలియదు నుండి).

ఏకీకృత పదాలు మరియు కంప్యుడ్ సెలెక్టర్లు అని సెలెక్టర్లు సహా మీరు ఏ సంఖ్య సెలెక్టర్లు సమూహాన్ని చేయవచ్చు. ఈ ఉదాహరణలో నాలుగు వేర్వేరు సెలెక్టర్లు ఉన్నాయి:

p, .red, #sub, div a: లింక్ {color: # f00; }

సో ఈ CSS నియమం క్రింది వర్తిస్తుంది:

• ఏదైనా పేరా మూలకం
• "ఎరుపు"
• "సబ్" యొక్క ID తో ఏదైనా మూలకం
• విభజన యొక్క దిగ్గజాలు అయిన యాంకర్ మూలకాల యొక్క "లింక్" సూడో తరగతి.

చివరి సెలెక్టర్ ఒక సమ్మేళనం సెలెక్టర్. మీరు సులభంగా ఈ CSS నియమావళిలో ఇతర సెలెక్టర్లు కలిపి చూడగలరు. ఈ నియమంతో, మేము ఈ 4 సెలెక్టర్లు నందు # f00 (ఎరుపు రంగు) యొక్క రంగును ఏర్పరుచుకుంటూ ఉంటారు, ఇది అదే ఫలితాన్ని సాధించడానికి 4 వేర్వేరు సెలెక్టర్లు వ్రాయడం ఉత్తమం.

గ్రూపింగ్ సెలెక్టర్లు మరొక ప్రయోజనం మీరు ఒక మార్పు చేయవలసి ఉంటే, మీరు బహుళ వాటిని బదులుగా ఒక సింగిల్ CSS పాలన సవరించవచ్చు. ఈ విధానం మీరు భవిష్యత్తులో సైట్ నిర్వహించడానికి వచ్చినప్పుడు పేజీ బరువు మరియు సమయం ఆదా అర్థం.

ఏదైనా సెలెక్టర్ గుంపు చేయబడవచ్చు

పై ఉదాహరణల నుండి మీరు చూడగలిగినట్లుగా, ఏదైనా చెల్లుబాటు అయ్యే సెలెక్టర్ ఒక గుంపులో ఉంచవచ్చు మరియు అన్ని సమూహం అంశాలతో సరిపోయే పత్రంలోని అన్ని మూలకాలు ఆ శైలి లక్షణం ఆధారంగా ఒకే శైలిని కలిగి ఉంటాయి.

కొందరు వ్యక్తులతో సమూహ మూలకాలు ప్రత్యేక లైన్లలో కోడ్లో స్పష్టత కోసం జాబితా చేయడాన్ని ఇష్టపడతారు. వెబ్ సైట్లో మరియు లోడ్ వేగంతో ఇది కనిపిస్తుంది. ఉదాహరణకు, మీరు కోడ్ యొక్క ఒక వరుసలో ఒక శైలి ఆస్తికి కామాలతో వేరు చేయబడిన శైలులను మిళితం చేయవచ్చు:

th, td, p.red, div # మొదటిది {రంగు: ఎరుపు; }

లేదా మీరు స్పష్టత కోసం వ్యక్తిగత పంక్తులపై శైలులను జాబితా చేయవచ్చు:

వ,
TD,
p.red,
div # firstred
{
రంగు: ఎరుపు రంగు;
}

మీరు బహుళ CSS సెలెక్టర్లు మీ సైట్ వేగవంతం మరియు శైలులు దీర్ఘకాలిక నిర్వహించడానికి సులభంగా సమూహం ఉపయోగించడానికి పద్ధతి.

జెన్నిఫర్ క్రిన్ని రచించిన అసలు వ్యాసం. జెరెమీ గిరార్డ్ చేత 5/8/17 న సవరించబడింది.