Tailwind CSS في العالم الحقيقي: بنية "حارس البوابة" (Gatekeeper Architecture)

لا تسمح المؤسسات الكبيرة لكل شخص بتنسيق كل صفحة؛ بل يستخدمون هيكلية محددة للحفاظ على نظافة الكود الخاص بهم.

تستخدم أنظمة التصميم الناضجة مثل Shopify Polaris دورين منفصلين:

  • مؤلفو المكونات (The Gatekeepers): يقوم هذا الفريق ببناء واجهة المستخدم (UI) الأساسية. هم من يكتبون فئات (classes) Tailwind، ويديرون إمكانية الوصول (accessibility)، والوضع الداكن (dark mode)، ورموز التصميم (design tokens).

  • مطورو الميزات (The Assemblers): يقوم هذا الفريق ببناء المنتجات ولوحات التحكم. يركزون على منطق العمل (business logic) والتخطيط (layout)، ولا يختارون الألوان أو المسافات.

تفرض المؤسسات هذه الحدود باستخدام قواعد الـ lint ومراجعات الكود (code reviews).

ما يجب عليك فعله: • استخدم أدوات التخطيط مثل flex و grid و gap.

ما يجب عليك تجنبه: • إضافة أنماط بصرية جديدة مثل bg-indigo-600 أو text-lg مباشرة داخل صفحات الميزات. استخدم مكوناً موجوداً بدلاً من ذلك.

إليك كيف يعمل ذلك في الكود.

يقوم فريق نظام التصميم بإنشاء زر قابل لإعادة الاستخدام في @/components/ui/button.tsx. يقومون بمركزية الأنماط البصرية:

import React from 'react';

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary';
  className?: string;
}

export function Button({
  variant = 'primary',
  className = '',
  children,
  ...props
}: ButtonProps) {
  const baseStyles = "px-4 py-2 rounded-lg font-medium text-sm transition-all focus:outline-none focus:ring-2 focus:ring-offset-2";

  const variants = {
    primary: "bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-500",
    secondary: "bg-slate-100 text-slate-700 hover:bg-slate-200 focus:ring-slate-500"
  };

  return (
    <button className={`${baseStyles} ${variants[variant]} ${className}`} {...props}>
      {children}
    </button>
  );
}

بعد ذلك، يقوم مطور الميزات ببناء الصفحة عن طريق تجميع هذه الكتل:

import { Button } from "@/components/ui/button";

export default function Dashboard() {
  return (
    <div>
      <Button variant="primary" className="mt-4">
        Save Changes
      </Button>
    </div>
  );
}

توفر هذه الهيكلية ثلاث فوائد رئيسية:

  1. سهولة الصيانة. إذا قمت بإزالة زر، فلن تترك خلفك كود CSS غير مستخدم (dead CSS).
  2. تحديثات سريعة. إذا تغيرت علامتك التجارية من اللون النيلي (indigo) إلى البنفسجي (violet)، فستقوم بتغيير ملف واحد فقط، وسينتقل التغيير عبر التطبيق بالكامل.
  3. الاتساق. يستخدم كل مطور نفس رموز التصميم (design tokens).

لا يقتصر الهدف على Tailwind فحسب، بل يتعلق الأمر بإنشاء حد فاصل بين أولئك الذين يبنون النظام وأولئك الذين يستخدمونه.

في الجزء الثاني، سأناقش كيفية التعامل مع استثناءات التصميم دون الإخلال ببنيتك البرمجية.

المصدر: https://dev.to/cathylai/real-world-tailwind-css-the-gatekeeper-architecture-a-senior-developers-guide-part-12-m36