আমার Best Practices – CSS
১. ভূমিকা
আজকাল CSS-কে যথেষ্ট কাজে লাগানো হয় না। Angular/React/Vue/...-ডেভেলপার আর UI ডিজাইনারের মধ্যে একটা বড় ফারাক তৈরি হয়েছে।
UI ডিজাইনার ত্রিশটা <div> একটার ভেতর আরেকটা গুঁজে তার ওপর চল্লিশটা CSS ক্লাস চাপিয়ে দেন, ওদিকে Angular-ডেভ প্রতি দুই সপ্তাহে সর্বশেষ লাইব্রেরি নিয়ে মেতে ওঠেন, অথচ তার Dependency
Hell অনেক আগে থেকেই npm i --force ছাড়া বিল্ড হয় না, কারণ peer dependency-গুলোর মধ্যে সংঘাত চলছে। TypeScript-ভক্তের CSS আর HTML নিয়ে তেমন মাথাব্যথা নেই। সবচেয়ে সাধারণ ইনপুটের জন্যও
তাকে Material ব্যবহার করতে হয়, কারণ তার ভয়, নইলে ভ্যালিডেশন ঠিকমতো হবে না। আর চাকা নতুন করে আবিষ্কার করে সময় নষ্ট করার তো প্রশ্নই ওঠে না। লাইব্রেরি যে প্রথম চাহিদাটা পূরণ করে না,
সেখানেই যে বাঁচানো পুরো সময়টা আবার নষ্ট হবে এবং তিনি নিজেকে লাইব্রেরির GitHub issue পড়তে আবিষ্কার করবেন – সেটা তার মাথায় আসে না।
Fullstack প্রজেক্টের ডেভেলপার হিসেবে ফ্রন্টএন্ড ডিজাইনের দক্ষতা কাজে লাগানোর সুযোগ খুব কমই মেলে। Figma-তে স্ক্রিন মকআপ হাতে আসে, আর হুবহু সেভাবেই বানাতে হয়। এ ধরনের বেশিরভাগ ফ্রন্টএন্ড ডেভেলপার জানেনই না যে মাত্র এক লাইন CSS দিয়েই একটি রেসপন্সিভ লেআউট বানানো যায়। CSS আগের যেকোনো সময়ের চেয়ে শক্তিশালী। JS দিয়ে স্টাইল হ্যাক, অসংখ্য media query আর IE 8-এর workaround-এর দিন শেষ। হুররে!
২. নিখুঁতভাবে মাঝখানে
ইন্টারভিউতে সবসময় ভালোভাবে নেওয়া হয়নি, কিন্তু আমি দারুণ উপভোগ করতাম: ফ্রন্টএন্ডে আমি ভালো কি না, এই প্রশ্নের উত্তরে আমি প্রায়ই বলতাম “ওহ হ্যাঁ। আমি একটা <div>-কে উল্লম্বভাবে মাঝখানে বসাতে পারি।”
একটি div-কে মাঝখানে বসানো কুখ্যাতভাবে কঠিন।
এখন আর নয়:
.parent {
display: grid;
place-items: center
}৩. রেসপন্সিভ Grid
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}৪. রেসপন্সিভ Flex
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box {
flex: 1 1 150px; /* Stretching: */
flex: 0 1 150px; /* No stretching: */
margin: 5px;
}৫. পেজ লেআউট
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}৬. সাইডবার
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}