OOCSS & BEM - 인라인 목록 - 스 캐 폴딩을 처리하는 방법, 스킨을 추가하는 방법?

Question

나는 OOCSS 방법론에 대해 고민 중이다. 모든 것이 이해하기 쉽다고 생각하기 때문에 BEM 명명 규칙을 사용하려고합니다.

이 원칙을 사용하여 홈페이지 (기본적으로 인라인 목록)에 대한 탐색을 만들려고합니다. OOCSS 추상화에 관한 것입니다, 나는 지금까지 CSS를 만들어 :

.horizontal-list { 
    padding: 0; 
    list-style: none; 
} 

.horizontal-list__item { 
    display: inline; 
} 

은 내가 먼저 피부를 적용하기 전에 구조를 레이아웃하려고으로 nav 또는 navigation 같은 클래스 이름을 사용하지 않으려 고 노력 -이 어디 내 실제 질문이 시작됩니다.

등의 글꼴 크기를 변경하려면, 몇 가지 색상을 추가하기 위해, 나는 아마 .horizontal-list--nav 같은 수정으로 이것을 추가합니다. 이동 경로 탐색을위한 또 다른 수정자가있을 수 있습니다 : .horizontal-list--breadcrumb. 이런 식으로 괜찮을까요?

내게는 텍스트 색상이 목록 자체와는 아무런 관련이 없지만 예를 들어 목록이 빵 부스러기와 관련이 없지만 내가 잘못된 것으로 접근하면 확실하지 않습니다. 방향.

---

또한 해당 목록에 대한 HTML이 같은 보일 것이다 :

<ul class="horizontal-list"> 
    <li class="horizontal-list__item"><a href="#">Link</a></li> 
    <li class="horizontal-list__item"><a href="#">Link</a></li> 
    <li class="horizontal-list__item"><a href="#">Link</a></li> 
</ul> 

li는 horizontal-list의 요소입니다, 그것은 분명하다. 그러나 은 li 안에 중첩되어 있습니다. 어떻게 마크 업합니까? OOCSS 원칙에 따르면, 나는해서는 안된다.

.horizontal-list__item a { 
    color: white; 
} 

오른쪽? 그러나 horizontal-list__item__item과 같은 클래스를 추가하는 것은 어쨌든 꽤 잘못된 것처럼 보입니다. 어떻게해야합니까?

Answer 1

요소는 블록에 따라 다른 요소의 스타일 정의는, 그래서 그냥 할, 가능한 한 독립적으로 유지되어야한다 그러나 서로에 아닙니다.따라서 HTML에서 다른 요소에 배치 되더라도 링크를 .horizontal-list__link 클래스로 표시해야합니다.

또한 파일 시스템에서 BEM 구조를 사용하는 경우 다른 요소 폴더에는 요소 폴더가 포함되지 않습니다. 다음과 같이 구조가 평평합니다.

blocks/ 
    horizontal-list/ 
     __item/ 
      horizontal-list__item.css 
     __link/ 
      horizontal-list__link.css 
     horizontal-list.css 

Answer 2

• 수정자를 사용 중입니다. 예, 제대로하고 있습니다. 수정자는 플래그 또는 속성으로 이해해야합니다. 단일 노드에서 여러 수식어를 결합하거나 키 - 값 수식어를 사용할 수도 있습니다 (Yandex 기반 BEM 표기법에 익숙하기 때문에 테마의 경우 .horizontal-list_theme_green 또는 .horizontal-list_theme_red과 같을 수 있음).

"가로"라는 단어는 블록 이름의 일부가 아니어야합니다. 메뉴는 수직 일 수도 있으며, 이는 "my-list my-list_align_horizontal"수정 자로도 표현 될 수 있습니다.

요소에

• . BEM에서 요소는 HTML 구조에서 중첩 될 수 있지만 항상 평면 목록으로 정의됩니다. 따라서 앵커 태그를 .horizontal-list__link 요소 나 그 이상으로 설정해야합니다. 이 같은

.horizontal-list__link { color: white }

상황이 좋아하지만 다음과 같습니다 :

BEM에서 .horizontal-list__item:hover horizontal-list__link { color: blue }