నా Best Practices – CSS
1. ముందుమాట
ఈ రోజుల్లో CSSను తగినంతగా వాడుకోవడం లేదు. Angular/React/Vue/... developerలకూ UI designerలకూ మధ్య పెద్ద అంతరం ఉంది.
UI designer ముప్పై <div>లను ఒకదానిలో ఒకటి పేర్చి, వాటిపై నలభై CSS classలు వేస్తారు; ఇంతలో Angular dev ప్రతి రెండు వారాలకోసారి సరికొత్త libను చూసి మురిసిపోతారు,
కానీ peer dependencyలు ఒకదానితో ఒకటి గొడవపడుతున్నందువల్ల ఆయన Dependency Hell ఎప్పటినుంచో npm i --force లేకుండా build అవ్వడం లేదు. TypeScript అభిమానికి CSS, HTML అంటే పెద్దగా పట్టదు.
అతి సాధారణమైన inputల కోసం కూడా ఆయన Material వాడాల్సిందే – లేకపోతే validation సరిగ్గా రాదేమోనని భయం. చక్రాన్ని మళ్లీ కనిపెడుతూ సమయం వృథా చేయడానికి ఎవరూ ఇష్టపడరు.
కానీ library సపోర్ట్ చేయని మొదటి అవసరం రాగానే ఆదా చేసిన సమయమంతా మళ్లీ వృథా అవుతుందని, తానే ఆ lib GitHub issueలు చదువుతూ కూర్చుంటాడని ఆయనకు తట్టదు.
Fullstack ప్రాజెక్ట్‌లో developerగా, frontend designer నైపుణ్యాలను ప్రదర్శించే అవకాశం అరుదుగానే వస్తుంది. Figmaలో screen mockupలు వస్తాయి; వాటిని యథాతథంగా తయారు చేయాలి. ఈ తరహా frontend developerలలో చాలామందికి, ఒక్క లైను CSSతోనే responsive layout తయారు చేయవచ్చని కూడా తెలియదు. CSS మునుపెన్నడూ లేనంత శక్తివంతంగా ఉంది. JS style hackలు, లెక్కలేనన్ని media queryలు, IE 8 workaroundల కాలం ముగిసింది. హుర్రే!
2. సరిగ్గా మధ్యలో
Interviewలలో ఎప్పుడూ మంచి స్పందన రాలేదు, కానీ నాకు భలే నచ్చేది: frontendలో నేను బాగా చేయగలనా అనే ప్రశ్నకు తరచూ ఇలా జవాబిచ్చేవాడిని – “ఓ, అవును. నేను ఒక <div>ను నిలువుగా మధ్యలో పెట్టగలను.”
ఒక divను మధ్యలో పెట్టడం పేరుమోసిన కష్టమైన పని.
ఇప్పుడు కాదు:
.parent {
display: grid;
place-items: center
}3. Responsive Grid
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}4. Responsive Flex
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box {
flex: 1 1 150px; /* Stretching: */
flex: 0 1 150px; /* No stretching: */
margin: 5px;
}5. పేజీ layout
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}6. సైడ్‌బార్
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}