Styling Discourse with variables: Show & Tell 토론을 이어갑니다:
Discourse의 테마 설정 경험을 개선하기 위한 노력이 정말 인상적입니다! 하지만 위 토픽에서 공유된 것처럼 많은 수의 CSS 변수를 추가하는 방식이 최적의 해결책인지에 대해서는 완전히 확신이 서지 않습니다. 그 이유에 대해 몇 가지 생각을 공유하고 싶습니다.
저는 Canvas Theme Template을 통해 이 접근 방식을 직접 실험해 왔습니다. 이 템플릿은 기본적으로 조정 가능한 변수들의 모음집을 제공하여 기본 테마를 구축할 수 있게 해줍니다:
:root {
/* Layout */
--d-max-width: 1110px;
--canvas-nav-space: 0.75rem;
--canvas-content-padding: 1.5rem;
--canvas-topic-list-padding: 0.8em;
/* Base Styles */
--canvas-background: var(--secondary);
--canvas-surface: var(--secondary);
--canvas-border: 1px solid var(--primary-500);
--canvas-border-light: 1px solid var(--primary-200);
/* Border Radius */
--d-border-radius: 2px;
--d-border-radius-large: 2px;
--d-button-border-radius: 2px;
--d-input-border-radius: var(--d-button-border-radius);
--d-nav-pill-border-radius: var(--d-button-border-radius);
/* Button Styles */
--canvas-button-padding: 0.5em 0.65em;
--canvas-button-primary-padding: 0.5em 0.65em;
/* Header */
--canvas-header-height: 4rem;
--canvas-header-background: var(--header_background);
--canvas-header-border: none;
--canvas-header-shadow: var(--shadow-header);
/* Sidebar */
--d-sidebar-width: 17em;
--d-sidebar-background: var(--secondary);
--canvas-sidebar-border: 1px solid var(--primary-low);
--canvas-sidebar-scrollbar: var(--scrollbarWidth);
--d-sidebar-row-height: 2.2em;
--d-sidebar-highlight-background: var(--primary-low);
/* And several more... */
}
이 방식은 간단한 조정에는 꽤 잘 작동하지만, 이 접근 방식을 확장하려고 할 때 몇 가지 한계에 부딪혔습니다:
인지적 부하 및 가시성(Discoverability)
광범위한 변수 목록은 사실상 조회 테이블(lookup table)이 필요합니다. 이는 컴포넌트 기반 프레임워크에서 일반적으로 컴포넌트를 스타일링하는 방식과는 동떨어져 느껴집니다. 그리고 이것은 저만의 생각일 수 있지만, 정신적 모델이 "이 컴포넌트를 스타일링하고 싶다"에서 "올바른 변수 이름을 찾아야 한다"로 전환되는 것 같습니다.
캐스케이딩 로직의 부재
현재 구현 방식은 적절한 캐스케이딩 계층 구조를 확립하지 않고 변수에 하드코딩된 값을 직접 할당합니다:
--d-sidebar-link-color: var(--primary-high);
--d-nav-background-color--active: transparent;
--table-border-width: 1px;
즉, --link-color나 --border-width와 같은 더 일반적인 변수로부터 상속이 이루어지지 않습니다. 체계적인 변경을 원할 경우, 하나의 근본적인 값을 변경하는 대신 여러 개의 구체적인 변수를 업데이트해야 합니다.
디자인-개발 간 괴리
이 방식은 디자인 도구(Figma 등)와 구현 사이에서 작업할 때 마찰을 유발한다고 생각합니다. 디자인 시스템은 일반적으로 이러한 매우 구현 특이적인 변수들과 1:1로 매핑되지 않는 의미론적 변수(semantic variables)를 사용합니다.
컴포넌트 아키텍처를 수용하는 대안적 접근법
기본적인 의미론적 변수와 신뢰할 수 있는 컴포넌트 타겟팅을 결합함으로써 동일한 목표를 더 자연스럽게 달성할 수 있다고 생각합니다. 긴 목록의 구체적인 변수 대신, Discourse 전반에서 유일하고 일관되게 명명된 컴포넌트 클래스에 의존할 수 있다면 어떨까요? .d-sidebar, .d-topic-list, .d-header 같은 것들이요.
그리고 실제로 CSS가 작동하도록 설계된 방식으로 캐스케이딩되는, 더 작은 규모의 기초 변수 세트와 이를 조합하는 것입니다:
/* Set the design foundation */
:root {
--d-border-width: 2px;
--d-surface-color: #3498db;
--d-space-1: 1rem;
}
/* Override at the component level when you need to */
.d-topic-list,
.d-sidebar {
--d-border-width: 1px;
}
제게는 이것이 CSS가 자연스럽게 작동하는 방식에 더 가깝게 느껴집니다. 전역 스타일을 설정한 다음 필요한 곳에서 세분화합니다. 앱 전체의 테두리 모양을 변경하고 싶으면 하나의 변수만 변경하면 됩니다. 사이드바를 다르게 만들고 싶으면 사이드바를 구체적으로 타겟팅하면 됩니다.
