[번역] Part 1. CSS모듈은 무엇이며 우리는 왜 이것이 필요한가?

 

 

 

** 번역에 의역과 오역이 충분히 있을 수 있으므로, 가능하신 분들은 그냥 아래의 링크로 가셔서 원문을 읽어보시길 추천합니다~

[원문] What are CSS Modules and why do we need them?

What are CSS Modules and why do we need them? | CSS-Tricks

 

 

---

 

 

 

최근들어 나는 CSS 모듈에 흥미를 느꼈다. CSS 모듈에 대해 들어본 적 없다면, 이 글은 단언컨대 당신을 위한 글이다. 지금부터 프로젝트의 목표와 목적을 살펴볼 것이다. 만약 당신이 흥미가 생긴다면, 잘 따라와 주길 바란다. 다음글은 이 방법을 사용하여 시작하는 방법에 대한 설명글이 될 것이다. CSS 모듈을 바로 구현하거나 사용 수준을 높이려는 경우라면  Part 3에서로 넘어가도 좋다.

 

🔗 아티클 시리즈

part 1: What are CSS Modules and why do need them? (지금 위치)

part 2: Getting Started with CSS Modules

part 3: React + CSS Modules = 😍

 

 

 

---

 

 

 

CSS 모듈이란?

 

문서에 따르면, CSS 모듈은 "모든 클래스 이름과 애니메이션 이름의 범위가 기본적으로 로컬인 CSS 파일"

공식 사양이나 브라우저의 구현이 아니라 클래스 이름을 변경하거나 선택자를 변경하여 범위를 지정하는(예: 네임 스페이스와 같은) 프로젝트 빌드 단계(Webpack 또는 Browserity의 도움으로)의 프로세스라고 할 수 있다.

 

이것은 왜 그리고 어떻게 사용하는 것인가? 지금부터 알아보도록 하자. 첫째, HTML과 CSS가 일반적으로 어떻게 작동하는지 기억하도록 하자. 클래스는 HTML에 적용된다.

<h1 class="title">An example heading</h1>

그리고 그 클래스는 CSS로 스타일이 지정된다.

.title {
  background-color: red;
}

해당 CSS가 HTML 문서에 적용되어 있는 한 <h1>의 배경은 빨간색일 것이다. 우리는 CSS나 HTML을 따로 처리할 필요가 없다. 브라우저는 이 두개의 포맷을 이해하기 때문이다.

 

CSS 모듈은 접근법이 다르다. HTML을 직접 작성하는 대신, index.js와 같은 javascript 파일에 모든 마크업을 작성한다. 여기 예제가 있다. (좀 더 현실적으로 사용되는 예제에 대해서는 나중에 살펴보도록 하자)

import styles from "./styles.css";

element.innerHTML = `
  <h1 class="${styles.title}">
    An example heading
  </h1>`;

빌드 단계에서 컴파일러는 가져온 styles.css 파일을 검색하여, 작성한 Javascript를 살펴보고 styles의 .title을 통해 .title 클래스에 접근할 수 있도록 한다. 그런 다음 빌드 단계에서 이 두가지 모두 별도의 새로운 HTML 및 CSS 파일로 처리하고 HTML 클래스와 CSS 선택자 클래스를 모두 대체하는 새 문자열을 사용한다.

 

생성된 HTML:

<h1 class="_style_title_309571057">
  An example heading
</h1>

생성된 CSS:

._styles_title_309571057 {
  background-color: red;
}

클래스의 속성과 .title 셀렉터는 전부 없어지고 새로운 문자열로 전부 교체되었다. 원래의 CSS는 브라우저에 전혀 제공되지 않았다.

 

Kitty Giraudel이 그의 튜토리얼에서 말하길

"[클래스]는 동적으로 생성되고, 고유하며, 올바른 스타일에 매핑된다"

 

이것은 범위가 지정된 스타일이 의미하는 것이다. 특정 템플릿으로 범위가 지정된다. button.css 파일이 있는 경우, 해당 파일을 button.js 템플릿으로만 가져오고 그 안의 .btn 클래스는 특별히 가져오지 않는 한 다른 템플릿 (예-form.js)에서 액세스 할 수 없다.

 

 

 

---

 

 

 

우리는 왜 CSS 모듈을 사용해야 할까?

 

CSS 모듈을 사용하면 단일 구성 요소의 모든 스타일을 다음과 같이 사용할 수 있다.

1.  한 곳에서 라이브할 수 있다.
2. 해당 컴포넌트 외 다른 것에는 적용할 수 없다.

더불어, 모든 컴포넌트는 진정한 종속성을 가질 수 있다.

import buttons from "./buttons.css";
import padding from "./padding.css";

element.innerHTML = `<div class="${buttons.res} ${padding.large}">`;

이러한 접근 방법은 CSS의 전역 범위 문제를 해결하고자 설계되었다.

 

