𝗥𝗲𝗮𝗹 𝗪𝗼𝗿𝗹𝗱 𝗧𝗮𝗶𝗹𝘄𝗶𝗻𝗱 𝗖𝗦𝗦: 𝗧𝗵𝗲 𝗚𝗮𝘁𝗲𝗸𝗲𝗲𝗽𝗲𝗿 𝗔𝗿𝗰𝗵𝗶𝘁𝗲𝗰𝘁𝘂𝗿𝗲
বড় প্রতিষ্ঠানগুলো সবাইকে প্রতিটি পেজ স্টাইল করার অনুমতি দেয় না। তারা তাদের কোড পরিষ্কার রাখার জন্য একটি নির্দিষ্ট কাঠামো ব্যবহার করে।
Shopify Polaris-এর মতো পরিপক্ক ডিজাইন সিস্টেমগুলো দুটি আলাদা ভূমিকা ব্যবহার করে:
Component Authors (The Gatekeepers): এই টিমটি কোর UI তৈরি করে। তারা Tailwind ক্লাসগুলো লেখে। তারা accessibility, dark mode এবং design tokens পরিচালনা করে।
Feature Developers (The Assemblers): এই টিমটি প্রোডাক্ট এবং ড্যাশবোর্ড তৈরি করে। তারা বিজনেস লজিক এবং লেআউটের ওপর ফোকাস করে। তারা কালার বা স্পেসিং নির্ধারণ করে না।
প্রতিষ্ঠানগুলো lint rules এবং code reviews-এর মাধ্যমে এই সীমানা বজায় রাখে।
আপনার যা করা উচিত: • flex, grid, এবং gap-এর মতো layout utilities ব্যবহার করুন।
আপনার যা এড়িয়ে চলা উচিত: • ফিচার পেজগুলোর ভেতরে সরাসরি bg-indigo-600 বা text-lg-এর মতো নতুন ভিজ্যুয়াল স্টাইল যোগ করা। এর পরিবর্তে বিদ্যমান কোনো component ব্যবহার করুন।
কোডে এটি কীভাবে কাজ করে তা নিচে দেওয়া হলো।
Design System টিম @/components/ui/button.tsx-এ একটি reusable button তৈরি করে। তারা ভিজ্যুয়াল স্টাইলগুলোকে সেন্ট্রালাইজ করে:
import React from 'react';
interface ButtonProps extends React.ButtonHTMLAttributes
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 (
এই কাঠামোটি তিনটি প্রধান সুবিধা প্রদান করে:
- সহজ রক্ষণাবেক্ষণ (Easier maintenance)। আপনি যদি একটি বাটন সরিয়ে ফেলেন, তবে কোনো অব্যবহৃত (dead) CSS পেছনে থেকে যায় না।
- দ্রুত আপডেট। যদি আপনার ব্র্যান্ডের কালার indigo থেকে violet-এ পরিবর্তিত হয়, তবে আপনাকে শুধু একটি ফাইল পরিবর্তন করতে হবে। সেই পরিবর্তন পুরো অ্যাপ জুড়ে কার্যকর হবে।
- সামঞ্জস্যতা (Consistency)। প্রতিটি ডেভেলপার একই design tokens ব্যবহার করে।
লক্ষ্যটি কেবল Tailwind-এর মধ্যেই সীমাবদ্ধ নয়। এটি হলো যারা সিস্টেমটি তৈরি করেন এবং যারা এটি ব্যবহার করেন, তাদের মধ্যে একটি সীমারেখা তৈরি করা।
দ্বিতীয় পর্বে, আমি আলোচনা করব কীভাবে আপনার আর্কিটেকচার নষ্ট না করেই ডিজাইনের ব্যতিক্রমগুলো (design exceptions) সামলানো যায়।