تجنّب الترميز غير المقروء

تفتح قالبًا فتجد سطرًا من 340 حرفًا: زرٌّ بثماني عشرة فئة، منها أربع فئات لحالة التمرير، واثنتان للتركيز، وثلاث لحالة التعطيل. وبعد ثلاث شاشات تجد الزر نفسه بسبع عشرة فئة، إذ ينقصه transition، ولا أحد يستطيع أن يجزم هل هذا مقصود. وأبعد من ذلك قليلًا تجد نسخة ثالثة تستخدم bg-emerald-500 بدل bg-emerald-600. ثلاثة أزرار يفترض أن تكون متطابقة، وثلاث قوائم فئات مختلفة، ولا وسيلة لتصحيحها كلها بخطوة واحدة.

ردّ الفعل الطبيعي هو إنشاء فئة .bouton باستخدام @apply. وهذا هو الجواب الخاطئ في الغالبية العظمى من الحالات، وفريق Tailwind نفسه يقول ذلك: هذه التوجيهة موجودة لتسهيل عمليات الترحيل، لا لبناء طبقة من المكوّنات. فهي تعيد إليك بالضبط ما جئت تهرب منه: ورقة أنماط عامة، وأسماء تحتاج إلى نقاش، وتعارضات في الخصوصية، وشيفرة CSS ميتة لا شيء ينبّه إليها. والجواب الصحيح يختصر في جملة واحدة: استخرج مكوّنًا، لا فئة. فالتكرار الذي ينبغي إزالته ليس قائمة الفئات، بل مقطع الترميز الذي يحملها.

استخراج مكوّن

في React أو Vue أو Svelte أو مع مكوّن Astro، تكون العملية فورية:

// components/Bouton.jsx
export function Bouton({ children, ...props }) {
  return (
    <button
      {...props}
      className="inline-flex items-center gap-2 rounded-md bg-emerald-600 px-4 py-2
                 text-sm font-medium text-white transition hover:bg-emerald-700
                 focus-visible:outline-2 focus-visible:outline-offset-2
                 focus-visible:outline-emerald-600
                 disabled:cursor-not-allowed disabled:opacity-50"
    >
      {children}
    </button>
  );
}