영향을 줄 수 있는 다른 요소를 고려하지 않고 가능한 빨리 CSS를 작성하는데 시간이나 리소스가 부족하여 유혹을 받아본 적이 있는가?

스타일 시트 맨 아래 필요없는 코드(임의의 비트 또는 잡동사니)를 작성하고 정리하려고 했지만 절대 하지 않은 적이 있는가?

사용 여부가 알 수 없거나 원하고자 하는 스타일이 제대로 적용된 것인지 알 수 없는 코드를 만나본 적 있는가?

 

스타일이 사용 중인지 무엇을 위한 스타일인지 전혀 확신할 수 없는 스타일을 만나본 적이 있는가?

 

스타일을 손상시키지 않고 일부 스타일을 제거하는 방법을 궁금해해본 적이 있는가? 스타일이 독립적인지 아니면 다른 것에 의존하는지 궁금해했는가? 아니면 다른 곳에서 스타일을 덮어 썼는가?

 

이것은 큰 골치거리이며 프로젝트 마감일 연장에 영향을 끼치는 것들이다.

 

CSS 모듈과 로컬 범위 개념을 사용하면 이러한 문제를 피할 수 있다. 스타일을 작성할 때 항상 불러낼 결과에 대해 생각해야 한다.

 

예를 들어, HTML에서 random-gross-class를 CSS 모듈 없이 사용한다면, css 선택자가 ._style_random-gross-class_0038089로 변환되므로 스타일은 적용되지 않을 것이다. 

 

 

 

---

 

 

 

작성 키워드

 

types.css 모듈에 다음의 스타일이 있다고 생각해보자.

.serif-font {
  font-family: Georgia, serif;
}

.display {
  composes: serif-font;
  font-size: 30px;
  line-height: 35px;
}

템플릿에서 해당 클래스 중 하나를 선언한다.

import type from "./type.css";

element.innerHTML =
  `<h1 class="${type.display}">
    This is a heading
  </h1>`;

그러면 다음과 같은 마크업이 생성된다.

<h1 class="_type_display_0980340 _type_serif_404840">
  This is a heading
</h1>

두 클래스는 모두 composes 키워드를 사용해 요소에 바인딩되어 있으므로 sass의 @extend와 같은 유사한 솔루션의 문제를 피할 수 있다.

 

별도의 CSS 파일에서 특정 클래스를 작성할 수도 있다.

.element {
  composes: dark-red from "./color.css";
  font-size: 30px;
  line-height: 1.2;
}

 

 

 

---

 

 

BEM이 필요하지 않음

 

우리는 CSS 모듈을 만들 때 BEM을 사용할 필요가 없다. 이것은 두가지 이유가 있다.

1.  쉬운 구문 분석 - type.display와 같은 코드는 개발자에게  BEN-y .font-size__serif--large 만큼 가독성이 좋다. BEM 선택기가 길어지면 구문 분석이 더 쉬울 것이다.
2. 로컬 범위 - 폰트 사이즈를 변경하는 하나의 모듈안에 .big이라는 클래스가 있다고 가정하자. 또 다른 곳에서 패딩과 폰트 사이즈를 변경하는 정확히 똑같은 클래스 .big을 사용한다. 이것은 그냥 상관없다. 이것은 스타일의 범위가 지정되었기 때문에 충돌하지 않을 것이다. 만약 모듈이 두개의 스타일 시트에 import 됐다고 해도, 빌드 단계에서 해당 클래스에 대해 고유의 이름 생성되기 때문에 충돌이 발생하지 않는다. 다른 말로 하면 CSS 모듈을 사용하면 특정성 문제가 사라진다.

BEM(Block-Element-Modifier) 방식 - css 방법론 중 하나로 클래스명을 block, element, modifier로 구성된 이름으로 짓는 것 Block : 재사용이 가능한 기능적으로 독립적인 페이지 컴포넌트 Element : 블럭을 구성하는 단위, 자신이 속한 블럭 내에서만 의미를 가짐 Modifier : 블럭이나 엘리먼트의 속성

멋지지 않은가? 이것은 CSS 모듈의 여러가지 장점 중 하나일 뿐이다.

 

만약, 더 알아보고자 하는 마음이 든다면 Glen Madden 이 쓴 이 접근 방식의 다른 이점에 대해 직접 읽고 참고해보길 바란다.

Glen Maddern: Internet Pro

 

 

다음 시간에는 Wbepack과 CSS 모듈를 프로젝트에 설정하고 실행하는 방법을 알아볼 것이다. 이를 위해 최신 ES2015 기능을 사용하고 프로세스를 안내하는 몇가지 예제코드를 알아보기로 하자.

 

 

 

---

🔗 아티클 시리즈

part 1: What are CSS Modules and why do need them? (지금 위치)

part 2: Getting Started with CSS Modules

part 3: React + CSS Modules = 😍