CSS సెలెక్టర్లు కోసం కామా ఏమిటి?

ఎందుకు సాధారణ కామా కోడింగ్ను సులభతరం చేస్తుంది

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

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

అవును, CSS ఫైళ్లు సుదీర్ఘ పొందవచ్చు. ఇది సుదీర్ఘ CSS ఫైల్ (ఇది నిజంగా కేవలం ఒక టెక్స్ట్ పత్రం ఎందుకంటే) చాలా చిన్నదిగా ఉంటుంది ఎందుకంటే ఇది, సైట్ పనితీరు మరియు డౌన్లోడ్ వేగం విషయానికి వస్తే ఇది ఒక పెద్ద సమస్య కాదు. అయినప్పటికీ, పేజీ వేగం వచ్చినప్పుడు ప్రతి చిన్న బిట్ గణనలు, మీరు మీ శైలి షీట్ లీన్ను చేయగలిగితే, అది మంచి ఆలోచన. "కామా" మీ స్టైల్ షీట్లో చాలా సులభంగా రాగలదు.

కామాలతో మరియు CSS

CSS సెలెక్టర్ సింటాక్స్లో కామా ఎలా పాత్ర పోషిస్తుందో మీరు ఆలోచిస్తున్నారా. వాక్యాల మాదిరిగా, కామా అనేది స్పష్టత-కాదు కోడ్-కాదు వేరుచేస్తుంది. ఒక CSS సెలెక్టర్లో కామా అనేది ఒకే శైలులో పలు సెలెక్టర్లు వేరు చేస్తుంది.

ఉదాహరణకు, క్రింద కొన్ని CSS చూద్దాం.

th {color: red; }
td {color: red; }
p.red {color: red; }
div # firstred {color: red; }

ఈ వాక్యనిర్మాణంతో, మీరు ట్యాగ్ ట్యాగ్లు, td ట్యాగ్లు, పేపర్ ట్యాగ్లను తరగతి ఎరుపుతో, మరియు ID తో ఉన్న DIV ట్యాగ్ను స్టైల్ కలర్ ఎరుపు కలిగి ఉండాలని కోరుకున్నారని చెపుతున్నారు.

ఈ ఖచ్చితంగా ఆమోదయోగ్యమైన CSS, కానీ ఈ విధంగా రాయడం రెండు ముఖ్యమైన లోపాలు ఉన్నాయి:

• భవిష్యత్తులో, మీరు ఈ లక్షణాల యొక్క ఫాంట్ రంగును నీలంకు మార్చాలని నిర్ణయించుకుంటే, మీ శైలి షీట్లో మీరు ఆ మార్పును నాలుగు సార్లు మార్చాలి.
• ఇది మీకు అవసరం లేని మీ శైలి షీట్కు అదనపు అక్షరాలను చాలా జోడిస్తుంది. ఈ 4 శైలులు ఓవర్ కిల్ లాగా కనిపించకపోవచ్చు, కానీ మీరు మీ మొత్తం స్టైల్ షీట్లో ఈ విధంగా కొనసాగితే, పంక్తులు జోడించబడతాయి మరియు షీట్ చాలా పెద్దదిగా ఉండాలి, ఇది చాలా పెద్దదిగా ఉండాలి.

ఈ లోపాలను నివారించడానికి మరియు మీ CSS ఫైల్ను క్రమబద్ధీకరించడానికి, మేము కామాలను ఉపయోగించి ప్రయత్నిస్తాము.

ప్రత్యేక సెలెక్టర్లు కోసం కమాస్ ఉపయోగించి

బదులుగా 4 ప్రత్యేక CSS సెలెక్టర్లు మరియు 4 నియమాలు రాయడం, మీరు కామాతో వ్యక్తిగత సెలెక్టర్లు వేరు ద్వారా ఒక నియమం ఆస్తి అన్ని ఈ శైలులు మిళితం చేయవచ్చు. ఎలా చేయాలో ఇక్కడ ఉంది:

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

కామా పాత్ర ప్రధానంగా పదం "మరియు" సెలెక్టర్ లోపల పనిచేస్తుంది. కాబట్టి ఇది h h ట్యాగ్లు మరియు td ట్యాగ్లు మరియు పేరా ట్యాగ్లను వర్గ ఎరుపుతో మరియు డిఐడి ట్యాగ్కు ID తో ముందుగా వర్తిస్తుంది. అది మనకు ముందు ఉన్న సరిగ్గా ఉంది, కానీ బదులుగా 4 CSS నియమాలు అవసరం, మేము బహుళ సెలెక్టర్లు ఒకే నియమం కలిగి. ఈ సెలెక్టర్లో కామా ఏమి చేయాలో, ఇది మాకు ఒక నియమావళిలో బహుళ సెలెక్టర్లు ఉండటానికి అనుమతిస్తుంది.

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

సింటాక్స్ వేరియేషన్

కొందరు వ్యక్తులు ప్రతి లైన్ సెలెక్టర్ను దాని స్వంత లైనులో వేరు చేయడం ద్వారా CSS ను మరింత స్పష్టమైనదిగా ఎంచుకుంటారు, బదులుగా పైన పేర్కొన్న ఒక వాక్యంలో అన్నింటినీ రాయడం. ఇలా జరుగుతుంది:

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

మీరు ప్రతి సెలెక్టర్ తర్వాత కామాను ఉంచుతామని గమనించండి మరియు దాని స్వంత పంక్తిలో తదుపరి సెలెక్టర్ను బ్రేక్ చేయడానికి "ఎంటర్" ఉపయోగించండి. మీరు ఫైనల్ సెలెక్టర్ తర్వాత కామాను జోడించరు.

మీ సెలెక్టర్లు మధ్య కామాలను ఉపయోగించడం ద్వారా, భవిష్యత్లో అప్డేట్ చేయడం సులభం కాగల కాంపాక్ట్ స్టైల్ షీట్ను సృష్టించి, ఈరోజు చదివి వినిపించడం తేలిక!

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