माझ्या Best Practices – CSS
1. प्रस्तावना
आजकाल CSS चा पुरेपूर वापर होत नाही. Angular/React/Vue/... डेव्हलपर्स आणि UI डिझायनर्स यांच्यात एक दरी आहे.
UI डिझायनर तीस <div> एकमेकांत कोंबतो आणि त्यांच्यावर चाळीस CSS classes लावतो, तर Angular dev दर दोन आठवड्यांनी एखाद्या नव्या lib वर भाळतो – जरी
त्याचे dependency hell कधीच npm i --force शिवाय build होणे बंद झाले असले, कारण peer dependencies आपसात भिडल्या आहेत. TypeScript च्या चाहत्याला CSS आणि HTML मध्ये फारसा रस नसतो. अगदी साध्या inputs
साठीही त्याला Material लागते, कारण नाहीतर validation जमणार नाही अशी त्याला भीती वाटते. आणि चाकाचा पुन्हा शोध लावण्यात वेळ घालवण्याची तर त्याची मुळीच इच्छा नसते. Library ज्या requirement ला cover करत नाही,
अशी पहिलीच requirement आली की वाचवलेला सगळा वेळ पुन्हा वाया जातो आणि तो त्या lib चे GitHub issues वाचत बसलेला दिसतो, हे त्याच्या लक्षातच येत नाही.
Fullstack project मधील डेव्हलपर म्हणून frontend designer चे कौशल्य दाखवण्याची संधी क्वचितच मिळते. Screen mocks Figma मध्ये मिळतात आणि ते हुबेहूब तसेच बनवावे लागतात. अशा प्रकारच्या बहुतेक frontend developers ना हेच माहीत नसते की CSS च्या एकाच ओळीने responsive layout तयार करता येतो. CSS पूर्वीपेक्षा कितीतरी अधिक सामर्थ्यवान आहे. JS style hacks, असंख्य media queries आणि IE 8 workarounds चे दिवस संपले. हुर्रे!
2. अगदी मधोमध
Interview मध्ये हे नेहमीच आवडले असे नाही, पण मला यात खूप मजा यायची: frontend मध्ये तुम्ही चांगले आहात का, या प्रश्नाचे उत्तर मी अनेकदा असे द्यायचो – “अरे हो. मी एक <div> vertically center करू शकतो.”
एखादा div center करणे कुप्रसिद्धपणे अवघड आहे.
आता नाही:
.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. पेज लेआउट
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}6. साइडबार
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}