مقایسه و انتخاب واحد مناسب

جمع‌بندی نهایی: کدام واحد را کِی انتخاب کنیم؟

در طول این فصل، با خانواده بزرگی از واحدهای CSS آشنا شدیم: واحدهای مطلق، نسبی، Viewport، fr، و واحدهای تخصصی زاویه، زمان و Resolution. حالا وقتشه یه جمع‌بندی عملی داشته باشیم و دقیق ببینیم در هر موقعیت واقعی، کدوم واحد انتخاب منطقی‌تریه.

یک نمای کلی از تمام واحدهایی که دیدیم

دسته	واحدها
مطلق	px، pt، pc، in، cm، mm
نسبی (فونت و والد)	%، em، rem، ex، ch
نسبی (Viewport)	vw، vh، vmin، vmax، dvw/dvh، svw/svh، lvw/lvh
تقسیم فضا در Grid	fr
زاویه، زمان، Resolution	deg/turn، s/ms، dppx

راهنمای انتخاب برای font-size

html {
  font-size: 16px;
}

h1 {
  font-size: 2rem;
}

p {
  font-size: 1rem;
}

برای اندازه فونت، در اکثر پروژه‌های واقعی rem انتخاب پیش‌فرض و توصیه‌شده‌ست؛ چون هم نسبت به تنظیمات بزرگ‌نمایی کاربر واکنش‌پذیره، و هم برخلاف em، در ساختارهای تودرتو دچار رشد تجمعی نمی‌شه (همون‌طور که در درس ۶-۲ کامل دیدیم).

راهنمای انتخاب برای Padding و Margin

.card {
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.icon-wrapper {
  padding: 4px;
}

برای فاصله‌گذاری‌های مرتبط با محتوای متنی (که باید هماهنگ با اندازه فونت رشد کنند)، rem انتخاب خوبیه. اما برای فاصله‌های خیلی کوچک و دقیق، مخصوصاً در عناصر بصری کوچک مثل آیکون‌ها، px هم انتخاب رایج و کاملاً معتبریه.

راهنمای انتخاب برای Width و ابعاد Layout

.container {
  max-width: 1200px;
  width: 90%;
}

یه الگوی بسیار رایج، ترکیب % و px با همه: عرض به‌صورت درصدی از والد تعریف می‌شه (برای انعطاف‌پذیری)، ولی با یک max-width ثابت محدود می‌شه (برای جلوگیری از خیلی پهن شدن محتوا در صفحه‌نمایش‌های بزرگ). این ترکیب رو در فصل Responsive Design بیشتر می‌بینیم.

راهنمای انتخاب برای Border

.box {
  border: 1px solid #ccc;
}

برای ضخامت Border، تقریباً همیشه px انتخاب می‌شه؛ چون این مقدار باید کاملاً ثابت و مستقل از هر عامل دیگه‌ای باشه. استفاده از واحدهای نسبی برای Border معمولاً هیچ مزیتی نداره و فقط پیچیدگی غیرضروری اضافه می‌کنه.

راهنمای انتخاب برای چیدمان کلی صفحه

.hero {
  height: 100vh;
}

.grid-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
}

برای بخش‌هایی که باید نسبت به کل صفحه‌نمایش اندازه بگیرن (مثل یک بخش Hero با ارتفاع کامل)، vh (یا نسخه‌های مدرن‌تر مثل dvh برای موبایل) مناسبه. برای تقسیم فضا بین بخش‌های یک Grid، fr بهترین انتخابه، مخصوصاً در ترکیب با یک مقدار ثابت مثل px برای بخش‌های با اندازه مشخص (مثل Sidebar).

یک جدول تصمیم‌گیری سریع

هدف	واحد پیشنهادی
اندازه فونت متن	rem
فاصله‌گذاری هماهنگ با تایپوگرافی	rem یا em
ضخامت Border و جزئیات بصری دقیق	px
عرض کلی یک Container با محدودیت	% به‌همراه max-width با px
ارتفاع یک بخش نسبت به کل صفحه‌نمایش	vh (یا dvh برای موبایل)
تقسیم فضای ستون‌ها و ردیف‌های Grid	fr
عرض یک فیلد ورودی بر اساس تعداد کاراکتر	ch
چرخش یک عنصر	deg (یا turn برای چرخش‌های ساده)
مدت Transition یا Animation	s یا ms

یک مثال واقعی و ترکیبی از یک کارت محصول

.product-card {
  width: 100%;
  max-width: 320px;
  padding: 1.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.product-card__title {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.product-card__price {
  font-size: 1rem;
  color: #2e7d32;
}

.product-card__button {
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  transition: background-color 0.2s;
}

در این مثال واقعی، هر واحد دقیقاً بر اساس نقشش انتخاب شده: % و px برای کنترل عرض کلی کارت، rem برای تمام فاصله‌گذاری‌ها و اندازه فونت‌ها (که با تنظیمات کاربر هماهنگ می‌مونن)، px برای جزئیات دقیق مثل Border و گردی گوشه‌ها، و s برای مدت زمان Transition دکمه.

یک اصل کلی برای به‌خاطر سپردن

اگه بخوایم کل این فصل رو در یک اصل ساده خلاصه کنیم: هرجا نیاز به پیش‌بینی‌پذیری کامل و مستقل از هر عاملی داری (مثل Border)، از واحد مطلق (px) استفاده کن؛ و هرجا نیاز به انعطاف‌پذیری و هماهنگی با محیط اطراف داری (مثل فونت، فاصله‌گذاری متنی یا چیدمان)، از واحد نسبی مناسب (rem، %، vh، fr) استفاده کن.

نکات مهم

• انتخاب واحد باید بر اساس نیاز واقعی Property (پیش‌بینی‌پذیری کامل در برابر انعطاف‌پذیری) انجام شود، نه صرفاً عادت.
• ترکیب چند واحد مختلف در یک پروژه (مثلاً rem برای متن، px برای Border، fr برای Grid) کاملاً طبیعی و رایج است.
• هیچ واحد واحدی برای همه موارد «بهترین» نیست؛ انتخاب درست همیشه به Context و هدف بستگی دارد.

اشتباهات رایج

• استفاده انحصاری از یک واحد (مثلاً فقط px یا فقط rem) در کل پروژه، بدون توجه به نیاز خاص هر Property.
• نادیده گرفتن تأثیر انتخاب واحد بر دسترسی‌پذیری، مخصوصاً برای font-size.
• استفاده از fr یا vh در جایی که یک واحد ساده‌تر مثل % یا px کاملاً کافی بود.

جمع‌بندی

انتخاب واحد مناسب در CSS، تصمیمی‌ست که باید بر اساس نیاز واقعی هر Property گرفته بشه: rem برای فونت و فاصله‌گذاری‌های هماهنگ با تایپوگرافی، px برای جزئیات ثابت مثل Border، درصد و vh برای ابعاد نسبت به والد یا صفحه‌نمایش، و fr مخصوص تقسیم فضا در Grid. تسلط بر این انتخاب‌ها، یکی از نشانه‌های اصلی نوشتن CSS حرفه‌ای و قابل‌نگهداری است؛ و با این جمع‌بندی، فصل ششم دوره را به پایان می‌رسانیم.