مزايا استخدام "السمات المخصّصة" في أنظمة التصميم ومكتبات المكونات
اسمي "ديف"، وأنا كبير مطوّري الواجهة الأمامية في شركة Nordhealth. أعمل على تصميم وتطوير نظام التصميم Nord، الذي يتضمّن إنشاء مكونات ويب لمكتبة المكونات. أردت أن أشارك كيفية حلّ المشاكل المتعلقة بتصميم مكونات الويب باستخدام الخصائص المخصّصة في CSS، وبعض المزايا الأخرى لاستخدام الخصائص المخصّصة في أنظمة التصميم ومكتبات المكوّنات.
كيفية إنشاء مكوّنات الويب
لإنشاء مكونات الويب، نستخدم Lit، وهي مكتبة توفّر الكثير من الرموز البرمجية المتكررة، مثل الحالة والأنماط على مستوى النطاق والنماذج وغير ذلك. لا يقتصر استخدام Lit على التطبيقات الخفيفة الوزن، بل تم إنشاؤه أيضًا استنادًا إلى واجهات برمجة تطبيقات JavaScript الأصلية، ما يعني أنّه يمكننا تقديم حِزمة رمز برمجي بسيطة تستفيد من الميزات التي يمتلكها المتصفّح.
ولكن أهم ما يميز Web Components هو أنّها تعمل مع أي إطار عمل JavaScript حالي تقريبًا، أو حتى بدون إطار عمل على الإطلاق. بعد الإشارة إلى حزمة JavaScript الرئيسية في الصفحة، يشبه استخدام مكوّن الويب إلى حد كبير استخدام عنصر HTML أصلي. إنّ العلامة الوحيدة التي تدل على أنّ العنصر ليس عنصر HTML أصليًا هي الواصلة المتسقة داخل العلامات، وهي معيار للإشارة إلى المتصفّح بأنّ هذا عنصر ويب.
تغليف نمط Shadow DOM
تمامًا مثل عناصر HTML الأصلية التي تتضمّن Shadow DOM، تتضمّن مكونات الويب أيضًا Shadow DOM. Shadow DOM هي شجرة مخفية من العقد داخل عنصر. وأفضل طريقة لعرض ذلك هي من خلال فتح "أداة فحص الويب" وتفعيل خيار "عرض شجرة Shadow DOM". بعد إجراء ذلك، حاوِل الاطّلاع على عنصر إدخال أصلي في أداة الفحص. سيكون لديك الآن خيار فتح هذا الإدخال والاطّلاع على جميع العناصر التي يحتوي عليها. يمكنك أيضًا تجربة ذلك باستخدام أحد مكوّنات الويب، ويمكنك فحص مكوّن الإدخال المخصّص للاطّلاع على Shadow DOM.
من مزايا نموذج Shadow DOM (أو عيوبه، حسب وجهة نظرك) هي تغليف الأنماط. إذا كتبت ملف CSS ضمن مكوّن الويب، لا يمكن أن تتسرّب هذه الأنماط وتؤثر في الصفحة الرئيسية أو العناصر الأخرى، بل تكون محصورة بالكامل داخل المكوّن. بالإضافة إلى ذلك، لا يمكن أن يتسرّب ملف CSS المكتوب للصفحة الرئيسية أو مكوّن ويب رئيسي إلى مكوّن الويب.
ويشكّل هذا التجميع للأنماط ميزة في مكتبة المكوّنات. يمنحنا ذلك ضمانة أكبر بأنّه عندما يستخدم أحد الأشخاص أحد مكوّناتنا، سيظهر بالشكل الذي أردناه، بغض النظر عن الأنماط المطبّقة على الصفحة الرئيسية. وللتأكّد بشكل أكبر، نضيف all: unset;
إلى الجذر أو "المضيف" لجميع مكوّنات الويب.
ولكن ماذا لو كان لدى مستخدم عنصر الويب سبب مشروع لتغيير أنماط معيّنة؟ هل هناك سطر نص يحتاج إلى المزيد من التباين بسبب سياقه، أو هل يجب أن يكون أحد الحدود أكثر سمكًا؟ إذا لم يكن بإمكان أي أنماط الوصول إلى المكوّن، كيف يمكنك الاستفادة من خيارات التصميم هذه؟
وهنا يأتي دور "الخصائص المخصّصة في CSS".
الخصائص المخصّصة لصفحات الأنماط المتتالية (CSS)
تم تسمية الخصائص المخصّصة بشكل مناسب جدًا، فهي خصائص CSS يمكنك تسميتها بنفسك بالكامل وتطبيق أي قيمة مطلوبة. الشرط الوحيد هو أن تضيف إليهما واصلة قبلهما. بعد تحديد السمة المخصّصة، يمكن استخدام القيمة في CSS باستخدام الدالة var()
.
في ما يتعلّق بالاكتساب، يتم اكتساب جميع "السمات المخصّصة"، ما يتّبع السلوك المعتاد لسمات CSS وقيمها العادية. يمكن استخدام أيّ سمة مخصّصة تمّ تطبيقها على عنصر رئيسي أو على العنصر نفسه كقيمة في سمات أخرى. نستخدم بكثرة "الخصائص المخصّصة" لعناصر الرمز المميّز للتصميم من خلال تطبيقها على العنصر الجذر من خلال إطار عمل CSS، ما يعني أنّه يمكن لجميع العناصر على الصفحة استخدام قيم الرموز المميّزة هذه، سواء كان ذلك عنصر ويب أو فئة مساعدة CSS أو مطوّر يريد اختيار قيمة من قائمة الرموز المميّزة.
إنّ هذه القدرة على اكتساب السمات المخصّصة باستخدام الدالة var()
هي الطريقة التي نتمكّن من خلالها من اختراق Shadow DOM في مكونات الويب والسماح للمطوّرين بالتحكم بشكل أدق عند تصميم مكوّناتنا.
الخصائص المخصّصة في مكوّن Nord Web Component
عندما نطوّر مكوّنًا لنظام التصميم، نتّبع نهجًا مدروسًا في تنسيق CSS، ونسعى إلى إنشاء رمز برمجي بسيط وسهل الصيانة. يتم تعريف الرموز المميّزة للتصميم التي نستخدمها على أنّها سمات مخصّصة ضمن إطار عمل CSS الرئيسي في العنصر الجذر.
ويتم بعد ذلك الإشارة إلى قيم الرموز المميّزة هذه ضمن مكوّناتنا. في بعض الحالات، سنطبّق القيمة مباشرةً على موقع CSS، ولكن في حالات أخرى، سنحدّد في الواقع خاصيّة مخصّصة جديدة مستندة إلى السياق ونطبّق القيمة عليها.
سنلخّص أيضًا بعض القيم الخاصة بالمكوّن ولكن ليست في الرموز المميّزة ونحوّلها إلى خاصية مخصّصة سياقية. تقدّم لنا السمات المخصّصة ذات الصلة بالسياق للمكوّن ميزتَين رئيسيتين. أولاً، يعني ذلك أنّه يمكننا استخدام CSS بشكل أكثر كفاءة، لأنّه يمكن تطبيق هذه القيمة على سمات متعددة داخل المكوّن.
وثانيًا، تجعل هذه الطريقة تغييرات حالة المكوّن والأسعار المتغيرة أكثر وضوحًا، إذ لا يلزم تغيير سوى السمة المخصّصة لتعديل كل هذه السمات عند تصميم حالة تمرير مؤشر الماوس أو الحالة النشطة أو، في هذه الحالة، السعر المتغير.
ولكن الميزة الأكثر فعالية هي أنّه عند تحديد هذه السمات المخصّصة السياقية في أحد المكوّنات، ننشئ نوعًا من واجهة برمجة تطبيقات مخصّصة لتنسيق CSS لكل مكوّن من مكوّناتنا، ويمكن لمستخدم هذا المكوّن الاستفادة منها.
يعرض المثال السابق أحد مكوّنات الويب التي تتضمّن خاصيّة مخصّصة سياقية تم تغييرها من خلال أداة اختيار. نتيجةً لهذا النهج بالكامل، تم إنشاء مكوّن يقدّم للمستخدم مرونة كافية في التصميم مع الحفاظ على معظم الأنماط الفعلية. بالإضافة إلى ذلك، يمكننا كمطوّري المكوّنات اعتراض هذه الأنماط التي يطبّقها المستخدم. إذا أردنا تعديل إحدى هذه السمات أو تمديدها، يمكننا إجراء ذلك بدون أن يحتاج المستخدم إلى تغيير أي من رمزه.
نجد أنّ هذا النهج مؤثر للغاية، ليس فقط بالنسبة إلينا بصفتنا صنّاع مكونات نظام التصميم، ولكن أيضًا لفريق التطوير عند استخدام هذه المكوّنات في منتجاتنا.
الاستفادة إلى أقصى حد من الخصائص المخصّصة
في وقت كتابة هذه المقالة، لا نكشف عن هذه السمات المخصّصة السياقية في مستنداتنا، ولكننا نخطّط لذلك حتى يتمكّن فريق التطوير الأوسع نطاقًا من فهم هذه السمات والاستفادة منها. يتم تجميع مكوّناتنا على npm باستخدام ملف بيان يحتوي على كل ما يمكن معرفته عنها. بعد ذلك، نستخدم ملف البيان كبيانات عند نشر موقعنا الإلكتروني المخصّص للمستندات، وذلك باستخدام Eleventy وميزة "البيانات الشاملة". نحن نخطّط لإدراج هذه السمات المخصّصة السياقية في ملف بيانات البيان هذا.
هناك مجال آخر نريد تحسينه وهو كيفية اكتساب هذه المواقع المخصّصة السياقية للقيم. على سبيل المثال، إذا أردت حاليًا تعديل لون مكوّنَي فاصل، عليك استهداف هذين المكوّنَين تحديدًا باستخدام أدوات الاختيار، أو تطبيق السمة المخصّصة مباشرةً على العنصر الذي يتضمّن سمة style. قد يبدو هذا الأمر جيدًا، ولكن سيكون من المفيد أكثر أن يتمكّن المطوّر من تحديد هذه الأنماط على عنصر يحتوي عليها أو حتى على مستوى الجذر.
عليك ضبط قيمة السمة المخصّصة مباشرةً على المكوّن لأنّنا نحدّدها على العنصر نفسه من خلال أداة اختيار مضيف المكوّن. إنّ الرموز المميّزة للتصميم الشاملة التي نستخدمها مباشرةً في المكوّن تمرّ مباشرةً بدون أن تتأثر بهذه المشكلة، ويمكن اعتراضها حتى في العناصر الرئيسية. كيف يمكننا الاستفادة من مزايا كلتا الطريقتَين؟
الخصائص المخصّصة الخاصة والعامة
السمات المخصّصة الخاصة هي سمات أنشأتها Lea Verou، وهي سمة مخصّصة "خاصة" سياقية في المكوّن نفسه، ولكن تم ضبطها على سمة مخصّصة "عامة" مع سمة احتياطية.
يعني تحديد السمات المخصّصة السياقية بهذه الطريقة أنّه لا يزال بإمكاننا تنفيذ جميع الإجراءات التي كنا ننفذها من قبل، مثل اكتساب قيم الرموز المميّزة الشاملة وإعادة استخدام القيم في رمز المكوّن، ولكن سيكتسِب المكوّن أيضًا بنجاح تعريفات جديدة لهذه السمة في نفسه أو في أي عنصر رئيسي.
على الرغم من أنّه يمكن القول إنّ هذه الطريقة ليست "خاصة" حقًا، إلا أنّنا نعتقد أنّها حلّ رائع لمشكلة كانت تثير قلقنا. سنعالج هذه المشكلة في المكوّنات عندما تتوفر لنا الفرصة، ما يتيح لفريق التطوير التحكّم بشكل أكبر في استخدام المكوّنات مع الاستفادة من الإجراءات الوقائية التي وضعناها.
نأمل أن تكون هذه الإحصاءات حول كيفية استخدامنا لمكوّنات الويب مع السمات المخصّصة لتنسيق CSS مفيدة لك. يُرجى إطلاعنا على رأيك، وإذا قرّرت استخدام أيّ من هذه الطرق في عملك، يمكنك التواصل معي على Twitter @DavidDarnes. يمكنك أيضًا العثور على Nordhealth @NordhealthHQ على Twitter، بالإضافة إلى بقية فريقي الذي عمل بجدّ على تجميع نظام التصميم هذا وتنفيذ الميزات المذكورة في هذه المقالة: @Viljamis و@WickyNilliams و@eric_habich.
الصورة الرئيسية تقدّمها Dan Cristian Pădureț