تحسين تنظيم CSS باستخدام BEM.

بالطبع، يمكنك تنظيم الشكل لكل من العنصر الأب (parent element) والعنصر الابن (child element) في CSS باستخدام مختلف الطرق. في هذه الحالة، يمكنك استخدام تحديد الأبناء (descendant selector) لتطبيق النمط على العناصر الابنة داخل العنصر الأب. وهذا يعني أنه يمكنك دمج الأنماط لكلا العناصر الأب والابن بنفس الوقت.

لتحقيق هذا الهدف، يمكنك استخدام القاعدة التالية في CSS:

cssCopy code
.brand-logo {
    height: 100%;
}

.brand-logo .wpc-logo {
    height: 100%;
}

في هذا الشكل، القاعدة الثانية تنطبق فقط على العناصر التي تحمل الفئة “.wpc-logo” والتي تكون متداخلة داخل عنصر يحمل الفئة “.brand-logo”. هذا يعني أن الشكل المعرف لـ “.wpc-logo” سيكون ساري المفعول فقط داخل عنصر الـ “.brand-logo”.

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

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

1. استخدام الرمز الولي (Parent Selector):

في CSS، ليس هناك طريقة مباشرة لاستهداف العنصر الأب من خلال العنصر الابن باستخدام محدد (selector). ومع ذلك، يمكن استخدام أدوات مثل preprocessors مثل Sass أو Less لتحقيق هذه الوظيفة. يمكن استخدام الرموز التالية في Sass كمثال:

scssCopy code
.brand-logo {
    height: 100%;

    &:hover {
        /* تطبيق الأنماط على العنصر الأب عند التحويم */
    }

    .wpc-logo {
        height: 100%;
    }
}

2. استخدام الكلاسات المتفق عليها (BEM – Block Element Modifier):

يمكن استخدام نهج تسمية الكلاسات المتفق عليها (BEM) لتنظيم الأنماط بشكل منظم وفعال. على سبيل المثال:

htmlCopy code
<a href="#" class="brand-logo">
    <img src="../static/images/logo_wpc-sm.png" alt="WPC Logo" class="brand-logo__logo"/>
a>

cssCopy code
.brand-logo {
    height: 100%;

    &__logo {
        height: 100%;
    }
}

3. استخدام الوحدات النسبية:

بدلاً من تحديد ارتفاع ثابت، يمكن استخدام وحدات النسبية مثل النسبة المئوية أو VH (عرض الشاشة) و VW (ارتفاع الشاشة) لضمان تكيف العناصر مع مختلف الأحجام والشاشات.

cssCopy code
.brand-logo {
    height: 50vh; /* 50% ارتفاع شاشة العرض */
}

.brand-logo .wpc-logo {
    height: 100%;
}

الختام:

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