PostCSS

Post CSS

 

CSS 전처리기 중 하나인 Post CSS에 대해 알아보도록 해요.

처음 Post CSS를 접했을 때가 생각나요.

프로젝트에서 CSS를 맡게 되었는데 Post CSS에 대해 정말 무지한 상태였거든요.

그냥 'React에서는 이렇게 CSS를 작성하는구나.'하고 지나쳤던 기억이 있네요.

Post CSS인 걸 모르고 React만의 CSS 작성법인 줄 알았던 거죠.

 

CSS 전처리기 하면 LESS나 SASS 등이 있어요.

사용하려면 프레임 워크에 맞게 문법을 공부해야 하죠.

특히 SASS의 경우 RUBY를 배워야 하는 번거로움이 있답니다.

하지만 Post CSS는 JavaScript를 기반으로 해 간편하게 사용이 가능해요.

 

 

Post CSS의 장점

Post CSS의 장점으로는 무엇이 있을까요?

먼저, 코드 가독성이 향상됩니다.

-webkit-

-moz-

-ms-

이것을 본 적 있나요?

이는 Vender Prefix로 접두어를 붙여

각 브라우저에서 인식할 수 있도록 도와줘요.

이를 이용해 브라우저마다 다른 CSS 속성을 적용할 수도 있죠.

 

그런데 매번 prefix를 적으려면 상당히 귀찮겠죠?

이때, Post CSS는 Autoprefixer를 사용해

자동으로 붙여준답니다.

 

둘째, 최신 문법을 사용할 수 있어요.

새로운 문법들을 사용해보면서

다채로운 스타일링이 가능해지겠죠?

 

셋째, 모듈화를 통해 class명이 간단해져요.

제가 생각하는 Post CSS의 가장 큰 장점인데요.

일반적인 CSS의 경우 style.css 파일에 몽땅 털어놓고

긴 class명으로 구분하잖아요.

실제 저의 예전 개인 프로젝트 class 명입니다.

코드가 복잡해질수록 class명도 늘어나면서

나중엔 알아보기 힘들겠죠.

Post CSS를 사용한다면 그럴 걱정이 없습니다.

각각의 jsx 파일 밑에 css를 모듈화 시켜

해당 css 파일에서 스타일링을 하니까

보다 class를 간단하게 설정할 수 있어요.

 

만약 home.jsx와 login.jsx가 있다고 할게요.

일반적인 스타일링을 했다고 치면

home__title

login__title

이런식으로 class를 따로 설정해야 하죠.

그러나 Post CSS를 사용해 CSS를 모듈화 시킨다면

각 jsx 파일에 연결된 CSS에 

'title'

하나만으로 스타일링이 가능해진답니다!!!

 

 

Post CSS 사용법

그래서 Post CSS를 어떻게 사용하나요?

아주 간단합니다.

jsx파일마다 (리액트 기준 설명) CSS 파일을 만드는데

이름을 그냥 .css로 끝내는 것이 아니라

module.css로 설정해줍니다.

 

home.module.css 

login.module.css

이런식으로 말이죠.

그리고 해당 jsx 파일에서 import 해줍니다.

(파일 위치는 다 다르니 참고만 하세요!)

 

어때요? 간단하죠!

이제 class명을 설정해볼게요.

class명은 className = {styles.xxx}로 해줍니다.

xxx에는 본인이 설정하고 싶은 class 명을 적어주면 돼요.

CSS가 모듈화 되어 있으니 보다 직관적이고 간단하게 적으면 되겠죠?

짜잔! 이렇게 하면  Post CSS를 사용할 준비는 끝!

평소 CSS를 작성하는 것처럼 쓰시면 됩니다.

 

Common

CSS를 사용하다보면 공통적으로 많이 쓰이는 아이들이 있죠.

저 같은 경우에는 root에 color나 size 같은 것들을 모아두고 쓴답니다.

 Post CSS에서는 어떻게 사용해야 할까요?

먼저, common 파일을 만들고 

그 안에 사용할 css 파일을 만들어요.

저는 size와 color로 분리해볼게요.

분리가 끝났다면 root처럼 자주 쓰이는 것들을 각 파일에 쓰면 됩니다.

그런데 조금 다르게 써야해요!

@value를 사용해야 하죠.

바로 이렇게요.

당연히 연결해줘야겠죠?

color를 사용할 jsx 파일에 가서 

밑의 사진처럼 작성하면 common 파일에 있는 속성을

손쉽게 끌어다 쓸 수 있답니다.

색상을 바꾸고 싶다면 common의 colors 안에서 바꾸면 되니까

훨씬 빠르고 손쉽게 변경할 수 있어요.

 

뜻하지 않게 class명이 너무 길어졌다!

as를 사용해 내가 원하는 class명으로 해당 jsx 파일 내에서 

바꿔부를 수도 있답니다.

위 사진을 보면 as fast로 되어있죠.

이 jsx 파일 내에서는 animation-duration-fast를 다 적을 필요 없이

'fast'로만 적을 수 있어요.

 

 

자, Post CSS에 대한 설명을 간단하게 해보았는데요.

사실 다른 CSS 전처리기를 사용해보지 못해서

무조건 Post CSS가 좋다!!!라고 말하기 조심스러워요.

그래도 개발 초심자였던 시기에 정말 쉽게 사용했고

만족했던 전처리기라 블로그에 소개해보고 싶었답니다.

Post CSS에 대해 더 궁금한게 있으시다면

밑에 첨부된 Post CSS 홈페이지를 구경해보세요.

 

 

 🍏

 

 

 

 

 

사진, 내용 출처: https://postcss.org/