커스터마이징

만질 수 있는 자리는 40개다. CSS 변수를 덮어쓰면 된다.

!important 가 필요 없다

라이브러리 CSS 는 전부 @layer nui.* 안에 있다. Cascade 는 상세도보다 레이어를 먼저 보므로 레이어 밖 선언이 항상 이긴다. 상세도를 아무리 올려도 라이브러리 쪽이 진다.

origin  →  importance  →  @layer  →  specificity(상세도)
                          ↑
                  상세도보다 먼저 본다

/* 이것으로 충분하다 */
.my-button { border-radius: 0; }

/* 라이브러리 쪽은 상세도를 아무리 올려도 진다 */
@layer nui.components {
  html body .nui-button.nui-button--small { border-radius: 4px; }
}

어디를 만지나

이름을 읽는 법

이름은 컴포넌트, 옵션, 요소, 속성 순서로 붙는다. 읽으면 문장이 된다.

--nui-button--lg-height        버튼 · large 옵션 · 높이
--nui-button--radius           버튼 · 둥글기 (옵션 없음)
--nui-button--border-width     버튼 · 테두리 두께 (옵션 없음)
--nui-datepicker--day-size     달력 · 날짜 · 크기 (요소 있음)

• 옵션이 컴포넌트 이름 바로 뒤에 온다. large 버튼을 통째로 손볼 때 한자리에 모이기 때문이다
• 옵션 이름은 큰 것부터 lg · md · sm 이고 기본은 md 다
• 크기 옵션마다 이름을 나눈다. 하나로 덮으면 세 크기가 전부 같아진다
• 없는 옵션은 이름에 넣지 않는다. 테두리 두께는 컴포넌트당 하나다

전체 목록

이 표는 컴포넌트 SCSS 에서 자동 생성한다.

/* 전역으로 — 모든 버튼 */
:root {
  --nui-button--radius: 0;
  --nui-button--lg-height: 3.75rem;
  --nui-button--border-width: 2px;
}

/* 부분적으로 — 상속되므로 하위에만 적용된다 */
.compact-form {
  --nui-textfield--height: 2.5rem;
  --nui-select--height: 2.5rem;
}

막아둔 것

필요한 자리가 있으면 알려달라

변수를 새로 여는 것은 호환을 깨지 않는다. 열어둔 것을 닫으면 쓰는 쪽 코드가 깨지므로 적게 열고 시작했다. 나중에 추가하는 비용은 크지 않다.