رموز CSS بدون Tailwind -- Social Animal

سأقول شيئاً قد يزعج البعض: توقفت عن استخدام Tailwind CSS في المشاريع الجديدة في أواخر 2025، ولم أعد إلى الوراء. ليس لأن Tailwind سيء -- فهو ممتاز فيما يفعله. لكن لأن vanilla CSS أصبح جيداً جداً بحيث لا معنى لمقايضاته بعد الآن لأنواع المشاريع التي نبنيها.

رموز التصميم في قلب هذا التحول. فكرة تخزين قرارات التصميم كمتغيرات قابلة لإعادة الاستخدام ومستقلة عن المنصة ليست جديدة. لكن الأدوات ودعم المتصفح حول خصائص CSS المخصصة في 2026 نضجت إلى النقطة حيث يمكنك بناء نظام رمز تصميم كامل بدون خطوات بناء، بدون اعتماديات، بدون حفظ أسماء فئات الأداة. دعني أريك كيف.

جدول المحتويات

ما هي رموز التصميم فعلاً
لماذا فازت vanilla CSS بي
إعداد معمارية الرمز الخاصة بك
الرموز البدائية: قيمك الخام
الرموز الدلالية: حيث يحدث السحر
رموز المكون: الطبقة الأخيرة
الوضع الليلي والمواضيع بدون إطار عمل
الرموز المتجاوبة مع استعلامات الحاوية
مزامنة رموز التصميم مع Figma
مقارنة الأداء: vanilla CSS مقابل Tailwind
هيكل ملف الرمز في العالم الحقيقي
الأدوات التي تجعل هذا عملياً
الأسئلة الشائعة

رموز تصميم CSS الأصلية بدون Tailwind في 2026

ما هي رموز التصميم فعلاً

رموز التصميم هي القيم الذرية التي تحدد لغتك البصرية. الألوان والمسافات وتنسيق الخطوط والظلال وأنصاف أقطار الحدود ومدد الحركة -- كل شيء يمثل قرار تصميم. تم صك المصطلح بواسطة فريق التصميم في Salesforce عام 2014، لكن المفهوم تطور بشكل كبير.

إليك الرؤية الرئيسية التي يفتقدها معظم الناس: رموز التصميم ليست مجرد متغيرات. إنها عقد بين التصميم والهندسة. عندما يقول المصمم "استخدم لون الإجراء الأساسي"، هذا يعيد التعيين إلى رمز، وليس قيمة hex. عندما يقولون "المسافة المتوسطة"، هذا رمز أيضاً.

نشرت مجموعة W3C Design Tokens Community Group مواصفات Design Tokens Format Module، وبينما لا تزال تتطور، تم ترسيخ الأفكار الأساسية. توجد الرموز في طبقات:

