[스터디] 내가 선호하는 CSS 전략과 클래스 네이밍 방식

‼️내가 선호하는 CSS 전략과 클래스 네이밍 방식

 

개발을 하다 보면 자연스럽게 선택하게 되는 것이 있다.

바로 CSS 스타일링 방식과 클래스 네이밍 전략이다.

 

하지만 평소에 무심코 사용하던 것들에 대해 진지하게 고민해 본 적이 있는가?

나 역시 이번 스터디 주제로 이 내용을 처음 접했을 때는 꽤 당황스러웠다.

 

하지만 오히려 이 기회를 통해 나의 CSS 전략을 정리하고, 어떤 기준으로 스타일링을 선택하고 있었는지를 되돌아볼 수 있었다.

이번 글에서는 CSS 사용 방식의 종류, 내가 실제로 선호하는 방식, 그리고 클래스 네이밍 전략에 대해 정리해보려 한다.

---

✅  CSS를 사용하는 여러 가지 방식

CSS는 웹 페이지의 스타일을 정의하는 핵심 기술이다.

그러나 프로젝트 환경이나 개발자의 성향에 따라 다양한 방식으로 사용된다.

대표적으로 다음과 같은 방법들이 있다.

 

1. Vanilla CSS

가장 기본적인 CSS 작성 방식이다.

전처리기나 라이브러리를 사용하지 않고 .css 파일에 직접 작성한다.

/* styles.css */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

<button class="button">클릭하세요</button>

 

장점

• 매우 가볍고 빠름
• 모든 브라우저에서 높은 호환성

단점

• 전역 스타일로 인한 충돌 위험
• 재사용성이 떨어지고 유지보수가 어려움
• 스타일 우선순위(specificity) 문제가 잦음

 

😄 개인적인 소감
솔직히 회사 프로젝트에서는 거의 써본 적이 없다.

개인 프로젝트 초기 단계에서나 사용했지, 협업이나 유지보수가 중요한 환경에서는 적합하지 않다고 느꼈다.

 

2. SCSS (SASS)

CSS의 상위 개념으로, 변수와 중첩, 믹스인 등을 지원한다. 가장 널리 쓰이는 전처리기 중 하나다.

$primary-color: blue;

