PostCSS

what is PostCSS? 

 

Sass, Less, PostCSS와 같은 툴을 CSS PreProcessor(전처리기)라고 하는데, 이런 툴을 이용하면 우리가 순수 CSS를 작성하면서 겪는 문제를 해결하고, 한계를 극복할 수 있다. 

 

Auto Prefixer 

yarn create react app 명령어를 이용해서 생성된 폴더에는, 다음과 같이 다양한 툴이 자동으로 설치된 폴더가 포함된다. node modules에는 설치된 툴이 모두 포함되어있는데, 여기에 PostCSS도 포함된다. yarn 파일(설치된 모든 툴을 관리)의 autoprefixer는 PostCSS가 제공하는 기능 중 하나이다. 

 

 

예를 들어, 순수 css로 fullscreen 상태일 때의 스타일을 정의하려면, 브라우저 호환성 문제 때문에 똑같은 코드를 webkit 일 때, ms일 때로 나누어 중복으로 작성했어야 하는데, PostCSS의 prefixer가 이 역할을 대신해 준다. 즉, PostCSS는 순수 CSS에서 코드를 중복 작성하는 문제를 해결해 준다. 

+) Sass에서는 mixin이 이 역할을 한다.

 

Auto prefixer

 

CSS modules

CSS Modules

 

+) BEM(Block Element Modifier) | 클래스 이름 정의 규칙 

뿐만 아니라 css 파일을 모듈화 할 수 있다. 모듈화가 가능하다는 것은 웹 어플리케이션의 컴포넌트(UI)별로 css 파일을 나누어 스타일을 적용할 수 있다는 뜻이다. 

 

예를 들어 Button1과 Button2 두 개의 컴포넌트가 있고, 두 컴포넌트의 클래스 이름을 동일하게 button으로 설정했다고 해보자. 이 때 css 파일명을 "button1.module.css", "button2.module.css"로 정의함으로써 각 파일 안에서 .button이라는 동일한 클래스 이름을 사용하더라도 서로 다른 스타일을 적용할 수 있다. 순수 css에서는 이것이 불가능하기 때문에 모든 컴포넌트의 클래스 이름을 nav__button__button1, nav__button__button2와 같은 식으로 BEM 규칙을 이용해서 정의해야했다. CSS modules을 이용하면 css 파일을 분리함으로써 동일한 클래스 이름을 사용하더라도, 다른 스타일을 적용할 수 있다. CSS modules가 나중에 자동으로 클래스 이름을 바꿔주기 때문이다. 

 

이 때 해당 컴포넌트에 각각 css 모듈 파일을 다음과 같이 import하고, 클래스 이름을 지정해야 한다.

 

import React, { Component } from 'react';
import styles from './button1.module.css'; // here! 

class Button1 extends Component {
  render() {
    return <button className={ styles.button }>click me</button> // here! 
  }
}

 

Plugins | PostCSS Plugins

 다양한 plugin을 제공하기 때문에 필요한 것을 설치해서 사용할 수 있다는 장점이 있다.

 

Plugin is a software component that adds a specific feature to an existing program.