الرموز البدائية (القيم الخام مثل #1a73e8 أو 16px)
الرموز الدلالية (الأسماء المدفوعة بالغرض مثل color-action-primary)
رموز المكون (المحدود لعناصر واجهة المستخدم المحددة مثل button-background)

هذه معمارية الثلاث طبقات هي ما يجعل الأنظمة على نطاق واسع يمكن إدارتها. خصائص CSS المخصصة تعيد الخريطة إليها بشكل مثالي.

لماذا فازت vanilla CSS بي

دعني أكون صادقاً حول رحلتي. استخدمت Tailwind بسعادة لسنوات. بنيت مواقع إنتاجية معها. أوصيت بها للعملاء. لكن عدة أشياء تغيرت:

CSS اللحق. التعشيش والتحديد الديناميكي :has() واستعلامات الحاوية و@layer و@scope وcolor-mix() وoklch() وبناء جملة الألوان النسبية -- هذه ليست ميزات تجريبية بعد الآن. إنها أساسية في كل متصفح رئيسي في 2026. الثغرة التي ملأت أطر العمل للأدوات؟ انكمشت بشكل كبير.

حجم الحزمة مهم أكثر من أي وقت مضى. مع Core Web Vitals التي تؤثر مباشرة على تصنيفات البحث، كل كيلوبايت يحسب. نظام رمز تصميم vanilla CSS منظم جيداً يزن تقريباً لا شيء. مترجم Tailwind JIT ذكي، لكنه لا يزال يشحن CSS لكل أداة تستخدمها.

تكلفة الصيانة حقيقية. لقد ورثت مشاريع Tailwind حيث المكونات لديها أكثر من 30+ فئة أداة مسلسلة. قراءة className="flex items-center justify-between px-4 py-2 bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200 border border-gray-200 dark:border-gray-700" ليست ممتعة. مع رموز التصميم وطبقة رقيقة من CSS، القصد أوضح.

تحسنت عملية تسليم التصميم والهندسة. عندما تطابق الرموز في CSS رموز في Figma 1:1، تصبح المحادثات دقيقة. لا المزيد من "أي فئة Tailwind تعيين إلى متغير Figma هذا؟"

هذه ليست حرب مقدسة. إذا كان Tailwind يعمل لفريقك، استمر في استخدامه. لكن إذا كنت تبدأ شيئاً جديداً وتريد أقصى تحكم بأقل قدر من التجريد، فإن رموز vanilla CSS تستحق اعتباراً جادياً.

إعداد معمارية الرمز الخاصة بك

دعنا نبني هذا من الصفر. سأستخدم هيكل الملف الذي أصقلناه عبر عدة مشاريع Headless CMS في Social Animal، لكن يمكنك تكييفه مع احتياجاتك.

المبدأ الأساسي: الرموز تتدفق لأسفل من خلال طبقات الخصوصية.

tokens/
├── primitives.css       /* القيم الخام */
├── semantic.css         /* الأسماء المدفوعة بالغرض */
├── components/
│   ├── button.css
│   ├── card.css
│   └── input.css
├── themes/
│   ├── light.css
│   └── dark.css
└── index.css            /* تنظيم الاستيراد */

يستخدم index.css خاصتك @layer لإنشاء قاعدة واضحة:

@layer primitives, semantic, themes, components;

@import './primitives.css' layer(primitives);
@import './semantic.css' layer(semantic);
@import './themes/light.css' layer(themes);
@import './components/button.css' layer(components);
@import './components/card.css' layer(components);
@import './components/input.css' layer(components);

هذا مهم. @layer يعطيك تحكماً صريحاً على سلسلة البدء بدون القتال من أجل الخصوصية. يتم تجاوز البدائيات بواسطة الرموز الدلالية، التي يتم تجاوزها بواسطة المواضيع، التي يتم تجاوزها بواسطة المكونات. التسلسل الهرمي النظيف.

رموز تصميم CSS الأصلية بدون Tailwind في 2026 - المعمارية

الرموز البدائية: قيمك الخام

البدائيات هي لوحتك. لم يُقصد بها أن تُستخدم مباشرة في المكونات -- فكر فيها على أنها الطلاء على رفك قبل أن تقرر ماذا ستطلي.

/* primitives.css */
:root {
  /* الألوان باستخدام OKLCH لرموز موحدة بصرياً */
  --color-blue-50: oklch(0.97 0.01 250);
  --color-blue-100: oklch(0.93 0.03 250);
  --color-blue-200: oklch(0.87 0.06 250);
  --color-blue-300: oklch(0.78 0.10 250);
  --color-blue-400: oklch(0.68 0.15 250);
  --color-blue-500: oklch(0.58 0.19 250);
  --color-blue-600: oklch(0.50 0.19 250);
  --color-blue-700: oklch(0.42 0.17 250);
  --color-blue-800: oklch(0.35 0.14 250);
  --color-blue-900: oklch(0.27 0.10 250);

  /* مقياس المسافات (معياري، يستند إلى شبكة 4px) */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* مقياس الطباعة */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 1.875rem;
  --font-size-3xl: 2.25rem;
  --font-size-4xl: 3rem;

  /* أوزان الخطوط */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* نصف قطر الحدود */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* الظلال */
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px oklch(0 0 0 / 0.07);
  --shadow-lg: 0 10px 15px oklch(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px oklch(0 0 0 / 0.1);

  /* المدد */
  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;
}

أستخدم OKLCH هنا لأنه مساحة ألوان أفضل حقاً. على عكس HSL، فإن الخفة في OKLCH موحدة بصرياً -- الخفة 0.5 تبدو فعلاً مثل الرمادي الأوسط بغض النظر عن الصبغة. رموز اللون الخاصة بك تبدو متسقة عبر الطيف. جميع المتصفحات الرئيسية تدعمه الآن.

الرموز الدلالية: حيث يحدث السحر

الرموز الدلالية ترجع البدائيات وتعطيهم معنى. هذه هي الطبقة التي تجعل المواضيع ممكنة وتجعل CSS الخاصة بك موثقة ذاتياً.

/* semantic.css */
:root {
  /* ألوان السطح */
  --color-surface-primary: var(--color-white, #fff);
  --color-surface-secondary: var(--color-gray-50);
  --color-surface-tertiary: var(--color-gray-100);
  --color-surface-inverse: var(--color-gray-900);

  /* ألوان النص */
  --color-text-primary: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-600);
  --color-text-tertiary: var(--color-gray-400);
  --color-text-inverse: var(--color-white, #fff);
  --color-text-link: var(--color-blue-600);
  --color-text-link-hover: var(--color-blue-700);

  /* ألوان الإجراء */
  --color-action-primary: var(--color-blue-600);
  --color-action-primary-hover: var(--color-blue-700);
  --color-action-primary-active: var(--color-blue-800);

  /* ألوان التغذية الراجعة */
  --color-feedback-success: var(--color-green-600);
  --color-feedback-warning: var(--color-amber-500);
  --color-feedback-error: var(--color-red-600);
  --color-feedback-info: var(--color-blue-500);

  /* ألوان الحدود */
  --color-border-primary: var(--color-gray-200);
  --color-border-secondary: var(--color-gray-100);
  --color-border-focus: var(--color-blue-500);

  /* المسافات الدلالية */
  --space-inline-xs: var(--space-1);
  --space-inline-sm: var(--space-2);
  --space-inline-md: var(--space-4);
  --space-inline-lg: var(--space-6);
  --space-stack-xs: var(--space-1);
  --space-stack-sm: var(--space-2);
  --space-stack-md: var(--space-4);
  --space-stack-lg: var(--space-8);
  --space-stack-xl: var(--space-12);
}

لاحظ كيف لا يوجد قيمة مرمزة بشكل ثابت هنا. كل شيء يرجع البدائيات. إذا كنت تريد إعادة العلامة التجارية غداً، فأنت تغير البدائيات. إذا كنت تريد ضبط شعور "الإجراء الأساسي"، فأنت تغير الرموز الدلالية. كود المكون لا يحتاج أبداً إلى معرفة.

رموز المكون: الطبقة الأخيرة

رموز المكون تحدد نطاق قرارات التصميم لعناصر واجهة المستخدم المحددة. هذا اختياري للمشاريع الصغيرة ولكن ضروري لأي شيء مع نظام تصميم.

/* components/button.css */
.button {
  --_bg: var(--color-action-primary);
  --_bg-hover: var(--color-action-primary-hover);
  --_bg-active: var(--color-action-primary-active);
  --_text: var(--color-text-inverse);
  --_radius: var(--radius-md);
  --_padding-block: var(--space-2);
  --_padding-inline: var(--space-4);
  --_font-size: var(--font-size-sm);
  --_font-weight: var(--font-weight-semibold);
  --_shadow: var(--shadow-sm);
  --_transition: var(--duration-normal);

  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--_padding-block) var(--_padding-inline);
  background: var(--_bg);
  color: var(--_text);
  font-size: var(--_font-size);
  font-weight: var(--_font-weight);
  border-radius: var(--_radius);
  box-shadow: var(--_shadow);
  transition: background var(--_transition), box-shadow var(--_transition);
  border: none;
  cursor: pointer;

  &:hover {
    background: var(--_bg-hover);
    box-shadow: var(--shadow-md);
  }

  &:active {
    background: var(--_bg-active);
  }

  &.--secondary {
    --_bg: transparent;
    --_text: var(--color-action-primary);
    --_shadow: none;
    border: 1px solid var(--color-border-primary);

    &:hover {
      --_bg: var(--color-surface-secondary);
    }
  }

  &.--ghost {
    --_bg: transparent;
    --_text: var(--color-text-primary);
    --_shadow: none;

    &:hover {
      --_bg: var(--color-surface-secondary);
    }
  }
}

اتفاقية البادئة --_ (مع الشرطة السفلية) تشير إلى رموز مكون "خاصة". لا يتم فرضها بواسطة المتصفح، لكنها إشارة واضحة للمطورين الآخرين: هذه الرموز داخلية لهذا المكون.

أيضاً -- انظر كيف يعمل تعشيش CSS هنا. لا حاجة لمعالج مسبق. هذا CSS الأصلي في 2026.

الوضع الليلي والمواضيع بدون إطار عمل

هنا حيث معمارية الرمز تدفع حقاً. الوضع الليلي يصبح مسألة إعادة تعيين الرموز الدلالية.

/* themes/dark.css */
@media (prefers-color-scheme: dark) {
  :root {
    --color-surface-primary: var(--color-gray-900);
    --color-surface-secondary: var(--color-gray-800);
    --color-surface-tertiary: var(--color-gray-700);
    --color-surface-inverse: var(--color-white, #fff);

    --color-text-primary: var(--color-gray-50);
    --color-text-secondary: var(--color-gray-300);
    --color-text-tertiary: var(--color-gray-500);
    --color-text-inverse: var(--color-gray-900);
    --color-text-link: var(--color-blue-400);
    --color-text-link-hover: var(--color-blue-300);

    --color-border-primary: var(--color-gray-700);
    --color-border-secondary: var(--color-gray-800);

    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.2);
    --shadow-md: 0 4px 6px oklch(0 0 0 / 0.3);
    --shadow-lg: 0 10px 15px oklch(0 0 0 / 0.4);
  }
}

/* دعم التبديل اليدوي */
[data-theme="dark"] {
  --color-surface-primary: var(--color-gray-900);
  /* ... إعادة تعيينات متطابقة ... */
}

المكونات الخاصة بك لا تتغير على الإطلاق. صفر فئات الوضع الليلي. صفر منطق شرطي. الرموز تتعامل مع كل شيء.

تريد موضوع العلامة التجارية لعميل white-label؟ نفس النمط:

[data-theme="client-acme"] {
  --color-blue-500: oklch(0.55 0.20 280); /* أرجوانيهم بدلاً من الأزرق */
  --color-action-primary: var(--color-blue-500);
  --radius-md: 1rem; /* يحبون الزوايا الأكثر استدارة */
}

نستخدم هذا النهج بكثافة في مشاريع Next.js development حيث المواضيع المتعددة المستأجرين مطلوب شائع.

الرموز المتجاوبة مع استعلامات الحاوية

هذا شيء تقدر لا تستطيع فعله بـ Tailwind (على الأقل ليس بأناقة). استعلامات الحاوية تسمح لك بتغيير قيم الرمز بناءً على حجم الحاوية، وليس فقط حجم العرض.

.card-grid {
  container-type: inline-size;
  container-name: card-grid;
}

@container card-grid (max-width: 500px) {
  .card {
    --_padding: var(--space-3);
    --_title-size: var(--font-size-base);
    --_gap: var(--space-2);
  }
}

@container card-grid (min-width: 501px) {
  .card {
    --_padding: var(--space-6);
    --_title-size: var(--font-size-lg);
    --_gap: var(--space-4);
  }
}

المكونات التي تستجيب لسياقها الخاص بدلاً من العرض. هذا قوي بشكل خاص عند بناء مكتبات المكونات لـ مواقع Astro حيث تحصل المكونات على إعادة استخدام عبر تخطيطات مختلفة جداً.

مزامنة رموز التصميم مع Figma

متغيرات Figma (تم إطلاقها في 2023، موسعة بشكل كبير منذ ذلك الحين) تتوافق مباشرة مع نموذجنا ثلاثي الطبقات. إليك سير العمل:

حدد الرموز في Figma باستخدام لوحة المتغيرات الخاصة بهم (بدائيات → دلالية → مكون)
تصدير الرموز باستخدام إضافة Tokens Studio أو واجهة برمجة تطبيقات Figma REST
تحويل إلى CSS باستخدام Style Dictionary أو أدوات Cobalt UI الأحدث
التزام بـ repo كمجلد tokens/ الخاص بك

تكوين Style Dictionary لإخراج CSS يبدو مثل:

{
  "source": ["tokens/**/*.json"],
  "platforms": {
    "css": {
      "transformGroup": "css",
      "buildPath": "src/styles/tokens/",
      "files": [
        {
          "destination": "primitives.css",
          "format": "css/variables",
          "filter": { "filePath": "tokens/primitives" }
        },
        {
          "destination": "semantic.css",
          "format": "css/variables",
          "filter": { "filePath": "tokens/semantic" }
        }
      ]
    }
  }
}

النتيجة هي خط أنابيب CI حيث تتدفق تغييرات التصميم في Figma إلى رموز CSS الخاصة بك تلقائياً. لا ترجمة يدوية، لا انجراف.

مقارنة الأداء: vanilla CSS مقابل Tailwind

قمت بتشغيل معايير على موقع تسويق حقيقي أعدناه -- نفس التصميم، تطبيقان. إليك الأرقام:

المقياس	Tailwind v4	vanilla CSS الرموز	الفرق
إجمالي حجم CSS (مضغوط)	14.2 KB	6.8 KB	-52%
أول رسم مرضي	1.2s	1.0s	-17%
أكبر رسم مرضي	2.1s	1.8s	-14%
وقت تحليل CSS	3.2ms	1.4ms	-56%
حجم HTML (مضغوط)	28.4 KB	22.1 KB	-22%
وقت البناء	1.8s	0.4s*	-78%

*vanilla CSS مع just @import تجميع عبر Lightning CSS.

اختلاف حجم HTML ملحوظ -- فئات أداة Tailwind تضيف وزناً كبيراً لترميز الجسم الخاص بك. في صفحة تحتوي على أكثر من 200+ عنصر، تلك سلاسل الفئة تضيف.

قال، Tailwind v4 (التي تم إطلاقها في أوائل 2025) أحرزت تحسنات كبيرة مع محركها Oxide. الفجوة قد ضاقت. لكن vanilla CSS بدون اعتماديات بناء صفر يصعب التغلب عليه على أداء خام.

هيكل ملف الرمز في العالم الحقيقي

إليك الهيكل الفعلي من مشروع حديث -- موقع e-commerce بدون رأس مبني مع Next.js و Sanity:

src/styles/
├── tokens/
│   ├── primitives/
│   │   ├── colors.css
│   │   ├── spacing.css
│   │   ├── typography.css
│   │   ├── shadows.css
│   │   ├── borders.css
│   │   └── motion.css
│   ├── semantic/
│   │   ├── colors.css
│   │   ├── spacing.css
│   │   └── typography.css
│   ├── themes/
│   │   ├── light.css
│   │   ├── dark.css
│   │   └── high-contrast.css
│   └── index.css
├── components/
│   ├── button.css
│   ├── card.css
│   ├── input.css
│   ├── modal.css
│   ├── navigation.css
│   └── typography.css
├── layouts/
│   ├── grid.css
│   └── container.css
├── utilities/
│   └── helpers.css          /* عدد قليل من فئات الأداة نحتاجها حقاً */
├── reset.css
└── main.css

ملف utilities/helpers.css مثير للاهتمام -- أنا لا تزال أكتب عدة فئات أداة لأنماط قابلة لإعادة الاستخدام بحق:

/* utilities/helpers.css */
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.flow > * + * {
  margin-block-start: var(--flow-space, var(--space-stack-md));
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, var(--space-inline-md));
  align-items: center;
}

لاحظ كيف حتى الأدوات ترجع الرموز. كل شيء يبقى متصل.

الأدوات التي تجعل هذا عملياً

أنت لا تحتاج الكثير، لكن بعض الأدوات تجعل DX بشكل كبير أفضل:

الأداة	الغرض	الملاحظات
Lightning CSS	التجميع والتقليل وإضافة بادئات البائع	يحل محل PostCSS لمعظم الحالات. سريع جداً.
Style Dictionary 4	تحويل تنسيق الرمز	Figma → CSS، iOS، Android من مصدر واحد
Cobalt UI	أداة رمز DTCG W3C	بديل أحدث لـ Style Dictionary، مواءمة المواصفات
Tokens Studio	إضافة Figma لإدارة الرموز	أفضل تكامل Figma في فئتها
CSS Utility Kit (VS Code)	إكمال ذاتي للخصائص المخصصة	يعرض قيم الرموز عند التحويم
Open Props	مكتبة خصائص CSS مخصصة مُعدة مسبقاً	بداية عظيمة إذا كنت لا تريد بناء من الصفر

Lightning CSS يستحق استدعاء خاص. مكتوب في Rust، يتعامل مع دمج @import والتعشيش الحد وتقليل في تمرير واحد. إنها ما نستخدمه في معظم بناء Headless CMS الآن.

lightningcss --bundle --minify src/styles/main.css -o dist/styles.css

هذا هو. لا تكوين PostCSS. لا سلسلة إضافة. أمر واحد.

الأسئلة الشائعة

هل يمكنني استخدام رموز التصميم بدون خطوة بناء؟

بالتأكيد. إذا كنت تستهدف متصفحات حديثة (وفي 2026، يجب أن تكون)، فإن خصائص CSS المخصصة الأصلية تعمل بدون أي تجميع. الشيء الوحيد الذي تفقده هو دمج @import في ملف واحد -- المتصفحات تتعامل مع استيراد ملفات CSS المتعددة بشكل جيد، على الرغم من أنك تريد تجميع الإنتاج للأداء. Lightning CSS أو حتى أمر cat البسيط يمكن أن يتعامل مع ذلك.

كيف تقارن رموز التصميم vanilla CSS مع Tailwind v4؟

تحرك Tailwind v4 فعلاً نحو خصائص CSS المخصصة داخلياً، وهو ما يصادق على النهج. الفرق في تجربة المطور: Tailwind يعطيك فئات أداة لتطبيقها في HTML، بينما رموز vanilla تعطيك متغيرات تصميم لاستخدامها في CSS الخاصة بك. الرموز vanilla تنتج أصغر حجم CSS وHTML، وتوفر مرونة أكثر للمواضيع، ولا تتطلب تعلم نظام تسمية فئات. Tailwind يوفر نماذج أسرع والمزيد من إنفاذ الاتساق للفرق الأكبر.

ماذا بخصوص نوع TypeScript الأمان لرموز التصميم؟

إذا كنت تستخدم CSS Modules أو CSS-in-JS، يمكنك إنشاء أنواع TypeScript من ملفات الرمز الخاصة بك. كل من Style Dictionary 4 و Cobalt UI يدعمان إخراج TypeScript. لـ pure CSS، توسعات VS Code مثل CSS Variable Autocomplete تعطيك أمان مستوى المحرر مع الإكمال والتحقق.

هل يجب أن أستخدم Open Props بدلاً من بناء الرموز الخاصة بي؟

Open Props هو نقطة بداية ممتازة، خاصة للنماذج الأولية أو المشاريع الأصغر. فهو يوفر مجموعة مصممة جيداً من خصائص CSS المخصصة مباشرة. لأنظمة التصميم الإنتاجية، على الرغم من ذلك، ستريد على الأرجح تعريف البدائيات الخاصة بك التي تتطابق مع العلامة التجارية الخاصة بك. يمكنك استخدام Open Props كمرجع والاستفادة من نهجه للأشياء مثل وظائف التخفيف أو مقاييس الظل.

كيف أتعامل مع رموز التصميم في monorepo مع تطبيقات متعددة؟

أنشئ حزمة tokens مشتركة تصدر ملفات CSS الخاصة بك. كل تطبيق يستورد حزمة الرمز ويمكنه إضافة تجاوزات موضوع خاصة به. يعمل هذا بشكل جميل مع مساحات عمل في pnpm أو npm. لقد فعلنا هذا لعملاء e-commerce متعددة العلامات التجارية حيث يشارك كل عرض متجر نفس رموز البدائيات ولكن لديه تعيينات دلالية فريدة.

هل vanilla CSS أبطأ في التطور بـ Tailwind؟

في البداية، نعم -- أنت تعد البنية التحتية التي Tailwind يعطيك مجاناً. لكن بعد الأسبوع الأول أو الثاني، السرعة مماثلة أو أسرع. أنت لا تقوم بالتبديل بين HTML ومرجع فئة الأداة. أنت تكتب CSS التي تقرأ مثل الإنجليزية. وعندما تحتاج إلى تغيير شيء ما، تغيره في مكان واحد بدلاً من البحث عن كل حالة bg-blue-500.

كيف أقنع فريقي بترك Tailwind؟

لا تؤطرها كترك Tailwind -- أطرها كاعتماد رموز التصميم. ابدأ بإدخال طبقة رمز بجانب Tailwind: حدد خصائص مخصصة، ارجع إليها في tailwind.config موضوع. بمرور الوقت، قد تجد أن نظام الرمز يقوم بمعظم العمل و Tailwind يصبح اختيارياً. دع الفريق يصل إلى هذا الاستنتاج بشكل عضوي.

ماذا بخصوص مكتبات المكون مثل Shadcn/UI التي تعتمد على Tailwind؟

Shadcn/UI رائع، لكن اعتماد Tailwind هو تفاصيل التطبيق، وليس معمارية أساسية. أنماط المكون والمنطق إمكانية الوصول هو ما يهم. عدة فروع مجتمع قد ظهرت استخدام vanilla CSS الرموز بدلاً من فئات Tailwind. يمكنك أيضاً تهجير مكون Shadcn تدريجياً لاستخدام نظام الرمز الخاص بك -- البدائيات Radix UI الأساسية لا تهتم كيف تنسق لهم.

هل يمكنني استخدام هذا النهج مع Astro أو Next.js؟

بالتأكيد. كل من الإطارات تتعامل مع vanilla CSS بشكل أصلي بدون تكوين. أنماط محدود Astro تعمل بشكل مثالي مع خصائص CSS المخصصة لأن الرموز المحددة في :root تنتشر بطبيعتها إلى أنماط مكون محدود. Next.js يدعم CSS Modules بجانب ملفات الرمز العامة. نستخدم هذا الإعداد بالضبط في مشاريع Next.js الخاصة بنا وبناء Astro بانتظام. إذا كنت تستكشف هذا لمشروع جديد، تواصل معنا -- نحن سعداء لمشاركة ما تعلمناه.