BEM / SASS / tailwind / css in js
간단한 투두앱을 만들면서 서로 다른 css 기술들을 사용하고자 한다.
비교 대상은 BEM 에 입각한 클래식 CSS, SASS, Tailwind CSS 이다.
1. BEM
사용 경험 (내 생각):
- 원래 써오던 클래식 CSS 라 낯설지 않다.
아래는 내가 조사한 BEM 의 장점과 단점이다.
장점:
- 일관성 있는 명명 규칙: BEM은 명확하고 일관된 클래스 이름을 통해 CSS를 작성하게 한다. 이를 통해 프로젝트의 모든 부분에서 스타일의 일관성을 유지할 수 있다. ex) block__element--modifier
- 명확한 구조: BEM은 CSS와 HTML의 구조를 명확하게 정의한다. 블록, 요소, 수정자로 나누어 코드를 구성하므로 코드의 가독성과 이해도가 높아진다. ex) header__title--large
- 재사용성: BEM은 CSS 클래스를 모듈화하여 여러 컴포넌트에서 재사용할 수 있게 한다. 이는 코드 중복을 줄이고 유지보수를 용이하게 만든다.
- 유지보수성: BEM은 클래스 이름을 통해 컴포넌트 간의 의존성을 최소화한다. 이는 코드 변경 시 영향을 받는 부분을 최소화하여 유지보수를 쉽게 만든다.
- 협업 용이: 일관된 명명 규칙 덕분에 여러 개발자가 함께 작업할 때 충돌을 줄이고 협업 효율성을 높인다.
단점:
- 긴 클래스 이름: BEM은 클래스 이름이 길어질 수 있다. 이는 코드의 가독성을 떨어뜨리고, HTML 파일의 크기를 증가시킬 수 있다.
- 복잡한 구조: 작은 프로젝트에서는 BEM의 명명 규칙이 과도하게 느껴질 수 있다. 단순한 프로젝트에서는 불필요한 복잡성을 추가할 수 있기 때문이다.
- 학습 곡선: BEM 방법론을 처음 접하는 개발자에게는 새로운 명명 규칙과 구조를 이해하는 데 시간이 걸릴 수 있다.
- CSS 클래스 증가: HTML 문서 내에서 많은 수의 CSS 클래스를 사용하게 되어 코드가 장황해질 수 있다.
사용 시기:
- 협업과 재사용성, 유지보수가 중요한 대규모 프로젝트
- CSS 아키텍처를 체계적으로 관리하거나 디자인 시스템을 구축하는 경우
2. SASS
사용 경험 (내 생각):
- 자식 클래스를 부모에 네스팅하여 표현할 수 있어 직관적이었다. 특히 BEM이랑 같이 쓰니까, 시너지가 나는듯 하다.
- 변수의 정의도 무척 용이했다. 기존 CSS 보다 더 편하다.
- 원래 scss 쓸 때는 내가 직접 css 로 컴파일 해야 하는데, npm이 자동으로 다 해줘서 간편하다.
- 안정적인 스타일링이 가능할 것으로 예상한다.
아래는 내가 조사한 SASS 의 장점과 단점이다.
장점:
• 중첩 규칙: CSS 규칙을 중첩할 수 있어 스타일을 더 읽기 쉽고 유지보수하기 쉽다.
• 변수 및 믹스인: 변수, 믹스인, 함수와 같은 강력한 기능을 제공하여 재사용 가능한 스타일을 만들 수 있다.
• 성숙하고 널리 사용됨: 성숙하고 널리 사용되는 기술로 많은 커뮤니티 지원을 받는다.
단점:
• 학습 곡선: SASS 특유의 문법과 기능을 배워야 합니다.
• 빌드 프로세스: SASS를 CSS로 컴파일하는 빌드 단계가 필요합니다.
사용 시기:
• 전통적인 CSS에 대한 배경 지식이 있고 더 강력한 기능을 통해 스타일을 향상시키고 싶을 때.
• 커스텀 스타일을 작성하고 더 구조적이고 유지보수 가능한 접근 방식을 선호할 때.
3. tailwind.css
사용 경험 (내 생각):
- CSS 파일이 없어지니, 프로젝트 폴더가 가벼워져 파일 식별이 더 용이해졌다.
- 이미 만들어진 클래스명을 활용하는 원리라, 간단한 스타일링 밖에 못할 줄 알았다. 그런데 기대와 다르게, tailwind.config.js 에서 커스텀 클래스명을 정의해줄 수 있었다. 덕분에,
#ccc와 같이 tailwind 에서 제공하지 않는 색상도 사용할 수 있었고, 키프레임에 애니메이션을 정의하여 복잡한 스타일링도 가능했다. - 크기의 경우 일반적으로 p-1 처럼 1 rem 을 기준으로 잡는다. p-14px 처럼 추가로 픽셀임을 표시하면, 픽셀 단위로도 사용할 수 있다. rounded-md 처럼 종종 숫자가 아닌 문자열로 구분하는 경우도 있으니, 잘 구분해야겠다.
아래는 내가 조사한 Tailwind 의 장점과 단점이다.
장점:
• 유틸리티 우선: Tailwind의 유틸리티 우선 접근 방식은 많은 커스텀 CSS를 작성하지 않고도 빠르게 컴포넌트를 스타일링할 수 있다.
• 일관성: 사전 정의된 클래스를 사용하므로 프로젝트 전반에 걸쳐 디자인 일관성을 유지할 수 있다.
• 반응형 디자인: 반응형 유틸리티가 내장되어 있어 여러 화면 크기에 맞추기 쉽다.
• 빠른 학습: 깊은 CSS 지식이 없어도 빠르게 시작할 수 있다.
단점:
• 클래스 증가: JSX가 많은 클래스로 혼잡해질 수 있다.
• 복잡한 스타일: 복잡한 스타일을 커스터마이징하는 것이 전통적인 CSS나 SASS에 비해 직관적이지 않을 수 있다.
사용 시기:
• 빠르게 스타일링을 시작하고 싶을 때.
• 사전 정의된 클래스를 사용하는 것이 커스텀 CSS 작성보다 편할 때.
4. css in js
투두앱에 적용하지는 못했으나, 다른 프로젝트 중에서 활용해본 경험이 있다.
사용 경험 (내 생각):
- 컴포넌트를 styled 메서드로 정의하니, 기존 방법에 비해 스타일의 변경 추이가 직관적으로 확인 가능했다.
- 각 컴포넌트마다 미디아 쿼리도 따로 정의하여, 반응형 컴포넌트의 작성도 용이했다.
- 글로벌 스타일이나 테마의 활용이 용이하고 props 에 따른 동적인 스타일링에서 장점이 있었다.
아래는 내가 조사한 css in js 의 장점과 단점이다.
장점:
• 컴포넌트 범위: 스타일이 컴포넌트에 국한되어 전역 스타일 충돌 위험이 줄어든다.
• 동적 스타일: props 또는 state에 따라 스타일을 계산할 수 있다.
• 외부 파일 불필요: 스타일을 컴포넌트 로직과 가까이 두어 유지보수성을 향상시킬 수 있다.
단점:
• 복잡성: 초보자에게는 설정하고 이해하는 데 더 복잡할 수 있다.
• 성능: 신중하게 사용하지 않으면 대규모 애플리케이션에서 성능 문제를 일으킬 수 있다.
사용 시기:
• 스타일을 컴포넌트 로직과 함께 두는 것을 선호할 때.
• 컴포넌트 상태 또는 props에 따라 동적 스타일링이 필요할 때.
결론
사용경험과 조사한 내용으로 볼 때,
- 규모가 작고 사전 정의된 클래스명 만으로 스타일링이 가능한 경우 tailwind 를 사용하는 것이 적합하고
- 규모가 크고, 함수나 변수를 포함한 복잡한 css 스타일링이 요구되는 경우 SASS 를 사용하는 것이 적합해 보인다.
훈련생인 나는 tailwind 로 원하는 스타일을 빨리 구현하는 것에 먼저 초점을 두고, 대규모 협업시에는 SASS 를 사용하는 연습을 해봐야 할 것 같다.
