𝗥𝗲𝗮𝗹 𝗪𝗼𝗿𝗹𝗱 𝗧𝗮𝗶𝗹𝘄𝗶𝗻𝗱 𝗖𝗦𝗦: 𝗧𝗵𝗲 𝗚𝗮𝘁𝗲𝗸𝗲𝗲𝗽𝗲𝗿 𝗔𝗿𝗰𝗵𝗶𝘁𝗲𝗰𝘁𝘂𝗿𝗲

بڑی تنظیمیں ہر کسی کو ہر صفحے کو اسٹائل کرنے کی اجازت نہیں دیتیں۔ وہ اپنے کوڈ کو صاف ستھرا رکھنے کے لیے ایک مخصوص ڈھانچہ استعمال کرتی ہیں۔

Shopify Polaris جیسے پختہ ڈیزائن سسٹم دو الگ الگ کردار استعمال کرتے ہیں:

  • Component Authors (Gatekeepers): یہ ٹیم بنیادی UI بناتی ہے۔ وہ Tailwind classes لکھتے ہیں۔ وہ accessibility، dark mode، اور design tokens کا انتظام کرتے ہیں۔

  • Feature Developers (Assemblers): یہ ٹیم مصنوعات اور ڈیش بورڈز بناتی ہے۔ وہ business logic اور layout پر توجہ دیتے ہیں۔ وہ رنگ یا سپیسنگ (spacing) کا انتخاب نہیں کرتے۔

تنظیمیں lint rules اور code reviews کے ذریعے اس حد کو برقرار رکھتی ہیں۔

آپ کو کیا کرنا چاہیے: • flex، grid، اور gap جیسی layout utilities استعمال کریں۔

آپ کو کن چیزوں سے بچنا چاہیے: • فیچر صفحات کے اندر براہ راست bg-indigo-600 یا text-lg جیسے نئے بصری اسٹائلز (visual styles) شامل کرنے سے گریز کریں۔ اس کے بجائے پہلے سے موجود component استعمال کریں۔

کوڈ میں یہ اس طرح کام کرتا ہے۔

Design System Team @/components/ui/button.tsx میں ایک قابلِ استعمال (reusable) بٹن بناتی ہے۔ وہ بصری اسٹائلز کو مرکزی حیثیت (centralize) دیتے ہیں:

import React from 'react';

interface ButtonProps extends React.ButtonHTMLAttributes { 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} ); }

اس کے بعد Feature Developer ان بلاکس کو جوڑ کر صفحہ بناتا ہے:

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

export default function Dashboard() { return (

); }

یہ ڈھانچہ تین اہم فوائد فراہم کرتا ہے:

  1. آسان دیکھ بھال (maintenance)۔ اگر آپ ایک بٹن ہٹا دیتے ہیں، تو آپ کے پیچھے غیر ضروری (dead) CSS باقی نہیں رہتی۔
  2. تیز رفتار اپ ڈیٹس۔ اگر آپ کا برانڈ indigo سے violet میں تبدیل ہوتا ہے، تو آپ صرف ایک فائل تبدیل کرتے ہیں۔ یہ تبدیلی پوری ایپ میں خود بخود پھیل جاتی ہے۔
  3. یکسانیت (Consistency)۔ ہر ڈویلپر ایک ہی design tokens استعمال کرتا ہے۔

مقصد صرف Tailwind کے بارے میں نہیں ہے۔ یہ ان لوگوں کے درمیان ایک حد قائم کرنے کے بارے میں ہے جو سسٹم بناتے ہیں اور وہ جو اسے استعمال کرتے ہیں۔

دوسرے حصے میں، میں اس بارے میں بات کروں گا کہ اپنے آرکیٹیکچر کو خراب کیے بغیر ڈیزائن کے استثنائی حالات کو کیسے سنبھالا جائے۔

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