تقليل تكرار الأنماط باستخدام دوال CSS

غالبًا ما يؤدي الاحتفاظ بأوراق أنماط كبيرة إلى تكرار المنطق، خاصةً عند التعامل مع رموز نظام التصميم، مثل التدرجات أو أنماط التنسيق المتجاوبة.

تتيح لك القاعدة @function في CSS تضمين هذا المنطق في دوال قابلة لإعادة الاستخدام ومحدّدة المَعلمات، ما يجعل CSS أكثر قابلية للصيانة والاتساق وDRY (لا تكرّر نفسك).

بنية @function

يتم تحديد دالة مخصّصة باستخدام القاعدة @function متبوعة باسم يتضمّن شرطة وقائمة من المَعلمات. تُرجع الدالة قيمة باستخدام السمة result.

@function --my-function(--input1 <length>, --input2: default-value) returns <length> {
  /* Logic goes here */
  result: var(--input1);
}

المفاهيم الرئيسية

• المَعلمات: يجب أن تبدأ بشرطة مزدوجة (--).
• القيم التلقائية: يمكنك تقديم قيم تلقائية باستخدام نقطتَين رأسيتَين (:).
• النتيجة: تحدّد السمة result القيمة التي تعرضها الدالة. ويتم استخدام آخر result تم تعريفه في نص الدالة.
• تحديد النطاق: يتم تحديد نطاق المَعلمات والمتغيّرات المحدّدة داخل الدالة محليًا.
• الأنواع: يمكنك طلب أن تتطابق المَعلمات والقيمة المعروضة مع نوع CSS باستخدام تدوين الأقواس (مثل <color>) والسماح بأنواع متعددة باستخدام الدالة type (مثل type(<number> | <percentage>)).

أمثلة عملية

1. رموز نظام التصميم (التدرّجات)

يمكنك ضمان تدرّجات ألوان متسقة في تطبيقك من خلال تضمين منطق التدرّج. يوفّر --angle قيمة تلقائية لضمان الاتساق، ويمكن إلغاؤها.

@function --fancy-gradient(--start-color <color>, --end-color <color>, --angle: 98deg) returns <image>{
  result: linear-gradient(in oklab var(--angle), var(--start-color), var(--end-color) );
}

.card {
  background: --fancy-gradient(#ed73d7, #5d87e9);
}

2. منطق التنسيق الشرطي

يمكنك استخدام @media أو طلبات بحث أخرى مباشرةً داخل دالة لعرض قيم مختلفة استنادًا إلى البيئة. عند استخدام المنطق الشرطي في دالة، يُرجى العِلم أنّ @function لا "تعرض" القيمة الأولى لـ result، بل تتبع تسلسل CSS، وتتحوّل إلى آخر قيمة تتطابق استنادًا إلى حجم الشاشة أو حجم الحاوية أو طلب بحث آخر.

@function --grid-template(--count <number>){
  /* MANDATORY: Put default value first. */
  result: 1fr; /* Default: stack */
  @media (min-width: 800px) {
    result: repeat(var(--count), 1fr); /* Grid on larger screens */
  }
}

main {
  display: grid;
  grid-template-columns: --grid-template(2);
}

أفضل الممارسات

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

استراتيجيات احتياطية

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

.card {
  /* Provide fallback, in this case a solid color. */
  background: #5d87e9;
  background: --fancy-gradient(#ed73d7, #5d87e9);
}

main {
  /* Provide fallback, in this case a simple stacked default. */
  grid-template-columns: 1fr;
  grid-template-columns: --grid-template(2);
}

إذا كان من الضروري تقليل تكرار الأنماط مع إتاحة المتصفحات الأخرى، يمكنك استخدام برنامج تجميع مسبق لـ CSS مع دوال، مثل Sass.