معماری Component در CSS؛ ساخت UI Components حرفه‌ای

در پروژه‌های واقعی طراحی سایت، یکی از بزرگ‌ترین مشکلات تیم‌ها این است که با بزرگ‌تر شدن پروژه، CSS به‌سرعت غیرقابل‌مدیریت، تکراری و شکننده می‌شود.
دلیل اصلی این مشکل، نبود یک معماری مشخص و لایه‌بندی‌شده در CSS است.

در معماری‌های مدرن، بعد از اینکه لایه‌های پایه CSS به‌درستی طراحی شدند، گام بعدی و حیاتی، ورود به Component System است؛ جایی که رابط کاربری واقعی سایت شکل می‌گیرد.

اما قبل از ورود به کامپوننت‌ها، لازم است بدانیم این لایه‌های پایه دقیقاً چه هستند و چه نقشی دارند.

---

لایه‌های پایه CSS چیست و چه نقشی دارند؟

قبل از ساخت Component System، معمولاً سه لایه اصلی در CSS پیاده‌سازی می‌شود:

Layout

لایه Layout مسئول چیدمان کلی صفحات است.
در این لایه ساختارهایی مثل Grid و Flexbox تعریف می‌شوند:

• ساختار ستون‌بندی
• فاصله‌گذاری کلی صفحات
• Wrapperها و Containerها

هدف Layout این است که اسکلت صفحه مشخص شود، نه ظاهر جزئی عناصر.

---

Typography

Typography مربوط به نمایش متن‌ها است، نه اجزای UI.

در این لایه معمولاً تعریف می‌شود:

• فونت اصلی سایت
• اندازه تیترها (h1 تا h6)
• پاراگراف‌ها
• line-height
• رنگ متن‌ها

Typography باعث می‌شود متن‌ها در کل سایت یکپارچه و خوانا باشند.

---

Utility System

Utility System شامل کلاس‌های کوچک، سریع و تک‌منظوره است:

.mt-md
.flex
.grid
.text-center
.hidden

این کلاس‌ها ابزار هستند، نه UI.
کار آنها سرعت دادن به توسعه و کاهش تکرار CSS است.

---

✅ وقتی این سه لایه کامل شدند، Foundation CSS شما آماده است.
در این نقطه، ساخت UI واقعی سایت با Component System آغاز می‌شود.

---

Component System چیست؟

Component System یعنی ساخت اجزای قابل استفاده مجدد (Reusable UI Components) که در سراسر سایت تکرار می‌شوند.

کامپوننت یعنی:

• Button
• Form
• Card
• Alert
• Modal
• Tabs
• Accordion

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

مثال:

<a class="btn btn-primary">ثبت‌نام</a>

همین دکمه می‌تواند در:

• صفحه اصلی
• صفحه ورود
• صفحه محصول
• قالب وردپرس

استفاده شود، بدون نوشتن CSS جدید.

---

Design System چه ارتباطی با Component System دارد؟

یک Design System فقط مجموعه‌ای از رنگ‌ها یا فونت‌ها نیست.

Design System شامل:

• Design Tokens (رنگ، فاصله، تایپوگرافی)
• Utility Classes
• UI Components
• قوانین استفاده
• استانداردهای دسترس‌پذیری

Component System قلب Design System است، چون UI واقعی سایت را می‌سازد.

---

ساختار پوشه Components در CSS

ساختار پیشنهادی و حرفه‌ای:

assets/css/components/

نمونه کامل:

assets/css/components/
├── buttons.css
├── forms.css
├── cards.css
├── alerts.css
├── badges.css
├── tabs.css
├── accordions.css
├── modals.css
└── sliders.css

هر فایل فقط مسئول یک نوع کامپوننت است.
این اصل باعث Separation of Concerns می‌شود.

---

چرا بعد از Utilities باید Components ساخته شوند؟

Utilities فقط ابزار هستند.
Components همان چیزی هستند که کاربر می‌بیند و با آن تعامل دارد.

معماری استاندارد:

Base
↓
Layout
↓
Typography
↓
Utilities
↓
Components

این ترتیب در Design Systemهای حرفه‌ای رعایت می‌شود.

---

ترتیب بهینه ساخت Componentها بر اساس وابستگی

1️⃣ Button Component (اولویت اول)

فایل:

components/buttons.css

Button پایه تعامل کاربر است و در همه جای سایت استفاده می‌شود.

ساختار کلاس‌ها:

