मेरी 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 ठीक से नहीं कर पाएगा। और पहिये को दोबारा ईजाद करके समय गँवाना तो वह बिल्कुल नहीं चाहता। उसे यह एहसास नहीं होता कि जैसे ही
कोई ऐसी requirement आती है जिसे library cover नहीं करती, वह बचाया हुआ सारा समय फिर से गँवा देता है और खुद को उस 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;
}