مقدمة مدتها 5 دقائق للمكونات الأنيقة

CSS غريب. يمكنك معرفة أساسيات ذلك في 15 دقيقة. ولكن قد يستغرق الأمر سنوات حتى تكتشف طريقة جيدة لتنظيم أنماطك.

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

صفائح الفوضى النمط

نظرًا لأنك ربما تكون قد مررت بنفسك ، فغالبًا ما تكون هذه وصفة للفوضى. وعلى الرغم من أن المعالجات الأولية مثل SASS و LESS تضيف الكثير من الميزات المفيدة ، إلا أنها لا تفعل الكثير لإيقاف فوضى CSS.

تم ترك هذه المهمة التنظيمية لمنهجيات مثل BEM ، والتي - رغم أنها مفيدة - تعتبر اختيارية تمامًا ، ولا يمكن تطبيقها على مستوى اللغة أو الأدوات.

الموجة الجديدة من CSS

تقدم سريعًا لمدة عامين ، وموجة جديدة من الأدوات المستندة إلى JavaScript تحاول حل هذه المشكلات من جذورها ، عن طريق تغيير طريقة كتابة CSS.

تعد Styled Components إحدى هذه المكتبات ، وقد جذبت الكثير من الاهتمام بسرعة بسبب مزيجها من الابتكار والألفة. لذلك إذا كنت تستخدم React (وإذا لم تقم بذلك ، تحقق من خطة دراسة جافا سكريبت الخاصة بي ومقدمي لـ React) ، فإن الأمر يستحق بالتأكيد إلقاء نظرة على بديل CSS الجديد هذا.

لقد استخدمته مؤخرًا لإعادة تصميم موقعي الشخصي ، واليوم أردت مشاركة بعض الأشياء التي تعلمتها في هذه العملية.

مكونات ، نصب

الشيء الرئيسي الذي تحتاج إلى فهمه عن مكونات Styled هو أن اسمها يجب أن يؤخذ حرفيًا تمامًا. لم تعد تقوم بتصميم عناصر أو مكونات HTML بناءً على الفئة أو عنصر HTML الخاص بهم:

Hello World

h1.title {
  حجم الخط: 1.5em ؛
  اللون البنفسجي؛
}

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

استيراد نصب من "المكونات على غرار" ؛
const العنوان = styled.h1`
  حجم الخط: 1.5em ؛
  اللون البنفسجي؛
`.
<عنوان> Hello World 

قد يبدو هذا اختلافًا بسيطًا ، وفي الواقع كلا الجملتين متشابهتين جدًا. لكن الفرق الرئيسي هو أن الأنماط أصبحت الآن جزءًا من مكوناتها.

بمعنى آخر ، نتخلص من فئات CSS كخطوة وسيطة بين المكون وأساليبه.

كما يقول المؤلف المبتكر المساعد ماكس ستويبر:

"إن الفكرة الأساسية للمكونات المصممة هي فرض أفضل الممارسات عن طريق إزالة التعيين بين الأنماط والمكونات."

تفريغ التعقيد

سيبدو هذا الأمر غير بديهي في البداية ، لأن الهدف الكامل من استخدام CSS بدلاً من تصميم عناصر HTML مباشرة (تذكر علامة ؟) هو فصل الأنماط والعلامات عن طريق إدخال طبقة الطبقة الوسيطة هذه.

ولكن هذا الفصل يخلق أيضًا الكثير من التعقيد ، وهناك حجة يجب مقارنتها بأن CSS ، لغة البرمجة "الحقيقية" مثل JavaScript مجهزة بشكل أفضل للتعامل مع هذا التعقيد.

الدعائم أكثر من الطبقات

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

ستكون Hello World

// باللون الأزرق
h1.title {
  حجم الخط: 1.5em ؛
  اللون البنفسجي؛
  
  &.ابتدائي{
    لون أزرق؛
  }
}

كنت تكتب:

const العنوان = styled.h1`
  حجم الخط: 1.5em ؛
  اللون: $ {props => props.primary؟ 'الأزرق الأرجواني'}؛
`.
سيكون <العنوان الأساسي> Hello World  // باللون الأزرق

كما ترون ، تتيح لك المكونات الأنيقة تنظيف مكونات React الخاصة بك عن طريق الحفاظ على تفاصيل تطبيق CSS و HTML ذات الصلة بها.

ومع ذلك ، لا يزال CSS على غرار المكونات CSS. هكذا أشياء مثل هذه صالحة أيضًا تمامًا (على الرغم من أنها غير اصطلاحية قليلاً):

const العنوان = styled.h1`
  حجم الخط: 1.5em ؛
  اللون البنفسجي؛
  
  &.ابتدائي{
    لون أزرق؛
  }
`.
 ستكون Hello World  // باللون الأزرق

هذه إحدى الميزات التي تجعل من السهل جدًا الوصول إلى المكونات المصممة: عندما يكون لديك شك ، يمكنك دائمًا الرجوع إلى ما تعرفه!

تحفظات

من المهم أيضًا الإشارة إلى أن المكونات المُصممة لا تزال مشروعًا شابًا ، وأن بعض الميزات لا تدعمها بالكامل حتى الآن. على سبيل المثال ، إذا كنت ترغب في تصميم مكون فرعي من أحد الوالدين ، فسوف يتعين عليك الاعتماد على استخدام فئات CSS في الوقت الحالي (على الأقل حتى ظهور styled-components v2).

لا توجد أيضًا طريقة "رسمية" لتقديم CSS مسبقًا على الخادم حتى الآن ، على الرغم من أنه من الممكن بالتأكيد عن طريق حقن الأنماط يدويًا.

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

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

أعرف أكثر

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

إذا تمكنت من جعلك تشعر بالفضول ، فإليك بعض الأماكن التي يمكنك من خلالها معرفة المزيد عن المكونات المصممة:

  • كتب ماكس ستويبر مؤخرًا مقالًا عن سبب مكونات التصميم لمجلة Smashing.
  • الريبو على غرار المكونات نفسها لديها وثائق واسعة النطاق.
  • توضح هذه المقالة التي كتبها جيمي ديكسون بعض فوائد التبديل إلى المكونات الأنيقة.
  • إذا كنت تريد معرفة المزيد حول كيفية تنفيذ المكتبة فعليًا ، تحقق من هذه المقالة بواسطة Max.

وإذا كنت ترغب في الذهاب إلى أبعد من ذلك ، يمكنك أيضًا التحقق من Glamour ، وهي طريقة مختلفة عن CSS!

وقت الترويج الذاتي: نحن نبحث عن مساهمين من المصادر المفتوحة للمساعدة في Nova ، وهي أسهل طريقة لإنشاء تطبيقات React & GraphQL كاملة التكمل مع النماذج وتحميل البيانات وحسابات المستخدمين. لا نستخدم المكونات الأنيقة ، لكن قد تكون أول من قام بتطبيقها!