php - هل استخدام فئات CSS لوسم JS ممارسة سيئة؟

السيناريو:

• صفحة رئيسية يتم إنشاؤها باستخدام PHP ومحرك قوالب.
• يتم إعادة تصميم الصفحة.
• التصميم الجديد مبني على jQuery UI.
• يستخدم نظام إدارة المحتوى الحالي قوالب متعددة: قالب صفحة، قالب تفاصيل المقالة، قالب التعليقات، إلخ.

المشكلة: بعض القوالب (مثل قالب تفاصيل المقالة) تولد أجزاء HTML يجب أن تستخدم عناصر jQuery UI مثل التبويبات. حالياً، مصدر البيانات لقالب الصفحة لا يحتوي على أي معلومات حول أي العناصر يجب تحويلها إلى عناصر jQuery UI في استدعاء jQuery الرئيسي في رأس المستندات.

الحل الممكن أضف فئة CSS مثل "jqTabs" إلى ترميز HTML للقوالب الفرعية واستخدم المحدد .jqTabs في برنامج jQuery الرئيسي.

سؤال هل هذه فكرة سيئة؟

بالمناسبة: "استخدم نظام إدارة محتوى مختلف" ليس إجابة صحيحة، لأن هذا ليس خيارًا حاليًا (الموعد النهائي، الميزانية، ... سمي ما شئت -.- ).

الإجابة رقم 1

ليست فكرة سيئة على الإطلاق.

هذا أحد الاستخدامات الأساسية للفصول.

يمكن استخدام الفئة (مثل المعرف) كوسيلة لتصميم عنصر و/أو كخطاف للبرمجة النصية.

في هذه الحالة، قد يكون هذا هو الحل الأمثل الممكن، حيث يسمح بما يبدو تغييرات الحد الأدنى في العلامة لتصميم أوسع.

ويمكن عكسه بسهولة.

الإجابة رقم 2

أعتقد أن استخدام فئات CSS كنقاط ارتكاز لجافا سكريبت يمكن أن يكون بالفعل ممارسة سيئة. السبب في قولي هذا هو أن هذا النهج يخلط بين CSS وJavaScript ويمكن أن يؤدي غالبًا إلى ارتباك غير ضروري.

اسمح لي أن أشرح: في الوقت الحالي أنا أعمل على إضافة قوالب جديدة إلى نظام موجود يستخدم إعدادات إدارية يتم التحكم فيها ديناميكيًا من قبل المستخدم للتحكم في خصائص CSS (عرض الصفحة، أحجام الخطوط، الألوان، إلخ). يمكن لهذه الإعدادات أيضًا أن تؤثر على خصائص JS (خيارات عرض الشرائح، التأخير بين الشرائح، إلخ).

المشكلة هي أنه نظرًا لاستخدام العديد من فئات CSS كمشابك JavaScript، أجد صعوبة شديدة في تحديد الفئات المستخدمة للتنسيق وأي الفئات مستخدمة كمشابك JS، وأيها مستخدمة لكليهما! ونتيجة لذلك، عند عمل قالب جديد، سيكون من الصعب جدًا البدء من الصفر بعلامات جديدة لأنني سأترك خارجًا فئات مهمة مختلفة لكل من وظائف CSS و JS.

سيكون الأمر أسهل بكثير إذا كانت فئات CSS تُستخدم فقط للتنسيق، ويتم استخدام وصلات JS الأخرى فقط لـ JS. أتصور أن يتم تحقيق ذلك باستخدام سمات بيانات HTML5، والتي ستبدو شيء من هذا القبيل:

<a href="#" class="button" data-lightbox="true" data-slide-delay="250">my link</a>

باستخدام سمات البيانات في HTML5 لربط جافاسكريبت وسمات الصنف لأساليب CSS، يمكننا التأكد من أن جميع الأصناف مرتبطة فقط بـ CSS، وأي شيء متعلق بجافاسكريبت يحصل ببساطة على سماته المخصصة.

خيار آخر استخدمته هو إضافة بادئة js- لأي فئة CSS يتم الإشارة إليها من قبل JavaScript. بهذه الطريقة ستعرف أي الفئات يمكنك إزالتها بأمان من أجل التنسيق وأيها يجب أن تبقى للوظائف الحالية.

<a href="/mylink" class="my-style-class my-other-style-class js-my-hook-1 js-myhook-2">
    My link
</a>