.button {
  background-color: $primary-color;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

 

장점

• 변수, 중첩, 믹스인 등으로 코드의 재사용성과 유지보수성이 뛰어남
• 파일 분리 및 모듈화가 쉬움

단점

• 컴파일 과정이 필요
• 여전히 글로벌 스타일의 한계는 존재

😄 개인적인 소감

입문 당시 가장 먼저 배운 스타일링 방식이었다.

중첩 구조가 직관적이어서 좋았지만, 이후 styled-components를 접한 뒤에는 점점 덜 쓰게 되었다.

내가 사용하기엔 sass보다 styled-components가 더 편했다. 

 

그런데 스터디원들과 이야기해보니 scss에서만 사용 가능한 기능들이 유용해보여서,

다음 프로젝트에서는 쓸 수도 있을 것 같다. 

 

 

3. CSS Modules

.module.css 파일을 통해 CSS를 컴포넌트 단위로 스코프화해서 사용하는 방식이다.

/* styles.module.css */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

import styles from './styles.module.css';

function App() {
  return <button className={styles.button}>클릭하세요</button>;
}

 

장점

• 스코프 분리로 충돌 없이 사용 가능
• 컴포넌트 기반 구조와 잘 어울림
• 유지보수 및 테스트에 유리함

단점

• 초기 설정 필요 (Webpack 설정 등)
• 클래스명이 난해해질 수 있음 (Button_button__3X1yz)

😄 개인적인 소감
현재 회사에서 가장 사용하고 있는 방식이다.

컴포넌트 기반 구조와 잘 어울려서 보기 편한 것 같다. 

 

회사 프로젝트의 경우 기존에 만들어진 컴포넌트를 가져와 필요한 스타일만 추가하면 된다.

거창한 스타일링은 거의 없고, 간단한게 많다. 

따라서 해당 방식이 사용하기 좋은 것 같다. 

 

4. CSS-in-JS (styled-components, emotion)

JavaScript 코드 안에 CSS를 선언하는 방식으로, 주로 React 등 프론트엔드 프레임워크와 함께 사용된다.

import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
`;


function App() {
  return <Button>클릭하세요</Button>;
}

 

장점

• 컴포넌트 기반 스타일링
• 동적 스타일 변경 가능
• 전역 충돌 없이 안전하게 스타일 적용 가능

단점

• 런타임 비용으로 성능 저하 우려
• 문법에 익숙해지는 데 시간이 필요함

 

😄 개인적인 소감
이전 회사에서 많이 사용했던 방식이다.

특히 styled-components를 많이 사용했고, 컴포넌트명으로 바로 스타일을 선언할 수 있다는 점이 매우 직관적이었다.

다만 팀원들과 이야기해보니, 오히려 이런 점 때문에 스타일 명 작성이 오래 걸릴 수 있겠다는 생각을 했다. 

 

5. Tailwind CSS

Utility-first 방식으로 클래스 단위로 스타일을 조합하는 방식이다.

<button class="bg-blue-500 text-white px-4 py-2 rounded">클릭하세요</button>

 

장점

• 매우 빠른 프로토타이핑
• 클래스 네이밍 고민 없음
• 빌드 시 사용되지 않는 CSS 제거로 번들 크기 최소화

단점

• HTML에 너무 많은 클래스가 붙어 가독성 저하
• CSS 기본 개념 없이는 활용 어려움
• 동적 스타일 적용이 제한적

😄 개인적인 소감
Next.js 개인 프로젝트에서 사용해봤는데, 익숙해지기까지 시간이 조금 걸렸다.

처음에는 클래스 외우는 게 벅찼지만, 익숙해지면 확실히 빠르긴 하다.

 

다만 유지보수와 가독성을 고려하면 큰 프로젝트에선 쓰기 어렵다고 생각한다.

물론 이것도 내가 아직 tailwind를 제대로 못써서 그런걸수도 있다.. 

작은 프로젝트에서는 테일윈드 사용하는게 편하다는 생각이 들긴 했다. 

 

 

 

✅  내가 사용하는 클래스 네이밍 전략

솔직히 클래스 네이밍 전략에 대해 깊게 고민해본 적은 없지만,

지금 돌아보면 BEM과 SMACSS를 혼합한 방식을 무의식 중에 사용해온 것 같다.

• 기본적으로 컴포넌트 명을 클래스명으로 사용 (특히 styled-components 시절)
• isActive, hasError 등의 상태 기반 클래스를 별도로 명명
• 클래스 명은 항상 의미를 명확히 드러내는 방식으로 작성
• 축약어보다 풀네임 선호 (btn보다 button, container 등)

이 방식의 장점

• 유지보수 시 직관적으로 어떤 역할의 클래스인지 파악 가능
• 협업 시 동료 개발자도 빠르게 이해할 수 있음

개인적으로는 영어 클래스명도 헷갈릴 때가 있어서, 차라리 한글이면 좋겠다는 생각도 종종 들긴 한다… 😂

 

✅  결론: 상황에 따라 유연하게 CSS 전략 선택하기

프로젝트의 성격, 팀의 협업 방식, 유지보수 가능성, 그리고 개인의 선호도에 따라 CSS 스타일링 전략은 달라질 수 있다.

나는 현재 CSS Modules을 사용하고 있고, 필요 시 styled-components를 병행하기도 한다.

클래스 네이밍도 딱 정해진 룰보다는 가독성과 직관성을 기준으로 정하고 있다.

진리의 프바프(프로젝트 바이 프로젝트..)

 

이번 스터디 주제를 통해 CSS 전략을 고민해보는 시간이 되어서 좋았다. 

나도 모르게 깊게 생각하지 않고 항상 쓰던 방식대로만 쓰지 않았는지 반성하게 되었다.

앞으로는 프로젝트 시작할 때, 혹은 진행중이더라도 꼼꼼히 고민해보고 결정해야겠다!

무엇보다 클래스명 일관되지 않게 작성하고 있었다는 걸 깨달았음,,ㅠ