CSS 방법론? 도구?

React 에서 css를 어떻게 주는 것이 좋을까를 고민하다가 방법론과 도구들의 차이를 찾아봤다.

 

BEM 방법론 :

블록, 요소, 변경자 켄변션을 사용함으로써 클래스명의 유일함을 보장하여, 스타일이 겹치는 위험성 줄여준다. 

컴포넌트를 유일하고 재사용 가능하게 만들어 준다.

하지만 클래스명 선택자가 길어지고, 재사용하려고 할때마다 모든 UI 컴포넌트를 명시적으로 확장해야 한다.

 

CSS모듈 : 

로컬단위로 정의된 모든 스타일에 동적으로 클래스명을 만들어내어 추가된 CSS 속성들에 의해 스타일이 겹치지 않도록해주며, 모든 스타일들을 캡슐화한다.

(스타일 정의를 로컬화했다.) BEM을 자동화 함으로 클래스명을 결정하기위한 고민을 덜어준다. 심지어 같은 이름을 사용했더라도 서로 겹치지 않게 보장해준다.

 

Styled Component :

기능적 혹은 상태를 가진 컴포넌트들로부터 UI를 완전히 분리해 내어 재사용 할 수 있는 단순한 패턴을 제공한다. 

영속성과 재사용성을 보장하면서도 좀더 빠르게 JS틍력을 이용해서 스타일을 생성할 수 있다.

 

CSS모듈과 스타일드컴포넌트 함께 사용하기

구현 절차로부터 디자인 절차를 완벽하게 분리 할 수 있으며, 두 절차를 동시에 진행할 수 있게 해준다.

_는 참고 링크 참조.

 

참고
- https://dongwoo.blog/2017/02/07/%EB%B2%88%EC%97%AD-css%EC%9D%98-%EC%A7%84%ED%99%94-css-%EB%B6%80%ED%84%B0-sass-bem-css-%EB%AA%A8%EB%93%88-%EC%8A%A4%ED%83%80%EC%9D%BC%EB%93%9C-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EA%B9%8C/