ممکن است فکر کنی برای طراحی سریع‌تر سایت‌ها باید حتماً Bootstrap یا Tailwind استفاده کنی. اما گاهی نیاز داری یک فریم‌ورک شخصی CSS بسازی که دقیقاً مطابق نیازهای تو و پروژه‌هایت باشد — نه بزرگ‌تر و سنگین‌تر از حد نیاز و نه محدودکننده.

در این مقاله می‌خواهم به تو نشان بدهم چطور یک Mini CSS Framework بسازی. نه آن‌قدر پیچیده که وقتت را بگیرد، و نه آن‌قدر ساده که کاربردی نباشد. اگر دوست داری جزئیات بیشتری یاد بگیری، می‌توانی به مقالات فرزند لینک‌شده در هر بخش سر بزنی.

مفهوم Utility Classes

یکی از بهترین ترفندهای فریم‌ورک‌های CSS، استفاده از Utility Classes است. یعنی کلاس‌های کوتاه و تک‌خطی که فقط یک خاصیت CSS را تغییر می‌دهند. مثلاً:

.text-center {
  text-align: center;
}

.mt-20 {
  margin-top: 20px;
}

.mb-10 {
  margin-bottom: 10px;
}

به‌جای این‌که برای هر صفحه کلی CSS جدا بنویسی، می‌توانی این کلاس‌ها را به المنت‌ها اضافه کنی.

تعریف کلاس‌های عمومی

فریم‌ورک شخصی تو باید مجموعه‌ای از کلاس‌های عمومی داشته باشد که زیاد استفاده می‌شوند. برخی از رایج‌ترین‌ها:

  • .text-center → متن را وسط‌چین می‌کند.
  • .mt-20 → فاصله بالا را 20px قرار می‌دهد.
  • .mb-10 → فاصله پایین را 10px قرار می‌دهد.
  • .p-15 → padding همه طرف را 15px می‌دهد.
  • .d-flex → المان را Flexbox می‌کند.

وجود این کلاس‌ها سرعت کدنویسی تو را چند برابر می‌کند.

ساخت سیستم Grid یا Flex شخصی

هر فریم‌ورک خوب نیاز به یک سیستم چیدمان دارد. می‌توانی یک Grid System یا یک Flex System بسازی. مثلاً:

Grid System ساده:

.row {
  display: flex;
  flex-wrap: wrap;
}

.col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

یا Flex System ساده:

.d-flex {
  display: flex;
}

.justify-between {
  justify-content: space-between;
}

.align-center {
  align-items: center;
}

ساخت کامپوننت‌های ساده

یک فریم‌ورک شخصی باید کامپوننت‌های پرکاربرد را هم داشته باشد. مثلاً:

  • Button
    • رنگ‌های مختلف (primary, secondary)
    • سایزهای مختلف
  • Card
    • کادر با border-radius
    • سایه (box-shadow)
  • Badge
    • نشان کوچک کنار متن
  • Alert
    • پیام هشدار با رنگ‌بندی متفاوت
  • Modal
    • پنجره پاپ‌آپ ساده

مثال برای Button:

.btn {
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-primary {
  background-color: var(--primary-color);
  color: #fff;
}

استفاده از متغیرهای CSS در فریم‌ورک شخصی

یکی از هوشمندانه‌ترین کارها این است که متغیرهای CSS (Custom Properties) را وارد فریم‌ورک شخصی‌ات کنی. مثلاً:

:root {
  --primary-color: #E6B127;
  --secondary-color: #4A90E2;
  --border-radius: 4px;
}

.btn-primary {
  background-color: var(--primary-color);
  border-radius: var(--border-radius);
}

این کار باعث می‌شود:

  • سریع Theme پروژه را تغییر دهی.
  • ظاهر تمام المان‌ها یکپارچه باشد.

مدیریت Structure پروژه CSS

وقتی فریم‌ورک شخصی می‌سازی، خیلی مهم است کدهایت را منظم نگه داری. برخی نکات مهم:

  • استفاده از Partial CSS Files
    مثلاً:
    • _variables.css
    • _utilities.css
    • _components.css
  • استفاده از Organization و Naming Convention مثل BEM:
    • block__element--modifier

مثلاً:

.card__title--large {
  font-size: 24px;
}

این روش باعث می‌شود حتی اگر پروژه بزرگ شود، کدت قابل مدیریت باقی بماند.

جمع‌بندی

ساخت یک Mini CSS Framework به تو قدرت و سرعت فوق‌العاده‌ای در طراحی وب می‌دهد. به‌جای تکیه بر فریم‌ورک‌های سنگین، می‌توانی دقیقاً همان چیزهایی را بسازی که پروژه‌هایت نیاز دارند. سریع‌تر، سبک‌تر و کاملاً شخصی‌سازی شده!