[용어정리] pcss

결론

PostCSS는 Javascript plugin을 사용하여 CSS를 변환시키는 툴입니다.
다양한 css문법도 사용이 가능하며 변수처리, 간단하게 lint도 가능하며, CSS기능을 자동화를 했다고 생각하면 됩니다.
PostCSS를 사용하면 타사 개발자가 만든 다양한PostCSS플러그인으로 CSS를 변형 할 수 있습니다.

---

의문

• 왜 PostCSS를 사용을 할까?

우선, Postcss는 css전처리기라고 불립니다.

왜냐하면 기본적인 CSS만으로는 다른 브라우저와의 호환성을 위해 중복적으로 작성되는 것들이 많은데, 이러한 중복되는 코드 작성을 최소화하고, 간편하게 하고자 전처리기가 나왔습니다.

 

SASS 혹은 LESS 프레임워크와 같이 문법에 맞춰 작성해야하므로 한정되어있는 것과는 다르게 PostCSS는 플러그인이 굉장히 다양합니다.

 

따라서 , PostCSS를 사용하면 우리가 필요할때 확장해 나갈 수 있다! 라는 것이 포인트입니다.

PostCSS공식문서

---

역할

PostCSS는 플러그인으로 좀 더 편하게 CSS 개발을 할 수 있도록 도와주는 역할을 합니다.

 

예시

모듈화 시켜놓으면, 중복되는 클래스명이 있어도 알아서 처리되게 해줍니다.

다만, import를 시킬때 styles로 import해주어야합니다.

그리고 난 후, {styles.button} 이렇게 tyles. 으로 접근해줍니다.  

---

장점과 단점

장점

1. SASS 혹은 LESS와 같은 프레임워크들은 문법을 배워서 사용해야하는 단점이 있는 반면 PostCSS는 안배우고도 사용가능합니다.

2. button에 BEM을 이용하여서 className을 각자 버튼에 구분하여 작성해줘야 오버라이트되지 않았는데요,

모듈화 기능을 사용하여 위의 단점을 해결할 수 있습니다.

단점

PostCSS의 유일한 단점으로 플러그인들을 하나씩 끼워서 설정해야 하기 때문에, 플러그인의 적용 순서가 매우 중요합니다. 만약 순서를 잘못 설정했다면, 일부 기능이 동작하지 않을 수도 있습니다.

postcss-load-config

---

참고자료

https://xxxxersuy.com/8

 

https://powderbluee.tistory.com/110?category=452735 

 

https://www.youtube.com/c/%EB%93%9C%EB%A6%BC%EC%BD%94%EB%94%A9by%EC%97%98%EB%A6%AC

 

https://fourwingsy.medium.com/webpack-postcss-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-34f9c486093a