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 캐스케이드 활용
- 스타일 우선순위 :
- 컴포넌트 내부 스타일 → 2. 부모 템플릿 스타일 → 3. 최종 선언 스타일 우선
- 예시 :
```erb
.agkd94j4-section { color: darkgreen; }
```
결론
scoped_css
헬퍼를 통해 Rails ViewComponent 기반 개발에서 CSS 스코핑 문제 해결- SHA1 해시 기반 중복 방지 및 캐싱으로 성능 개선
scoped_css
gem 활용 시 즉시 적용 가능 (https://github.com/.../scoped_css)