TIL. PostCSS

Teasan·2021년 1월 28일

css

목록 보기

2/2

▪️ CSS 전처리기는 무엇인가?

PostCSS 는 CSS 전처리기를 의미한다. 기본적인 css 만으로는 (다른 브라우저와의 호환성을 위해서) 중복적으로 작성해야 하는 경우가 많기 때문에 반복적인 코드 작성을 최소화하고자 등장한 전처리기이다. 또 다른 CSS 전처리기인 Sass, Less 와는 다르며, Sass와 Less는 자체적으로 프레임워크에서 제공하는 문법이 있고 이 문법을 통해서 순수 css로 변환해주는 역할을 한다. 최종적으로는 사용자에게 배포할 즉, 브라우저가 이해할 수 있는 css로 변환이 되기 때문에 최근 많은 이들이 사용하고 있다.

▪️ PostCSS가 왜 좋은가?

Sass, Less 와 같은 전처리기는 내부에서 제공하는 문법이 정해져있고 한정적이지만 PostCSS는 플러그인이 굉장히 다양하다. 이 때문에 PostCSS 사용에 대한 선호도가 올라가고 있으며, 대표적인 예로 create-react-app을 사용했을 때 기본적으로 Post CSS가 자동적으로 설치되어 있음을 확인할 수 있다. (create react app은 많은 React 개발자들이 공통적으로 많이 사용하는 라이브러리를 모아서 간편하게 설치해서 쓸 수 있도록 도와주는 툴이다.) 그러므로 개발자가 create-react-app을 사용하고 있다면 PostCSS를 사용하고 있을 가능성이 굉장히 높다고 볼 수 있다.

Post CSS는 Sass처럼 제공하는 문법이 정해져있고 한정적인 한계를 가진 것과는 달리 다양한 플러그인을 사용할 수 있어서 덜 제한적으로 사용할 수 있다.

▪️ Post CSS의 장점 1 : Autoprefix

Post CSS는 Autoprefix 라는 기능을 쓸 수 있다. fullscreen과 같은 상태 CSS를 쓰게 되면 Webkit과 마이크로소프트 브라우저 등과 호환이 되기 위해 Autoprefix를 계속 붙여줘야 하는데 PostCSS에서는 Prefix라는 개념을 알 수 없어도 자동적으로 Prefix 기능을 사용할 수 있도록 만들어준다. 현재 브라우저들의 시장 점유율과 호환성 문제를 자동으로 정보를 수집해서 그 정보를 바탕으로 처리를 해주기 때문에 충분히 신뢰할 수 있다.

▪️ Post CSS의 장점 2 : 다양한 Plugins

PostCSS는 다양한 Plugins을 사용할 수 있다. 필요한 것만 선택하여 설치해서 사용할 수 있기 때문에 간편하다. 이처럼 PostCSS를 사용하면 우리가 어떤 기능의 문법이 필요할 때마다 조금씩 확장해나갈 수 있는 장점이 있다.

▪️ Post CSS의 장점 3 : 모듈화

Post CSS는 모듈화가 가능하므로 BEM 과 같은 이름명을 쓰지 않아도 간편하게 관리할 수 있다.

동일한 className을 이용하다보면 각각의 css 파일이라도 style이 중복으로 덮어씌워지는 경우(오버라이팅)가 많았다. 이때문에 복잡하고 세부적인 className을 작성해서 사용해야 했으나, PostCSS의 모듈화를 사용하면 동일한 className을 작성하더라도 오버라이팅을 방지할 수 있다.