쓰기 스타일시트

관리 용이성을 위해 UI 툴킷은 BEM을 요소 스타일 지정을 위한 방식으로 채택했습니다. BEM 사용은 필수가 아니라 권장 사항입니다.

BEM 소개

BEM은 Block Element Modifier의 약자로, 개발자들이 구조화되고, 명료하고, 쉽게 유지할 수 있는 선택자를 작성하도록 도와주는 간단한 시스템입니다. BEM을 사용하면 요소에 클래스를 할당한 후 스타일시트에서 해당 클래스를 선택자로 사용할 수 있습니다.

BEM 클래스는 최대 3개의 컴포넌트를 가질 수 있습니다.

• 블록 이름: 블록은 의미 있은 스탠드얼론 엔티티 또는 컨트롤입니다. 예: menu, button, list-view
• 요소 이름: 스탠드얼론 의미가 없으며 블록과 의미론적으로 연결된 블록의 일부입니다. 요소 이름은 두 개의 밑줄을 사용하여 블록 이름에 연결됩니다. 예: menu**item, button**icon, list-view__item
• 수정자: 블록이나 요소의 형상 또는 동작을 변경하는 플래그입니다. 두 개의 대시를 사용하여 수정자를 블록 또는 요소 이름에 추가하십시오. 예: menu--disabled, menu**item--disabled, button--small, list-view**item--selected

각 이름 부분은 라틴어 문자, 숫자, 대시로 구성됩니다. 각 이름 부분은 이중 밑줄(__) 또는 이중 대시(--)를 사용하여 서로 연결됩니다.

다음 예제는 메뉴에 대한 XML 코드를 보여줍니다.

<VisualElement class="menu">
    <Label class="menu__item" text="Banana" />
    <Label class="menu__item" text="Apple" />
    <Label class="menu**item menu**item--disabled" text="Orange" />
</VisualElement>

선택자

요소에는 해당 역할과 형상을 설명해주는 클래스가 탑재되므로 하나의 클래스명을 사용하여 대부분의 선택자를 작성할 수 있습니다.

.menu {
}

.menu__item {
}

.menu__item--disabled {
}

단일 클래스명을 사용하여 요소에 스타일을 지정해야 합니다. 하지만 일부 경우 복잡한 선택자를 사용해야 할 수 있습니다. 예를 들어 요소의 스타일이 해당 블록의 수정자에 기반하는 경우 복잡한 선택자를 사용할 수 있습니다.

.button {
}

.button__icon {
}

.button--small {
}

.button--small .button__icon {
}

긴 선택자를 지정하지 않도록 유의하십시오. 긴 선택자는 UI 그래픽 디자인의 비일관성을 드러낼 수도 있습니다. 또한 특정 타입 이름(Button, Label)이나 요소 이름(#my-button)을 BEM 선택자에 사용하는 것도 피해야 합니다.

VisualElement를 BEM 친화적으로 만들기

UI 툴킷은 BEM을 준수합니다. 각 시각적 요소에는 필요한 클래스명이 연결되어 있습니다. 예를 들어 모든 TextElement에는 unity-text-element 클래스가 있습니다. TextElement에서 파생되는 Button의 각 인스턴스의 경우 해당 클래스 리스트가 unity-button 및 unity-text-element 클래스로 채워집니다.

VisualElement 또는 해당 자손 중 하나로부터 새로운 요소를 파생하는 경우 다음의 가이드라인을 준수하면 BEM 방식을 사용하여 요소 스타일 지정을 쉽게 만들 수 있습니다.

• 생성자에 AddToClassList()를 사용하여 관련 USS 클래스를 요소 인스턴스에 추가합니다.
• 새로운 요소가 생성자의 자식 요소를 인스턴스화하는 경우 관련 클래스를 해당 자식에 할당합니다. 예: my-block**first-child, my-block**other-child
• 요소가 다수의 상태 또는 배리언트(예: 소형, 대형 등)를 지원하는 경우 요소 상태가 변할 때 또는 요소 배리언트가 선택될 때 관련 클래스를 추가하거나 제거합니다.
• 요소를 다른 프로젝트에서 사용할 계획이라면 클래스에 접두사를 붙여 기존 사용자 클래스명과의 충돌을 방지합니다.