طراحی معماری پیاده سازی ظاهر بکمک فیگما در پروژه های بزرگ

توی طراحی یک سیستم بزرگ با سی اس اس این مشکلات رو در لایه معماری چطوری حل میکنن. با تیل ویند یا راه حل آبجکت اورینتد. اونوقت تکلیف طراحی های سفارشی سازی شده چی میشه؟

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

1. استفاده از روش‌های معماری CSS (CSS Architecture)

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

الف) BEM (Block Element Modifier)

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

• Block: نمایانگر یک عنصر مستقل و مفهومی از رابط کاربری است.
• Element: جزئی از یک بلوک است که به بلوک وابسته است.
• Modifier: برای تغییر ظاهر یا رفتار بلوک یا المان استفاده می‌شود.

مثال:

/* Block */
.button {}

/* Element */
.button__icon {}

/* Modifier */
.button--primary {}

ب) OOCSS (Object-Oriented CSS)

در OOCSS، بیشتر بر روی "اشیاء" (objects) تمرکز می‌شود تا خود المان‌ها. به‌جای نوشتن استایل‌های تکراری برای هر المان، می‌توان از اشیاء (مثلاً کارت‌ها، دکمه‌ها، ستون‌ها) استفاده کرد و آن‌ها را به شیوه‌ای مجزا طراحی کرد تا در کل سیستم قابل استفاده باشند.

مثال:

/* Object: Card */
.card {
  border: 1px solid #ccc;
  padding: 10px;
}

.card__title {
  font-size: 18px;
}

/* Modifier */
.card--highlighted {
  background-color: yellow;
}

ج) Atomic CSS

در Atomic CSS، به هر ویژگی CSS به‌صورت یک کلاس مستقل نگاه می‌شود. این روش باعث می‌شود که کلاس‌ها قابل ترکیب و استفاده مجدد در هر جایی از پروژه باشند، که به‌خصوص برای پروژه‌های بزرگ با تیم‌های متعدد مفید است.

مثال:

/* Atomic CSS Classes */
.mt-10 { margin-top: 10px; }
.bg-red { background-color: red; }
.text-center { text-align: center; }

2. استفاده از فریم‌ورک‌های مدرن CSS (مانند Tailwind CSS)

Tailwind CSS یکی از محبوب‌ترین فریم‌ورک‌های CSS است که رویکردی متفاوت را برای نوشتن استایل‌ها ارائه می‌دهد. این فریم‌ورک بیشتر بر روی utility-first (یعنی استفاده از کلاس‌های کاربردی) تمرکز دارد.

• در این فریم‌ورک به‌جای نوشتن کلاس‌های سفارشی برای هر المان، از کلاس‌های کمکی (utility classes) استفاده می‌شود که استایل‌های خاصی را برای هر ویژگی ارائه می‌دهند.

مثال:

<button class=&quotpx-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-700&quot>
  Button
</button>

مزایای Tailwind:

• افزایش سرعت توسعه: چون همه‌ی استایل‌ها با کلاس‌های کمکی انجام می‌شود.
• قابلیت سفارشی‌سازی: می‌توان با استفاده از فایل پیکربندی tailwind.config.js استایل‌ها را سفارشی‌سازی کرد.

معایب:

• کدهای HTML ممکن است شلوغ شوند: با استفاده از کلاس‌های زیاد در هر المان، HTML شلوغ‌تر و کمتر قابل خواندن می‌شود.

3. مدیریت سفارشی‌سازی‌ها در سیستم‌های بزرگ

برای سیستم‌های بزرگ، معمولاً باید راه‌حل‌هایی برای سفارشی‌سازی استایل‌ها در نظر گرفته شود تا در عین حال که به‌راحتی تغییرات اعمال می‌شوند، تداخل نداشته باشیم.

الف) CSS Variables (Custom Properties)

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

مثال:

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
}

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

ب) Theming with Tailwind CSS

در Tailwind CSS می‌توان به‌راحتی از themes استفاده کرد. با استفاده از فایل پیکربندی tailwind.config.js می‌توان برای سایت‌های مختلف یا بخش‌های مختلف سایت تم‌های سفارشی تعریف کرد.

مثال از تم‌ها در Tailwind:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#ff6347',
        secondary: '#32cd32',
      },
    },
  },
}توضیح

ج) CSS-in-JS

اگر از فریم‌ورک‌های مدرن مانند React استفاده می‌کنی، می‌توانی از روش‌های CSS-in-JS مانند Styled Components یا Emotion برای اعمال استایل‌ها به اجزای مختلف استفاده کنی. این روش باعث می‌شود که استایل‌ها دقیقاً به اجزای مربوطه محدود شوند و تداخل‌ها کاهش یابد.

مثال با Styled Components:

import styled from 'styled-components';

const Button = styled.button`
  padding: 10px 20px;
  background-color: ${(props) => (props.primary ? 'blue' : 'gray')};
  color: white;
  border-radius: 5px;
`;توضیح

4. چطور سفارشی‌سازی‌ها را مدیریت کنیم؟

• برای پروژه‌های بزرگ‌تر و سفارشی‌سازی‌ها، بهتر است از ترکیب چندین روش استفاده شود.
  برای اجزای مشترک و پایه، می‌توان از روش‌هایی مثل BEM، OOCSS یا حتی Tailwind CSS برای سرعت بخشیدن به کار استفاده کرد.
  برای سفارشی‌سازی‌های پیچیده‌تر، می‌توان از CSS Variables و Styled Components (در React) بهره برد.
  همیشه برای پروژه‌های بزرگ، فایل‌های CSS و استایل‌ها باید به‌خوبی ساختاربندی شوند تا همخوانی و مقیاس‌پذیری بالا حفظ شود.

جمع‌بندی

در طراحی سیستم‌های بزرگ، معمولاً CSS معماری مثل BEM, OOCSS, Tailwind CSS و CSS-in-JS استفاده می‌شود. این‌ها به کاهش تداخل، ساختاردهی بهتر و مقیاس‌پذیری کدها کمک می‌کنند. همچنین، سفارشی‌سازی‌ها می‌توانند با استفاده از CSS Variables و تم‌های سفارشی به راحتی مدیریت شوند.