لماذا يتم تغليف مخرج before-topic-progress بـ <span>؟

كنت أحاول إضافة محتوى إلى حاوية المخطط الزمني للجوال.

هناك منفذان في هذه الحاوية.

before-topic-progress و after-topic-progress.

يتم تغليف before-topic-progress بـ <span> ولا أرى سببًا لذلك. :thinking:

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

image

لا أرى أي طريقة أنيقة لحل هذا. الطريقة الأكثر مباشرة هي استخدام شيء مثل

#topic-progress-wrapper > span:first-child {
    display: flex;
  }

ولكن إذا استخدمت مكونات إضافية أو مكونات متعددة نفس المنفذ، فإن فرض flex على العنصر الأب يمكن أن يفسد نمط المحتوى الآخر (حالة حافة، على ما أعتقد).

إذا لم يكن لعلامة span هذه أي غرض، فهل يمكن إزالتها من هذا الملف؟

إعجابَين (2)

نعم، أعتقد أنه يمكننا إزالته، إذا كنت أتذكر بشكل صحيح، تمت إضافة هذه الامتدادات (spans) لأنها أقرب إلى السلوك القديم للمنافذ (outlets). لقد أزلنا بالفعل عددًا كبيرًا منها على أساس كل حالة على حدة لأنها تميل إلى إعاقة العمل، كما واجهت.

سيتم إنجاز ذلك هنا:

3 إعجابات