CSS Architecture

• طراحی یک ساختار منطقی، قابل نگهداری و مقیاس‌پذیر برای CSS
  طوری که:

• استایل‌ها قاطی پاتی نشن

• با بزرگ شدن پروژه، اعصابت داغون نشه

• هر کامپوننت مسئول کار خودش باشه

چرا CSS بدون معماری خطرناکه؟

اگه CSS معماری نداشته باشه، اینا رو تجربه می‌کنی:

• تغییر یه margin میشه یه باگ جدید
• پروژه پر میشه از !important ها (جهنم CSS)
• ترس از تغییر یه کلاس ساده
• باگ‌هایی که فقط تو prod ظاهر میشن
• ریفکتور میشه ترسناک‌تر از Deploy جمعه

اهداف CSS Architecture

یک معماری خوب باید:

Scalable

• با رشد پروژه، CSS تبدیل به هیولا نشه

Maintainable

• بتونی بعد از ۶ ماه برگردی و هنوز بفهمی چی به چیه

Predictable

• بدونی اضافه کردن یک کلاس چه تأثیری داره

Reusable

• کامپوننت‌ها قابل استفاده مجدد باشن، نه One-Time Only

معماری‌های معروف CSS

بریم سراغ معروف‌ترین الگوها:

1. BEM (Block Element Modifier)

.block {
}
.block__element {
}
.block--modifier {
}

مزایا

• بسیار واضح و خوانا
• بدون تداخل استایل
• عالی برای تیم‌های بزرگ

معایب

• اسم کلاس‌ها طولانی میشه

2. OOCSS (Object Oriented CSS)

جدا کردن:

• ساختار (Structure)
• ظاهر (Skin)

<div class="card bg-white shadow"></div>

.card {
  padding: 16px;
  border-radius: 8px;
}

.bg-white {
  background: white;
}

.shadow {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

مزایا

• خب Reusability بالا
• و CSS کمتر

معایب

• اما HTML شلوغ میشه

3. SMACSS

دسته‌بندی استایل‌ها:

• Base
• Layout
• Module
• State
• Theme

/* Base */
body {
  font-family: sans-serif;
}

/* Layout */
.l-header {
  display: flex;
}

/* Module */
.card {
  border: 1px solid #eee;
}

/* State */
.is-active {
  color: red;
}

مزایا

• ساختار ذهنی قوی
• مناسب پروژه‌های بزرگ

4. Atomic / Utility-First CSS

• سلام Tailwind

<button class="px-4 py-2 bg-blue-500 text-white rounded">Click me</button>

مزایا

• سرعت توسعه بالا

• بدون تداخل

• بدون CSS

معایب

• سند HTML خیلی شلوغ

• سخت برای تازه‌کارها

کدوم معماری؟ کِی؟

CSS Modules (React/Next.js)

ساختار:

• Button.module.css

.button {
  background: blue;
}

• نمایش کد

import styles from "./Button.module.css";

<button className={styles.button}>Click</button>;

• خب Scope محلی ایجاد می‌کنه
• تشابه نام های یکسان کلاس ها رو از بین میبره (Naming Conflict)
• با SSR و RSC سازگاره

ترکیب خفن:

CSS Modules + BEM

.card {
}
.card__title {
}
.card--featured {
}

<div className={`${styles.card} ${styles["card--featured"]
}`}>
  <h2 className={styles.card__title}>Title</h2>
</div>

نتیجه؟

معماری CSS فقط اسم کلاس نیست، شامل:

• Design Tokens (colors, spacing, font)
• CSS Variables
• Component-driven styling
• Accessibility-aware styles

:root {
  --color-primary: #2563eb;
  --radius-md: 8px;
}

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

جمع‌بندی

خب CSS Architecture یعنی:

• باگ کمتر
• ریفکتور بدون ترس
• تیم خوشحال‌تر

هیچ معماری «بهترین مطلق» نیست.

• بهترین معماری، اونیه که:

• تیم بفهمتش

• پروژه تحملش کنه

• آینده رو خراب نکنه