কম্পোনেন্টের গায়ে margin দেবেন না

একটা কম্পোনেন্ট লাইব্রেরি সাধারণত একভাবেই ভাঙে — এক জায়গায় সুন্দর দেখায়, অন্য জায়গায় বসালেই ফাঁকা জায়গার হিসাব মেলে না।

কারণটা প্রায় সবসময় একই। কার্ডের নিজের CSS-এ margin-bottom: 24px লেখা আছে।

সমস্যাটা মালিকানার

একটা কম্পোনেন্টের ভেতরের ফাঁকা জায়গা — প্যাডিং, আইকন আর লেখার দূরত্ব, শিরোনাম আর বডির গ্যাপ — কম্পোনেন্টেরই সম্পত্তি। ওটা তার ডিজাইনের অংশ, সব জায়গায় এক থাকা উচিত।

কিন্তু কম্পোনেন্টের বাইরের ফাঁকা জায়গা তার নয়। ওটা লেআউটের সিদ্ধান্ত, আর লেআউট জানে কম্পোনেন্টটা কোথায় বসছে — গ্রিডে, সাইডবারে, নাকি ডায়ালগের ভেতরে একা। কম্পোনেন্ট সেটা জানে না, জানার কথাও না।

চাইল্ড যখন নিজের বাইরের মার্জিন নিজে ঠিক করে, তখন সে এমন একটা প্রশ্নের উত্তর দিয়ে ফেলে যেটা তাকে কেউ করেনি।

কোডে পার্থক্যটা

<!-- Card.vue -->
<template>
  <article class="mb-6 rounded-xl border p-5">
    <slot />
  </article>
</template>

<!-- ব্যবহার -->
<Card v-for="item in items" :key="item.id" />

<!-- Card.vue -->
<template>
  <article class="rounded-xl border p-5">
    <slot />
  </article>
</template>

<!-- ব্যবহার -->
<div class="flex flex-col gap-6">
  <Card v-for="item in items" :key="item.id" />
</div>

প্রথমটায় লিস্টের শেষ কার্ডের নিচেও ২৪ পিক্সেল ঝুলে থাকে, যেটা কেউ চায়নি। ঠিক করতে গিয়ে :last-child { margin-bottom: 0 } লেখা হয়, তারপর গ্রিডে বসালে আবার অন্য নিয়ম, তারপর ডায়ালগে আরেকটা। তিনটা ব্যতিক্রম লেখার পর কম্পোনেন্টটার স্পেসিং আর কেউ পড়ে বুঝতে পারে না।

দ্বিতীয়টায় ব্যতিক্রম নেই, কারণ নিয়মটাই নেই। প্যারেন্ট gap দিচ্ছে, শেষ আইটেমের পরে গ্যাপ বসে না — এটা gap-এর সংজ্ঞা, কারও লেখা নিয়ম নয়।

মার্জিন কলাপস আরেকটা কারণ

লম্বালম্বি মার্জিন পাশাপাশি বসলে দুটো যোগ হয় না, বড়টা টিকে থাকে। এটা CSS-এর পুরোনো আচরণ, ভুল নয় — কিন্তু কম্পোনেন্ট লেখার সময় এটাই সবচেয়ে বেশি বিভ্রান্ত করে।

উপরের কার্ডের margin-bottom: 24px আর নিচের কার্ডের margin-top: 16px মিলে ফাঁক হয় ২৪, ৪০ নয়। মানে আপনি যে সংখ্যাটা লিখেছেন, স্ক্রিনে সেটা নাও থাকতে পারে — নির্ভর করছে প্রতিবেশী কে।

gap কলাপস করে না। যা লিখবেন তাই পাবেন।

ভেতরের স্পেসিং অবশ্যই কম্পোনেন্টের

উল্টো দিকটাও সমান গুরুত্বপূর্ণ। কম্পোনেন্টের ভেতরের প্যাডিং প্যারেন্টের হাতে ছেড়ে দিলে একই বোতাম দশ জায়গায় দশ রকম হয়।

size একটা বন্ধ তালিকা হওয়া উচিত — তিনটা মান, তিনটাই কম্পোনেন্টের ভেতরে লেখা। বাইরে থেকে ক্লাস দিয়ে প্যাডিং বদলানো মানে তালিকার বাইরে একটা চতুর্থ সাইজ তৈরি করা, যেটা কোথাও লেখা নেই:

<UiButton size="sm" variant="primary">সংরক্ষণ করুন</UiButton>

উপরের প্রতিটা অবস্থার জন্য নিচে যে মার্কআপটা দেখাচ্ছে, সেটাই যথেষ্ট। কোনো class="px-6" নেই — কারণ দরকার হলে সেটা size-এর তালিকায় যোগ করার আলোচনা, ব্যবহারের জায়গায় চুপচাপ ওভাররাইড নয়।

পুরোনো কোডে কীভাবে ঢুকবেন

একবারে সব বদলানোর দরকার নেই। যে কম্পোনেন্টটা সবচেয়ে বেশি জায়গায় ব্যবহার হয়েছে, সেটা দিয়ে শুরু করলেই সবচেয়ে বেশি ব্যতিক্রম মুছে যায়।

কাজটা ছোট, কিন্তু ফলটা কোড কমার চেয়ে বড়। এরপর থেকে কেউ কম্পোনেন্টটা নতুন কোনো জায়গায় বসালে তাকে আর জিজ্ঞেস করতে হয় না, "এটার নিচে কি এমনিতেই ফাঁক আছে?"