فئات BEM و "نشطة" / فصل HTML و JS

Question

لقد بدأت في استخدام منهجية BEM لفصل HTML و CSS ... وهو يعمل بشكل جيد معظم الوقت. حتى لو كان رأيك الشخصي فقط ، ما زلت أرغب في معرفة كيفية تعامل الآخرين مع هذا:

لنفترض أننا بحاجة إلى بناء ملاحة بسيطة. يبدو HTML مشابهًا لـ

<nav class="nav">
    <ul class="nav__list">
        <li class="nav__item">
            <a class="nav__link" href=""></a>
        </li>
        <li class="nav__item">
            <a class="nav__link" href=""></a>
        </li>
    </ul>
</nav>

لست متأكدًا مما إذا كنت بحاجة إلى ".NAV_البند "و" .NAV_ link "أو إذا كان من الأفضل استخدام هذا الأمر بدلاً من ذلك

.nav__list > li { CODE }

لكن مشكلتي الحقيقية هي كيفية التعامل مع الفصول "النشطة" (ليس فقط للتنقل ، ولكن بشكل عام). هل من الأفضل استخدام فئات محددة "نشطة" مثل ".NAV_العنصر-نشط "، بحيث يمكنك فقط استخدام فئة واحدة داخل ملف CSS الخاص بك أو إذا كنت تستخدم المزيد من أسماء الفصول العامة مثل" .is-active "يعمل بشكل أفضل؟ ولكن بعد ذلك تحتاج إلى تحديد فئوتك داخل ملف CSS الخاص بك مثل". البحرية_ITEM.is-active "أو (الذي يبدو أسوأ بالنسبة لي)" .nav__list> .is-active ".

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

someElement.addClass(".nav__item--active");

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

<button class="btn btn--large"></button> // $(".btn--large") in jQuery

سيكون لديك

<button class="btn btn--large js-dostuff"></button> // $(".js-dostuff") in jQuery

أعتقد أن هذا بالاقتران مع HTML5-البيانات-يعمل على شيء إلى حد كبير من أجل أي شيء ، لكنني أسأل نفسي عما يحدث للتنقل أو الأكورديون أو أشياء من هذا القبيل. هل من الأفضل أن تستخدم هذه الفئات ".js-" أيضًا (لكل عنصر)

<nav class="nav">
    <ul class="nav__list">
        <li class="nav__item js-open-subnav">
            <a class="nav__link" href=""></a>
            <ul class="nav__sub">
                <!-- ... -->
            </ul>
        </li>
    </ul>
</nav>

أم يجب أن أستخدم $ (". nav__iTem") ... في JS الخاص بي في هذه الحالة؟ لكن بهذه الطريقة لا تفصل HTML و JS الخاص بك (على الأقل على الأقل فهمت هذا الموضوع). لا يتعلق الأمر فقط بالتنقل ، ولكن حول كل هذا النوع من تفاعلات JavaScript ، مثل الأكورديون ، المتزلجون وما إلى ذلك.

آمل أن تتمكن من مشاركة بعض أفضل الممارسات لتلك الأسئلة ومساعدتي.

شكرًا

Answer 1

تقول منهجية BEM أنه يجب ألا تستخدم أي محددات عالمية مثل محددات العلامات ، لذا استخدم NAV__ITEM و NAV__LINK.

نفس القصة مع المعدل النشط. لا يجب أن يكون لديك أي كيانات عالمية (يمكنك استخدام الخلطات ولكن هذا شيء مختلف بعض الشيء). لذا فإن أفضل طريقة هي الذهاب مع Nav__Item-Active (أو nav__item_state_active في تدوين BEM الكلاسيكي).

و BEM لديه sollution ل JS ، HTML (أو القوالب) وفي الواقع أي تقنية كتلة أخرى.

الفكرة الرئيسية هي ذلك الكتلة يعرف كل شيء عن نفسه: كيف يبدو (CSS) ، وكيف يعمل (JS) ، ما هي HTML التي يجب أن تنتجها (القوالب) ، اختباراتها ، وثائق ، صور ، إلخ.

وبينما تطبق تقنية CSS في كتلة NAV القواعد بطريقة إعلانية (يمكنك تحديد بعض المحددات وجميع العقد التي تتطابق مع هذا المحدد مع هذه القواعد) بنفس الطريقة التي يمكنك بها وصف JS من كتلة NAV.

الرجاء إلقاء نظرة على http://xslc.org/jquery-bem/ وهو المكون الإضافي jQuery الذي يمنحك إمكانية العمل مع كتل في طريق BEM بسهولة.

وفي حال كنت تستخدم بعض نظام الإنشاء ، يمكنك وضع كل هذه التقنيات في نفس المجلد على نظام الملفات:

blocks/
    nav/
        __list/
            nav__list.css
            nav__list.js
        __item/
            nav__item.css
        nav.css
        nav.js
        nav.test.js
        nav.png
        nav.md

وجود بنية الملف هذه ، يمكنك أن تتعمق في ماهية BEM الفعلية ومحاولة i-bem.js: http://bem.info/articles/bem-js-main-terms/

Answer 2

في الواقع ، يعتبر JS من حيث BEM في كثير من الأحيان فكرة جيدة. على سبيل المثال ، يعد BEM رائعًا لتوطين العلاقات ونقلها في CSS إلى النطاق الأفقي ، ولكن من حيث JS من الصعب تجريد المنطق في تطبيقات معقدة للغاية.

في React.js ، يمكنك استخدامه لتسمية الفصل ، وهذا كل شيء (نستخدمه بهذه الطريقة ويعمل بشكل جيد!). كتبت أ مكتبة لمشكلة فك الارتباط مع التسمية.