CSS Naming을 어떻게 해야할까(1?)

seesparkbox.com/foundry/naming_css_stuff_is_really_hard

CSS Class Names to Prevent Refactoring

---

코딩을 하면서 가장 어려운 것 중 하나는 이름짓기이다. C#, Java, Javascript 등의 언어의 변수, 함수 등의 이름짓기는 어느정도 아는 지식이 있지만 CSS의 class와 id는 무엇을 기준으로 어떤 방식의 이름을 지어야하는지 혼란스러웠다.

 

위 링크는 CSS 이름을 지을 때 무엇을 기준으로 CSS의 이름을 지을 것인지를 소개한 글이다. 요약하자면 다음과 같다.

 

[CSS 이름 짓는 법]

1. 기능을 기준으로 이름 짓기

• selected-tab 과 같이 요소의 역할에 맞게 이름 짓기
• 일반적으로 가장 좋은 방법
• 시스템적으로 논리적인 이름이나 디자인이 항상 논리적인 것은 아니기 때문에 적절하지 않을 수 있다.
  • ex. 어떤 아이콘은 단순히 귀엽기 때문에 mouseover 이벤트 발생 시 커져야 한다.

 

2. 콘텐츠를 기준으로 이름 짓기

• profile-photo, login-button 과 같이 요소가 담고있는 콘텐츠를 기반으로 이름 짓기
• 소규모사이트에 적합
• 콘텐츠가 다른데 같은 모양을 해야할 경우 비효율적일 수 있다.
  • ex. login-button과 submit-button이 같은 디자인을 공유할 수도 있다.

 

3. 보이는 모양으로 이름 짓기

• big-text, blue-button 등 요소가 보이는 방식을 표현하는 이름 짓기(스타일을 여러개 만든다는 느낌)
• 대규모사이트에 적합
• 디자인 변경 시 HTML 편집이 필요하다.
  • 파랑색 버튼을 흰색으로 바꿀 때 HTML도 blue-button에서 white-button으로 바꾸어주어야 한다.