🤔 전통적인 CSS 방식이란?

 

전통적인 CSS 방식은 일반 CSS 파일을 만들어 스타일을 작성하는 방법입니다. 

CSS, SCSS(SASS), LESS, CSS Modules 등 다양한 방식이 있지만, 공통점은 모두 "별도의 CSS 파일을 만들어 적용한다"는 점입니다.

전통적인 CSS의 장점

✅ 성능이 더 좋음

• CSS 파일은 브라우저가 미리 다운로드하고 캐싱할 수 있어 로딩 속도가 빠릅니다.

• JavaScript와 분리되어 있기 때문에 브라우저가 스타일을 빠르게 적용할 수 있습니다.

✅ 테마 변경이 용이함

• CSS 변수(--primary-color)를 활용하여 전체적인 스타일을 쉽게 변경할 수 있습니다.

• 예를 들어, 다크 모드와 라이트 모드를 쉽게 전환할 수 있습니다.

✅ 많은 개발자들에게 익숙함

• 대부분의 개발자는 CSS를 기본적으로 학습하기 때문에 새로운 개념을 익히지 않아도 됩니다.

• 기존 프로젝트와의 호환성이 뛰어납니다.

전통적인 CSS의 단점

❌ 전역 네임스페이스 문제

• 모든 스타일이 하나의 공간에서 관리되기 때문에, 스타일이 충돌할 가능성이 있습니다.

• 이를 방지하려면 BEM, OOCSS와 같은 네이밍 규칙을 엄격하게 따라야 합니다.

❌ 동적으로 스타일을 변경하는 것이 어려움

• JavaScript와 연동하려면 별도의 CSS 변수나 클래스를 사용해야 하며, 코드가 복잡해질 수 있습니다.

❌ 대규모 프로젝트에서 유지보수가 어려울 수 있음

• 스타일이 많아질수록 관리가 어려워지고, 중복된 코드가 생길 가능성이 높아집니다.

🤔 어떤 방식을 선택해야 할까? 

💡 추천 사용 사례

✅ CSS-in-JS가 유리한 경우

• React, Vue 등 컴포넌트 기반의 UI 개발을 할 때

• 스타일이 동적으로 변경되는 애플리케이션

• 전역 스타일 충돌을 방지하고 싶은 경우

✅ 전통적인 CSS가 유리한 경우

• 정적인 웹사이트나 성능 최적화가 중요한 프로젝트

• CSS 파일을 별도로 관리해야 하는 대규모 프로젝트

• 스타일 가이드가 명확한 디자인 시스템 구축 시

✨ 정리

CSS-in-JS와 전통적인 CSS 방식은 각각의 장점과 단점이 있으며, 프로젝트의 특성에 따라 적절한 방법을 선택해야 합니다.

👉 컴포넌트 중심 개발을 한다면? → CSS-in-JS가 더 편리할 수 있습니다. 

👉 성능이 중요한 웹사이트를 만든다면? → 전통적인 CSS 방식이 더 적합합니다.

어떤 방식을 선택하든, 중요한 것은 코드의 유지보수성과 성능을 고려하는 것입니다. 

이더블케이는 프로젝트의 특성에 맞춰 최적의 스타일링 방식을 선택하여 적용하고 있습니다.😊