.btn
.btn-primary
.btn-secondary
.btn-outline
.btn-sm
.btn-lg
.btn-block

مثال CSS واقعی (Token-based):

/* components/buttons.css */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  line-height: 1.5;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.2s ease;
}

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

.btn-primary:hover {
  background-color: var(--color-primary-dark);
}

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

---

2️⃣ Form Components

فایل:

components/forms.css

شامل:

• input
• textarea
• select
• label
• focus state
• error state

Formها پایه ارتباط کاربر با Backend هستند.

---

3️⃣ Card Components

فایل:

components/cards.css

Card برای نمایش:

• پست‌ها
• محصولات
• دوره‌ها
• پروژه‌ها

ساختار رایج:

.card
.card-header
.card-body
.card-footer

---

4️⃣ Alert Components

فایل:

alerts.css

برای پیام‌ها:

• success
• error
• warning
• info

---

5️⃣ Badge Components

فایل:

badges.css

برای:

• دسته‌بندی
• وضعیت
• برچسب‌ها

---

6️⃣ Tabs Components

فایل:

tabs.css

برای:

• داشبورد
• پنل آموزش
• مشخصات محصول

Tabs معمولاً با JavaScript کار می‌کنند.

---

7️⃣ Accordion Components

فایل:

accordions.css

برای:

• FAQ
• مستندات
• سوالات متداول

---

8️⃣ Modal Components

فایل:

modals.css

برای:

• Login
• Signup
• Preview

---

ارتباط CSS و JavaScript در Component System

در کامپوننت‌های تعاملی، بهترین الگو این است:

• CSS = ظاهر
• JavaScript = رفتار

JavaScript فقط State را تغییر می‌دهد:

.is-active
.is-open
.is-hidden

CSS بر اساس این کلاس‌ها UI را تغییر می‌دهد.

همچنین استفاده از data-attributes برای مدیریت State توصیه می‌شود.

---

تکنیک‌های مدرن در طراحی Component

Token Based Design

هیچ مقدار Hardcode نباید وجود داشته باشد.

✅ درست:

var(--color-primary)
var(--space-md)

❌ غلط:

#3498db
16px

---

Responsive Components

کامپوننت باید در موبایل، تبلت و دسکتاپ درست کار کند.

---

Accessible Components

استفاده از:

• HTML Semantic
• Focus state
• ARIA attributes

برای دسترس‌پذیری ضروری است.

---

عدم استفاده از px

به‌جای px از:

• rem
• em
• clamp()

استفاده می‌شود.

---

اتصال Component System به وردپرس

استفاده در Templateهای کلاسیک

<a class="btn btn-primary" href="<?php echo esc_url( get_permalink() ); ?>">
مشاهده مقاله
</a>

---

ادغام با Gutenberg (Block Editor)

• استفاده به‌عنوان Style بلاک‌ها
• استفاده در Custom Blocks
• حفظ یکپارچگی Design System

برای بارگذاری CSS:

wp_enqueue_style( 'theme-components', get_template_directory_uri() . '/assets/css/components.css' );

---

ملاحظات امنیتی در توسعه کامپوننت‌ها

اگرچه CSS مستقیماً امنیت سرور را تهدید نمی‌کند، اما:

• فرم‌ها باید Sanitization و Validation شوند
• خروجی‌ها Escaped شوند
• JavaScript از DOM XSS جلوگیری کند
• استفاده صحیح از CSP توصیه می‌شود

---

اشتباهات رایج در ساخت Component

ساخت CSS جدا برای هر صفحه

❌ باعث تکرار و آشفتگی می‌شود.

---

وابسته بودن کامپوننت به یک صفحه

✅ کامپوننت باید Reusable باشد.

---

استفاده زیاد از ID

✅ فقط class استفاده کنید.

---

ترکیب Layout و Component

✅ Layout و Component باید جدا باشند.

---

جمع‌بندی نهایی

معماری Component در CSS قلب یک Design System حرفه‌ای است.
بعد از Layout، Typography و Utilities، کامپوننت‌ها UI واقعی سایت را می‌سازند.

اگر این معماری درست پیاده‌سازی شود:

• CSS تمیز و قابل توسعه می‌شود
• پروژه مقیاس‌پذیر می‌شود
• وردپرس حرفه‌ای‌تر توسعه داده می‌شود
• تیم‌ها سریع‌تر و هماهنگ‌تر کار می‌کنند

این دقیقاً همان مسیری است که Design Systemهای حرفه‌ای دنیا از آن استفاده می‌کنند.