اصطلاحات تسمية الرموز

تجعل أسماء الرموز غير المتسقة من المستحيل توقع وظيفة الرمز من دون قراءة قيمته. ويُعد اصطلاح التسمية الواضح والمتوقع أساسًا لنظام رموز قابل للتوسع.

من الأنماط الشائعة: [category]-[property]-[variant]. ومن أمثلته: color-text-primary وcolor-text-secondary وspacing-inset-sm. ويضيّق كل جزء المعنى تدريجيًا.

تجنب استخدام أسماء لوحة الألوان مثل blue-500 في المكوّنات. واستخدم أسماء دلالية مثل: color-action-default وcolor-feedback-error. وتظل الأسماء الدلالية صالحة عند تغيير ألوان العلامة التجارية من دون تحديث المكوّنات.

أضف الحالة في النهاية: color-button-bg-default وcolor-button-bg-hover وcolor-button-bg-disabled. وتجعل لواحق الحالات المتسقة مجموعات الرموز قابلة للتوقع ومتكاملة.

استخدم أحجام الملابس (xs وsm وmd وlg وxl) أو المقاييس الرقمية (100 و200...900) باتساق. وتتيح المقاييس الرقمية إدراج قيم وسيطة، بينما تكون أحجام الملابس أسهل قراءةً في المجموعات الصغيرة.

في الأنظمة متعددة العلامات التجارية أو المنتجات، أضف بادئة مساحة أسماء إلى الرموز: brand-a-color-primary مقابل brand-b-color-primary. وتمنع مساحات الأسماء التعارض عند دمج مجموعات الرموز.

تُحوَّل صيغة kebab-case مباشرةً إلى خصائص CSS مخصّصة: يصبح color-text-primary هو --color-text-primary. أما رموز camel-case فتحتاج إلى تحويل، بخلاف رموز kebab-case.

تكون الأسماء الجيدة موثّقة ذاتيًا: يوضّح spacing-stack-md، أي المسافة الرأسية بين العناصر المتراصة بالحجم المتوسط، الغرض منه من دون تعليق. أما الأسماء الضعيفة مثل s3 فتتطلب توثيقًا خارجيًا لفهمها.

بعد البدء باستخدام الرموز، تُعد إعادة تسميتها تغييرات غير متوافقة. استخدم أسماء بديلة للإيقاف: احتفظ بالاسم القديم، واجعله يشير إلى الرمز الجديد. وامنح المستهلكين فترة للترحيل قبل إزالة الرموز المتوقفة.

تحقق من أسماء الرموز باستخدام قواعد مخصّصة في Style Dictionary أو باستخدام نص برمجي في CI. وارفض الرموز التي لا تطابق نمط التسمية. ويمنع الفرض الآلي لانحراف التسمية مع نمو النظام.

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

لماذا ينبغي أن تستخدم رموز المكوّنات أسماءً دلالية بدلًا من أسماء لوحات الألوان مثل "blue-500"؟

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