[CSS] PostCSS 장점

개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 

리코딩 ReCoding

 

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

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

-> 개인적인 경험으로는, Sass, Less 같은 경우는 컴파일 하는 시간이 필요하다. React에서 css 저장 시에, 컴파일하는 시간이 필요하다. post css는 그런 시간이 없다. 기껏해야 1,2초이긴 한데, 은근 신경 쓰이는 것도 사실. PostCSS는 그런 일이 없다. 😃

▪️ PostCSS가 왜 좋은가?

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

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

▪️ Autoprefix 👍👍

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

▪️ 다양한 Plugins 👍

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

▪️ 모듈화 👍👍👍👍

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

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

▪️ 모듈화하는 방법

CSS 파일 확장명을 .module을 붙여 변경하기.

-> 모듈이 가장 중요한 거 같다. 이게 편의성을 엄청 올려준다.  postCSS가 나중에 build하고 나면, 각 component별로 css를 적용시켜주게 된다. 그래서 BEM 규칙이나 중첩 적용되는 부분들을 css 작성하면서 딱히 고려하지 않고 막 만들어도 된다. 

*publisher 들은 이제 진짜 위기가 찾아온 듯...

 

해당 css 파일을 styles from 으로 수정해서 import를 해주고

{styles.(해당 className)}를 사용해서 지정해주면 모듈화가 끝이 난다.

이처럼 프로젝트의 규모가 크고 component의 수가 많을 수록 className의 문제가 복잡해지기 때문에 PostCSS의 사용해서 모듈화를 한다면 조금 더 간편하게 코드를 작성할 수 있을 것이다.

 

 

추후 개선 사항

나는 less, scss 같은 전처리기는 잘 모르기때문에 비교한 통찰력은 기술하지 못해 아쉽다. 나중에 이 부분을 추가하도록 하겠다.

 

참조

velog.io/@ichbinmin2/TIL.-PostCSS

TIL. PostCSS

 

개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 

리코딩 ReCoding