BEM 및 "Active"클래스 / 디커플링 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_와 같은 특정"활성 "클래스를 사용하는 것이 낫습니까?항목-Active "이므로 CSS 파일 내부에서 단일 클래스를 사용할 수 있거나". is-active "와 같은 일반적인 클래스 이름을 사용하는 경우 더 잘 작동하지만 CSS 파일 내에서 클래스를 지정해야합니다." Nav_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>

아니면이 경우 JS에서 $ ( ". nav__item")를 사용해야합니까? 그러나 그렇게하면 HTML과 JS를 실제로 분리하지 않습니다 (적어도이 주제를 이해했습니다). 항해에 관한 것이 아니라 아코디언, 슬라이더 등과 같은 모든 종류의 JavaScript 상호 작용에 관한 것입니다.

여러분들이 그 질문에 대한 모범 사례를 공유하고 나를 도울 수 있기를 바랍니다.

감사

Answer 1

BEM Methodology에 따르면 TAG Selectors와 같은 글로벌 선택기를 사용해서는 안되므로 Nav__item 및 Nav__Link를 사용하십시오.

활성 수정 자와 같은 이야기. 글로벌 엔티티가 없어야합니다 (믹스를 사용할 수는 있지만 약간 다른 것입니다). 따라서 가장 좋은 방법은 nav__item (또는 클래식 BEM 표기법에서 nav__item_state_active)을 사용하는 것입니다.

그리고 BEM은 JS, HTML (또는 템플릿) 및 실제로 다른 블록의 기술에 대한 제도를 가지고 있습니다.

주요 아이디어는 그 것입니다 차단하다 자체에 대한 모든 것을 알고 있습니다 : 외모 (CSS), 작동 방식 (JS), HTML이 생성 해야하는 HTML (템플릿), 자체 테스트, 문서화, 이미지 등

NAV 블록의 CSS 기술이 선언적 방식으로 규칙을 적용하기 때문에 (일부 선택기 와이 선택기와 일치하는 모든 노드는 이러한 규칙과 스타일을 정의합니다) NAV 블록의 JS를 설명 할 수있는 것과 동일한 방식으로 규칙을 정의합니다.

살펴보세요 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

실제로 BEM의 관점에서 JS는 종종 그러한 좋은 생각이 아닌 것으로 간주됩니다. 예를 들어, BEM은 CSS의 관계를 수평 척도로 현지화하고 이동하는 데 적합하지만 JS 측면에서는 매우 복잡한 응용 프로그램에서 논리를 추상화하기가 어렵습니다.

React.js에서는 클래스 이름 지정에 사용할 수 있습니다. 이것이 바로 그 방법입니다 (우리는이 방법을 사용하고 잘 작동합니다!). 나는 a 도서관 이름 지정의 디퍼 커플 링.