Vue 구성 요소와 일치하는 CSS의 명명 규칙 고려

지금까지 SFC(Single File Component)에서는 BEM으로 이름을 지었지만, 구성 요소를 쓸 때는 지루함을 느꼈다.따라서 ECSS의 아이디어를 바탕으로 SFC에 맞춰 맞춤형으로 제작하는 형태는 차분함을 준다.
SFC용 CSS이므로 SFCSS라고 합니다.

scoped도 명명 규칙이 필요해요.

우선 전제로 <style scoped>에서 구성 요소의 스타일이 드러나지 않아도 명명 규칙이 필요하다.scoped 그렇긴 하지만 적당히 적힌 학급명의 계산서는 반드시 나중에 지불하겠죠.
공식 스타일 안내서에 기재된 바와 같이 제3자의 CSS가 적용되지 않도록 구성 요소의 고유한 접두사 등을 추가해야 한다.
그러나 SFC의 개발은 일반적인 웹 사이트와 성격이 다르기 때문에 접두사가 반드시 정확한 것은 아니다.

ECSS 이름의 예

※ ECSS의 생각 등은 생략합니다.ECSS에 대한 요약은 참고할 수 있습니다.[ ECSS 개요 및 아이디어 요약 ]
하나의 예이지만 ECSS는 다음과 같은 모델로 명명되었다.

.namespace-Component_ChildNode-variant {}

namespace 어셈블리가 속한 위치 등을 접두어로 추가합니다.-variant는 BEM에서 말하는 Modifier입니다.Component블록이요ChildNode엘레멘트죠.
이 명명 규칙은 SFC에 따라 다음과 같습니다.

SFCSS

SFCSS의 이름은 다음과 같습니다.

.ComponentName {}
.ComponentName_ChildNode {}
._variant {}

이 세 가지 모드만 사용합니다.

ComponentName

ComponentNamevue 구성 요소name와 같은 이름을 사용합니다.

<template>
  <div class="MyComponent"></div>
</template>

<script>
  export default {
    name: 'MyComponent',
  }
</script>

<style lang="scss" scoped>
  .MyComponent {}
</style>

루트 이름을 vue 구성 요소 name 와 일치시키면 DOM 노드에서 구성 요소를 쉽게 식별할 수 있습니다.
만약 vue-devols를 사용한다면 이런 생각은 필요하지 않지만, 제작 환경과 vue-devols가 없는 브라우저에서 검증하는 것이 유용할 것이다.

ChildNode

ChildNode는 구성 요소의 뿌리 요소 이외에 클래스를 부여하고 싶은 요소이다.
예를 들어 다음과 같은 입도로 설정ChildNode.

<template>
  <div class="MyComponent">
    <h1 class="MyComponent_Heading">
      heading
    </h1>
    <ul class="MyComponent_List">
      <li class="MyComponent_ListItem"
        v-for="item in list"
      >
        {{item.label}}
      </li>
    </ul>
  </div>
</template>

원칙적으로 다음과 같은 ChildNode연속적인 유명은 허용하지 않는다.

.MyComponent_List_Item {} /* bad */

variant

variant는 조건 등에 따라 스타일을 바꾸려는 요소에 사용되는 카테고리다.ECSS는 클래스 이름ComponentName_ChildNode에 있는 선택기가 모두 포함된 형식이지만 이용할 수 있기 때문scoped이므로 단일 클래스로 정의한다.ComponentName와 ChildNode는 파스카의 경우variant는 낙타 껍질로 기술하고 유명의 시작은 _로 시작한다.

._variantClassName {}

variant는 :class에서 제외하는 데 많이 사용되기 때문에 과도하지 않은 문자열로 구성하는 것이 좋다.

namespace 필요 없음

나는 vue 구성 요소 namespace 에서 필요하지 않다고 생각한다.ECSSnamespace는 어셈블리가 속한 영역 등을 나타내지만 vue 어셈블리가 사용하는 위치를 제한할 필요는 없습니다.
vue 구성 요소에 유일한 이름을 붙여야 하기 때문에 접두사의 이름 충돌을 피할 필요가 없습니다.

루트 클래스를 하나로 제한

.vue의<style> 중 뿌리류ComponentName는 1개로 제한된다.스타일은 구성 요소와 1 대 1 스타일만 설명해야 합니다.
여러 개의 루트를 쓰려면 다른 구성 요소로 구분된 신호일 수도 있습니다.

lang="scss"로 & 기술한 생략

예를 들어 앞의 ChildNode에서 예시한 template에서 다음과 같이 기술한다style.

<template>
  <div class="MyComponent">
    <h1 class="MyComponent_Heading">heading</h1>
    <ul class="MyComponent_List">
      <li class="MyComponent_ListItem"
        v-for="item in list"
        :class="{_selectedItem: isSelectedItem(item)}"
      >
        {{item.label}}
      </li>
    </ul>
  </div>
</template>

<style lang="scss" scoped>
  .MyComponent {
    &_Heading {}
    &_List {}
    &_ListItem {}
    ._selectedItem {}
  }
</style>

template에서 유명의 기술량은 줄어들지 않지만 모두 전력으로 쓰는 경우style보다 전체적인 전망이 더 좋을 것으로 보인다.이것&_은 어셈블리를 분할할 때 생략해도 유용합니다.

끝말

실제 사건에서 이 SFCSS를 시도해 구성 요소의 클래스에 대한 고민을 줄였다.그러나 적당한 명칭이 아니라 균형 잡힌 상태에서 개발됐다.