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

ದೊಡ್ಡ ಸಂಸ್ಥೆಗಳು ಪ್ರತಿಯೊಬ್ಬರೂ ಪ್ರತಿಯೊಂದು ಪುಟವನ್ನು ಸ್ಟೈಲ್ ಮಾಡಲು ಬಿಡುವುದಿಲ್ಲ. ತಮ್ಮ ಕೋಡ್ ಅನ್ನು ಸ್ವಚ್ಛವಾಗಿಡಲು ಅವು ಒಂದು ನಿರ್ದಿಷ್ಟ ರಚನೆಯನ್ನು ಬಳಸುತ್ತವೆ.

Shopify Polaris ನಂತಹ ಪರಿಪಕ್ವ ಡಿಸೈನ್ ಸಿಸ್ಟಮ್‌ಗಳು ಎರಡು ಪ್ರತ್ಯೇಕ ಪಾತ್ರಗಳನ್ನು ಬಳಸುತ್ತವೆ:

  • ಕಾಂಪೊನೆಂಟ್ ಲೇಖಕರು (The Gatekeepers): ಈ ತಂಡವು ಕೋರ್ UI ಅನ್ನು ನಿರ್ಮಿಸುತ್ತದೆ. ಅವರು Tailwind ಕ್ಲಾಸ್‌ಗಳನ್ನು ಬರೆಯುತ್ತಾರೆ. ಅವರು ಅಕ್ಸೆಸಿಬಿಲಿಟಿ (accessibility), ಡಾರ್ಕ್ ಮೋಡ್ ಮತ್ತು ಡಿಸೈನ್ ಟೋಕನ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತಾರೆ.

  • ಫೀಚರ್ ಡೆವಲಪರ್‌ಗಳು (The Assemblers): ಈ ತಂಡವು ಉತ್ಪನ್ನಗಳು ಮತ್ತು ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುತ್ತದೆ. ಅವರು ಬಿಸಿನೆಸ್ ಲಾಜಿಕ್ ಮತ್ತು ಲೇಔಟ್ ಮೇಲೆ ಗಮನ ಹರಿಸುತ್ತಾರೆ. ಅವರು ಬಣ್ಣಗಳು ಅಥವಾ ಸ್ಪೇಸಿಂಗ್ ಅನ್ನು ಆಯ್ಕೆ ಮಾಡುವುದಿಲ್ಲ.

ಸಂಸ್ಥೆಗಳು ಲಿಂಟ್ ನಿಯಮಗಳು (lint rules) ಮತ್ತು ಕೋಡ್ ರಿವ್ಯೂಗಳ ಮೂಲಕ ಈ ಗಡಿಯನ್ನು ಕಡ್ಡಾಯಗೊಳಿಸುತ್ತವೆ.

ನೀವು ಮಾಡಬೇಕಾದದ್ದು: • flex, grid, ಮತ್ತು gap ನಂತಹ ಲೇಔಟ್ ಯುಟಿಲಿಟಿಗಳನ್ನು ಬಳಸಿ.

ನೀವು ಮಾಡಬಾರದದ್ದು: • ಫೀಚರ್ ಪುಟಗಳ ಒಳಗೆ ನೇರವಾಗಿ bg-indigo-600 ಅಥವಾ text-lg ನಂತಹ ಹೊಸ ವಿಶುವಲ್ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಸೇರಿಸಬೇಡಿ. ಬದಲಿಗೆ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಬಳಸಿ.

ಇದು ಕೋಡ್‌ನಲ್ಲಿ ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ ಎಂಬುದು ಇಲ್ಲಿದೆ.

ಡಿಸೈನ್ ಸಿಸ್ಟಮ್ ತಂಡವು @/components/ui/button.tsx ನಲ್ಲಿ ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಬಟನ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ. ಅವರು ವಿಶುವಲ್ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಕೇಂದ್ರೀಕರಿಸುತ್ತಾರೆ:

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} ); }

ನಂತರ ಫೀಚರ್ ಡೆವಲಪರ್ ಈ ಬ್ಲಾಕ್‌ಗಳನ್ನು ಜೋಡಿಸುವ ಮೂಲಕ ಪುಟವನ್ನು ನಿರ್ಮಿಸುತ್ತಾರೆ:

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

export default function Dashboard() { return (

); }

ಈ ರಚನೆಯು ಮೂರು ಮುಖ್ಯ ಪ್ರಯೋಜನಗಳನ್ನು ನೀಡುತ್ತದೆ:

  1. ಸುಲಭ ನಿರ್ವಹಣೆ. ನೀವು ಬಟನ್ ಅನ್ನು ತೆಗೆದುಹಾಕಿದರೆ, ನೀವು ಅನಗತ್ಯ (dead) CSS ಅನ್ನು ಬಿಟ್ಟು ಹೋಗುವುದಿಲ್ಲ.
  2. ವೇಗದ ಅಪ್‌ಡೇಟ್‌ಗಳು. ನಿಮ್ಮ ಬ್ರ್ಯಾಂಡ್ ಇಂಡಿಗೋದಿಂದ ವಯಲೆಟ್‌ಗೆ ಬದಲಾದರೆ, ನೀವು ಕೇವಲ ಒಂದು ಫೈಲ್ ಅನ್ನು ಬದಲಾಯಿಸಿದರೆ ಸಾಕು. ಆ ಬದಲಾವಣೆಯು ಇಡೀ ಆಪ್‌ನಲ್ಲಿ ಹರಿಯುತ್ತದೆ.
  3. ಸ್ಥಿರತೆ (Consistency). ಪ್ರತಿಯೊಬ್ಬ ಡೆವಲಪರ್ ಒಂದೇ ರೀತಿಯ ಡಿಸೈನ್ ಟೋಕನ್‌ಗಳನ್ನು ಬಳಸುತ್ತಾರೆ.

ಗುರಿಯು ಕೇವಲ Tailwind ಬಗ್ಗೆ ಮಾತ್ರವಲ್ಲ. ಇದು ವ್ಯವಸ್ಥೆಯನ್ನು ನಿರ್ಮಿಸುವವರು ಮತ್ತು ಅದನ್ನು ಬಳಸುವವರ ನಡುವೆ ಒಂದು ಗಡಿಯನ್ನು ಸೃಷ್ಟಿಸುವುದರ ಕುರಿತಾಗಿದೆ.

ಭಾಗ 2 ರಲ್ಲಿ, ನಿಮ್ಮ ಆರ್ಕಿಟೆಕ್ಚರ್ ಹಾಳಾಗದಂತೆ ವಿನ್ಯಾಸದ ವಿನಾಯಿತಿಗಳನ್ನು ಹೇಗೆ ನಿರ್ವಹಿಸಬೇಕು ಎಂಬುದರ ಬಗ್ಗೆ ನಾನು ಚರ್ಚಿಸುತ್ತೇನೆ.

ಮೂಲ: https://dev.to/cathylai/real-world-tailwind-css-the-gatekeeper-architecture-a-senior-developers-guide-part-12-m36