أنواع الفئات
الفئات المساعدة
الفئات يتم إنشاؤها باستخدام مجموعة محددة من خصائص CSS التي يمكن تطبيقها على العناصر عالميًا عبر المشروع.
جميع الفئات المساعدة هي فئات عالمية بطبيعتها. مفهوم الفئة المساعدة هي فئة تساعد في تطبيق خصائص CSS العالمية داخل المشروع.
على سبيل المثال ، أضفنا فئة مساعدة background-color-gray في مشروع Client-First لمساعدتنا في تنظيم وإدارة ألوان الخلفية متكررة الاستخدام في جميع أنحاء المشروع.
أضفنا font-size-large في مشروع Client-First لمساعدتنا في تنظيم وإدارة حجم الطباعة الموحد في جميع أنحاء المشروع.
لن تستخدم فئات الأدوات شرطة سفلية في اسم الفئة.
الفئات المخصصة
فئة مخصصة يتم إنشاؤها لمكون معين ، أو صفحة ، أو مجموعة من العناصر ، أو عنصر واحد.
نحن نطلق على هذه الفئة "المخصصة" لأنها مخصصة خارج الفئات المساعدة الخاصة بمشروعنا. يجب إنشاء الفئات المخصصة عندما لا يمكن أو لا ينبغي استخدام فئات المساعدة في عنصر ما. الفئة مخصصة لهذا العنصر.
على سبيل المثال ، فئة لتصميم عنصر معين في رؤوس الصفحات المشروع ، header_background-layer.
على سبيل المثال ، فئة لتصميم عنصر معين في شريحة التوصيات ، testimonial-slider_headshot
في Client-First ، تستخدم الفئات المخصصة شرطة سفلية في اسم الفئة.
الفئات العالمية
هي تصنيف لبعض الفئات. تم تصميم فئة عالمية للاستخدام في جميع أنحاء المشروع بأكمله. من الممكن أن تكون كل من الفئات المساعدة و الفئات المخصصة فئات عالمية.
تطبق الفئة العالمية الأنماط التي ستبقى موحدة عبر المشروع. الفئة العالمية ليست لحالة معينة.
تعني كلمة "عالمي" في كل مكان وفي أي مكان في المشروع.
جميع الفئات المساعدة هي فئات عالمية. الفئات المساعدة هي عالمية بطبيعتها.
على سبيل المثال ، تعتبر فئات الهامش (margin) والحشو(padding) لدينا فئات مساعدة عالمية. margin-large له قيمة هامش تبلغ 3rem. عندما نقوم بتحديث هذه القيمة إلى 4rem ، سيتم تحديث كل عنصر يستخدم margin-large إلى 4rem.
margin-large هي أداة تحكم عالمية تعمل على تغيير قيمة الهامش والحشو الخاص بنا عبر المشروع. يمكننا إجراء تغييرات عالمية مؤثرة على مشروعنا عندما نستخدم فئات المساعدة العالمية بشكل صحيح.
لا تقتصر الفئات العالمية على الفئات المساعدة. يتم الآن تعريف الفئات العالمية بشكل أكثر وضوحًا على أنها أي نوع من الفئات التي تنوي الحصول على إدارة عالمية للأنماط في الموقع بشكل الكامل.
في Client-First الإصدار 2 ، نوضح بشكل أفضل ونشجع استخدام الفئات المخصصة كفئات عالمية.
على سبيل المثال ، يمكن أن تكون faq_item فئة مخصصة عالمية. لدينا العديد من أقسام الأسئلة الشائعة في جميع أنحاء الموقع ، ويتم استخدام faq_item لإدارة عناصر الأسئلة الشائعة عبر المشروع بأكمله.
على سبيل المثال ، يمكن أن يكون header_content فئة مخصصة عالمية. لدينا عنصر رأس في كل صفحة من صفحات المشروع. تدير هذه الفئة تخصيص غلاف المحتوى (content wrapper) هذا عالميًا عبر المشروع بأكمله.
الفئات المركبة
الفئة المركبة هي البديل للفئة الأساسية. ترثالفئة المركبة الأنماط من الفئة الأساسية وتضيف المزيد من الأنماط فوقها.
نحدد "الفئة الأساسية" على أنها الفئة الأولى في قائمة الفئات المكدسة فوق بعضها في الفئة المركبة. نضيف فئة أعلى الفئة الأساسية لإنشاء نسخة فريدة.
تستخدم الفئة المضافة التي تعطي التباين الفريد بادئة الفئة is-.
ستعمل الفئة المركبة المكدسة فقط عند دمجها مع الفئة (الفئات) الأساسية قبلها. في الفيديو أدناه ، عليك ان تفهم أن is-blue لا يعمل بمفرده. إنه يعمل فقط كإضافة إلى فئة button الأساسية.
يمكن إنشاء الفئات المركبة من فئة أساسية مخصصة أو فئة مساعدة. يوضح المثال أعلاه button is-blue الفئة المساعدة كفئة مركبة.
يمكننا أيضًا إنشاء فئة مركبة لفئة مخصصة. على سبيل المثال ، is-home header_content هذا هو متغير من فئة header_content المخصصة.
Is- كبادئة
نحدد الفئة المركبة في Client-First بالبادئة is-. عندما نرى is- نعلم أن هذه الفئة تم إنشاؤها كفئة مركبة فوق فئة أساسية.
لا تكدس الفئات بشكل عميق
Client-First له قاعدة رئيسية — لا تكدس الفئات بشكل عميق.
مكدس بشكل عميق — عندما يكون هناك العديد من الفئات "مكدسة" فوق عنصر.
التكديس العميق — عملية تكديس العديد من الفئات فوق عنصر.
تم إنشاء هذا المصطلح بواسطة Client-First لمعالجة المشكلات التي نواجهها مع الفئات المكدسة في Webflow Designer.
لا ينصح Client-First بإستراتيجية التكديس العميق في Webflow.
فمثلا:
في Client-First ، نريد تجنب فئات التكديس العميق مثل هذه. سنقرأ عن تجنب التكديس العميق في جميع أنحاء المستندات.
فيما يلي قائمة سريعة بالأسباب:
لماذا لا نكدس بعمق.
عدم القدرة على إعادة ترتيب الأنماط في (Designer styles panel).
ليس لدينا سيطرة كلية على الفئات المكدسة في Webflow. لا يمكننا إعادة ترتيبها أو إدارتها بشكل صحيح داخل Designer. إذا احتجنا إلى تغيير أو إزالة الفئات في القائمة المكدسة ، فعلينا إزالة جميع الفئات من القائمة قبل الوصول إلى الفئات السابقة.
في الحالة أدناه ، يمكنك أن ترى أنه يتعين علينا إزالة بعض الفئات إذا أردنا تغيير وزن النص من text-weight-medium إلى text-weight-bold :
تصبح هذه المشكلة شديدة عند إجراء عمليات التحرير عند تصميم للشاشات الأخرى. يصبح لدينا تحكم أقل في التحرير عند التحرير في قياسات الشاشات الأخرى غير قياس الشاشة الأساسية.
يصبح سير العمل أبطأ. يتطلب العديد من الخطوات لإجراء تغييرات صغيرة
سير العمل أعلاه مستهلك للوقت. إذا كانت هذه ممارسة مستمرة في سير العمل لدينا ، فستجعل وقت البناء والصيانة أطول.
زيادة في منحنى التعلم.
نعتقد أن التكديس العميق يؤدي إلى منحنى تعليمي أكثر حدة. هناك حاجة أعمق لفهم ما تفعله الطبقات وكيفية إدارتها.
كتابة CSS في Webflow سريع
كتابة CSS سريعة وفعالة من خلال Webflow Styles panel. يمكننا إنشاء فئة جديدة وإضافة خصائص CSS بصريًا إلى الفئة. هذه العملية سريعة جدًا في Webflow ، ونحن نستفيد منها في Client-First.
حجم حفظ CSS ليس كبيرًا جدًا
عندما نستخدم الفئات العالمية في مشروع ما ، يمكننا تقليل حجم ملف CSS الخاص بنا. لا نعتقد أن جزئيات CSS الصغيرة هذه تفوق فوائد إنشاء فئة مخصصة داخل Webflow.
تعرف على المزيد حول التكديس العميق لاحقًا:
يوجد شرح كامل لكل نقطة من هذه النقاط في استراتيجية الفئات 2.
استخدم الفئات المخصصة
تعتبر الفئات المخصصة طريقة فعالة وموصى بها داخل Client-First.
نحن نستخدم الفئات المخصصة لهذه الأغراض
- تعديلات سهلة لعناصر محددة. إذا استخدمنا نظام تصنيف مخصص منظم ، فيمكننا إجراء تغييرات فريدة سريعة على عناصر ومكونات محددة في مشروعنا.
- لتجنب استخدام الفئات المساعدة في كل مكان في مشروعنا. تعتبر أنظمة الفئات المساعدة قوية ولكن لا ينبغي استخدامها لبناء المشروع بأكمله. عند استخدام الفئة المساعدة يجعل عملنا كمطوري Webflow أكثر تعقيدًا نشجع وقتها على إنشاء فئة مخصصة. يجب أن تكون هناك فائدة واضحة عند استخدام الفئة المساعدة.
- لتجنب التكديس العميق. يمكن استبدال التكديس العميق بفئة مخصصة.
مثال على مظهر الخلفية
على سبيل المثال ، نريد تصميم مظهر الخلفية على مكون(component).
قد نتمكن من تصميم مظهر الخلفية لدينا بثلاث فئات مكدسة. فمثلا، background-absolute + fit-size + opacity-low. عند الجمع بين هذه الفئات الثلاثة ، تعطينا تركيبة الأنماط التي نحتاجها.
بدلاً من تكديس فئات متعددة لمظهرالخلفية هذا ، يمكننا إنشاء فئة مخصصة تسمى services-item_background-texture . توضح الفئة بوضوح أنها مخصصة لـ "مظهر موجود على صورة خلفية لعنصر خدمات".
يمكننا الآن إجراء تعديلات بسرعة أكبر على هذه الفئة المخصصة بدلاً من إعادة تنظيم الفئات المكدسة. إذا كنا بحاجة إلى تصميم فريد ، فلدينا فئة مخصصة جاهزة لقبول هذا التصميم الفريد.
تطوير CSS تقليدي
في تطوير CSS التقليدي ، قد يكون حل الفئة المكدسة هو الحل الأفضل. ستتطلب الفئات المكدسة CSS أقل للكتابة اليدوية ، مما سيؤدي إلى تطوير أسرع.
ومع ذلك ، هذا ليس تطوير CSS تقليدي. هذا هو Webflow كمنصة. Client-First عبارة عن مجموعة من المبادئ التي تم إنشاؤها خصيصًا لـ Webflow.
في Webflow ، نعتقد أن إنشاء وإدارة أنماط فئة مخصصة على عنصر ما وإدارتها يستغرق وقتًا وجهدًا أقل من إدارة قائمة فئات مكدسة عميقة.
يوجد شرح كامل لإنشاء فئة مخصصة في استراتيجية الفئات 2.
اتفاقية التسمية
إنشاء أسماء واضحة ومحددة للفئات.
عقلية التسمية
أهداف اتفاقية التسمية في Client-First
- تمكين شخص غير تقني لإدارة الموقع.
- كن واضحًا وغنيًا بالمعلومات ووصفيًا في تسمية الفئة لدينا.
- امنح القارئ قدرًا أكبر من السياق في الغرض من تلك الفئة.
- اقرأ اسم الفئة واعرف الغرض منها.
- لا اختصارات ولا اختزال ولا ارتباك.
- أعط الكثير من السياق لعلاقة تلك الفئة بالموقع.
- قم بإنشاء أسماء بناءً على تقنيات التنظيم.
- استخدم الكلمات الأساسية للبحث عن الفئات المتاحة داخل لوحة Styles.
- تصور الغرض من الفئة بناءً على اسمها.
أسئلة نطرحها على أنفسنا عند تسمية الفئات
يجب أن تذكر أسماء الفئات ما تفعله. عند إنشاء اسم للفئة ، يمكننا التفكير في هذه الأسئلة:
- "ماذا تفعل هذه الفئة في المشروع؟"
- "ما هو الغرض من هذه الفئة في المشروع؟"
- "كيف يمكنني إعطاء أكبر قدر من السياق عن ماهية عمل هذه الفئة في المشروع؟"
يجب أن يجيب اسم الفئة على هذه الأسئلة.
يجب أن يكون مطور Webflow أو العميل أو المسوق قادرًا على فهم ما تفعله الفئة بناءً على اسمها ، حتى لو لم يسمعوا عن Client-First من قبل.
أسماء وكلمات ذات مغزى
تعطينا الكلمة الأساسية القوية سياقًا لما تقوم به هذه الفئة / العنصر. أن تكون وصفيًا قدر الإمكان في التسميةا سيساعدك على البقاء منظم.
الكلمات الرئيسية والتسمية الواضحة هي مفاهيم أساسية عميقة لـ Client-First. يجب أن يخدم كل اسم فئة غرضًا ذا مغزى. يجب أن نعطي الشخص التالي الذي يدخل المشروع الكثير من السياق لمعرفة الغرض من الفئة.
تنتقل الكلمات الرئيسية من شاملة إلى أكثر تخصيصا داخل اسم فئة
لنلق نظرة على text-size-large كمثال.
الكلمة الأساسية الأكثر شمولاً في اسم هذه الفئة هي text . تخبرنا هذه الكلمة أن هذه الفئة لها علاقة بعنصر نصي.
يخبرنا size أننا نعمل على تخصيص حجم النص. تعتبر كلمة "size" أكثر تحديدًا لأنها تتعلق بخاصية CSS معينة للنص — font-size.
أخيرًا ، لدينا large ، مما يعطينا معلومات أكثر تحديدًا حول قيمة حجم النص. على إنه حجم نص كبير.
لاحظ كيف أننا لا نطلق على هذه الفئة large-size-text. على الرغم من أن هذا قد يكون بنفس الوضوح مثل text-size-large ، إلا أن لدينا فوائد كبيرة في Client-First عندما نتبع اصطلاح تسمية فئة شامل إلى خاص. نقوم بتمكين بحث أكثر ذكاءً في الفئة وتنظيم المجلدات بشكل سلس. سوف نتعلم المزيد عن هذا في جميع الوثائق.
لنلقِ نظرة على مثال باستخدام فئة مخصصة ،team-list_headshot-wrapper.
اسم المجلد هو team-list_ ، والذي يخبرنا أن هذا العنصر له علاقة بصفحة الفريق أو قسم الفريق وهو قائمة. "Team list" هو اسم المجموعة التي تحتوي على عناصر محددة.
أصبحت headshot أكثر تحديدًا وتخبرنا أن هذا له علاقة بعنصر صورة شخصية داخل قائمة الفريق.
أصبح wrapper أكثر تحديدًا ويخبرنا أنه يغلف أو يحيطب بالصورة الشخصية.
قراءة اسم الفئة team-list_headshot-wrapper واضحة ومنطقية ، حتى لو لم يفهم المستخدم مفهوم CSS وراءها. سيتفهم المستخدم أن تحرير هذه الفئة سيفعل [شيئًا] لقائمة الفريق. هذا تلميح ممتاز للشخص التالي الذي يستخدم المشروع.
تخيل الآن إضافة المزيد من العناصر داخل غلاف الصورة. يمكننا أن نظل منظمين للغاية من خلال اصطلاح تسمية شامل إلى خاص.
team-list_headshot-wrapper
team-list_headshot-image
team-list_headshot-texture-layer
team-list_headshot-background
قائمة الفئات الخاصة بقائمة الفريق منظمة ومنطقية للغاية داخل مشروعنا. يتوافق اصطلاح التسمية هذا جيدًا مع ميزة المجلدات الخاصة بنا.