[Style] Style 유형과 종류

Style 유형

다양한 CSS 스타일링 방법론들을 크게 두 가지 유형으로 나뉩니다.

1. CSS-in-JS: 이 방법론은 JavaScript 안에서 CSS를 작성하는 것입니다. 이러한 방식은 컴포넌트 기반의 웹 개발에 매우 적합하며, 주로 리액트(React)와 같은 라이브러리와 프레임워크에서 사용됩니다. CSS-in-JS의 대표적인 예로는 Styled-components, Emotion 등이 있습니다. 이 방법론은 스타일을 컴포넌트에 지역적으로 적용하여 스타일 충돌을 방지하고, 동적 스타일링을 쉽게 처리할 수 있도록 도와줍니다.
2. CSS-in-CSS: 이 방법론은 기존의 CSS 파일을 사용하여 스타일을 관리하는 것입니다. 이 방법론은 CSS 전처리기를 포함하여 일반적인 CSS 스타일 시트 작성에 대한 방법론을 포함합니다. 대표적인 예로는 CSS Modules, Tailwind CSS, PostCSS, CSS 전처리기(LESS, Sass, Stylus) 등이 있습니다. 이 방법론은 CSS를 모듈화하여 관리하거나, 유틸리티 기반의 클래스를 사용하여 스타일링하는 등의 방식을 포함합니다.

---

CSS-in-JS

CSS-in-JS는 JavaScript 안에서 CSS를 작성하는 방식을 말합니다. 가장 대표적인 CSS-in-JS 라이브러리로는 Styled-components, Emotion, CSS Modules 등이 있습니다.

 

장점단점

컴포넌트 스코프로 스타일 충돌 방지	학습 곡선이 높을 수 있음
동적 스타일링 가능	SEO 이슈 발생 가능
코드 분할과 성능 최적화 가능
CSS 전처리기 없이 사용 가능

 

 

CSS-in-CSS

CSS-in-CSS는 기존의 CSS 파일을 사용하여 스타일링을 하는 방식을 말합니다. 대표적으로는 Sass, Less, Stylus 등의 CSS 전처리기가 있습니다.

 

장점단점

기존 CSS 지식을 활용 가능	전역 스코프로 인한 스타일 충돌 가능성
초기 학습 곡선이 낮음	의존성 관리가 필요함
SEO 이슈가 적음	동적 스타일링의 제한성

 

 

 

 

---

Style 종류

 

 

CSS Modules

CSS Modules는 CSS를 모듈화하여 컴포넌트별로 스타일을 관리하는 방법론입니다. 각 CSS 파일은 로컬 스코프를 갖고 있어서 스타일이 충돌하지 않습니다. 자바스크립트에서 해당 CSS 클래스를 불러와서 사용할 수 있습니다.

 

장점단점

컴포넌트 단위로 스타일 관리 가능	학습 곡선이 높을 수 있음
로컬 스코프를 통한 스타일 충돌 방지	프로젝트 규모가 커질수록 파일 관리가 복잡해짐
자바스크립트에서 CSS 클래스를 직접 불러와 사용 가능

 

---

Tailwind CSS

Tailwind CSS는 Utility-first CSS 프레임워크로, 클래스 기반의 스타일링을 지원합니다. 사전에 정의된 클래스를 사용하여 레이아웃, 텍스트 스타일, 배경색 등을 설정할 수 있습니다.

 

장점단점

빠르게 스타일을 적용 가능	HTML 코드가 더욱 복잡해질 수 있음
클래스 기반의 스타일링을 지원	클래스 기반 접근 방식에 대한 선호도 차이
사전에 정의된 클래스를 사용하여 쉽게 스타일링 가능

 

---

PostCSS

PostCSS는 CSS 후처리기로, 여러 플러그인을 사용하여 CSS를 변환하고 확장할 수 있습니다. Autoprefixer, CSSNano, CSSNext 등의 플러그인을 사용하여 브라우저 호환성을 높이고 CSS 문법을 최신 버전으로 업데이트할 수 있습니다.

 

장점단점

다양한 플러그인을 사용하여 CSS 변환 및 확장 가능	초기 설정이 번거로울 수 있음
브라우저 호환성 높이고 CSS 최신 문법으로 업데이트 가능	플러그인 선택 및 관리에 주의가 필요함

 

---

 

CSS-in-Less/Sass/Stylus

CSS 전처리기인 Less, Sass, Stylus를 사용하여 CSS를 작성할 수 있습니다. 이들은 변수, 중첩, 믹스인 등의 기능을 제공하여 CSS 코드를 더욱 모듈화하고 관리하기 쉽게 만들어 줍니다.

 

장점단점

변수, 중첩, 믹스인 등의 기능으로 CSS 모듈화 가능	전처리기의 추가적인 단계가 필요할 수 있음
코드의 가독성 및 유지보수성 높임	프로젝트 설정 및 관리에 일정한 학습 필요

 

 

---

BEM (Block Element Modifier)

BEM은 CSS의 클래스 네이밍 규칙 중 하나로, 스타일을 관리하는 방법론입니다. 클래스 이름을 구조화하여 코드의 가독성과 유지보수성을 높입니다.

 

장점단점

클래스 네이밍을 통한 스타일 관리 용이	클래스 네이밍 규칙 준수 어려울 수 있음
코드의 가독성 및 유지보수성 높임	초기 학습 곡선이 다소 높을 수 있음