Scoped CSS in Ruby on Rails with ViewComponent: Solution

Scoped CSS in Ruby on Rails: ViewComponent 스타일 스코핑 솔루션

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

Ruby on Rails 개발자, ViewComponent 기반 UI 개발자, CSS 스타일 스코핑 필요성 있는 프론트엔드 개발자

핵심 요약

  • ViewComponent 기반 UI 개발에서 CSS 스코핑 문제 해결 : scoped_css 헬퍼로 컴포넌트별 고유 CSS 선택자 생성
  • SHA1 해시 기반 중복 방지 : 동일 CSS 블록 동일한 해시값으로 캐싱하여 중복 제거
  • CSS 캐싱 및 선택자 전처리 : @per_template_outputs 해시로 스타일 캐싱, prefix_css_classes 메서드로 전처리
  • 컴포넌트 간 스타일 충돌 방지 : .agkd94j4-section 형식의 고유 선택자로 컴포넌트별 고립

섹션별 세부 요약

1. 문제 정의 및 요구사항

  • ViewComponent 기반 개발에서 CSS 클래스 이름 충돌 및 중복 문제 발생
  • 요구사항:

- 컴포넌트별 스타일 스코핑

- 중복 방지

- 스타일 재사용 가능

- Rails 개발자 경험 유지

2. `scoped_css` 헬퍼 함수 구현

  • 내용 캡처 : capture(&css_block)으로 CSS 블록 내용 추출
  • 해시 생성 : SHA1 해시로 CSS 블록의 고유 식별자 생성 (예: a${hexdigest})
  • 캐싱 메커니즘 : @per_template_outputs 해시로 중복 CSS 블록 캐싱
  • 선택자 전처리 : prefix_css_classes 메서드로 .agkd94j4-section 형식의 고유 선택자 생성

3. 실제 적용 예제

  • 메인 템플릿 예시 :

```erb

Section 1

```

  • 컴포넌트 템플릿 예시 :

```erb

.section {

border: none;

color: purple;

}

```

  • 생성된 HTML 예시 :

```html

Section 1

```

4. 부모 템플릿 속성 전달 처리

  • splat_attributes 헬퍼로 부모 템플릿 속성과 컴포넌트 내부 클래스 병합

```erb

<%= helpers.splat_attributes(@attributes, styles[:section]) %>

```

5. CSS 캐스케이드 활용

  • 스타일 우선순위 :
  1. 컴포넌트 내부 스타일 → 2. 부모 템플릿 스타일 → 3. 최종 선언 스타일 우선
  • 예시 :

```erb

.agkd94j4-section { color: darkgreen; }

```

결론

  • scoped_css 헬퍼를 통해 Rails ViewComponent 기반 개발에서 CSS 스코핑 문제 해결
  • SHA1 해시 기반 중복 방지 및 캐싱으로 성능 개선
  • scoped_css gem 활용 시 즉시 적용 가능 (https://github.com/.../scoped_css)