[코드스쿼드] CSS 클래스와 네이밍

CSS 클래스와 네이밍

[CSS방법론] SMACSS, BEM, OOCSS 내용 중 일부 글을 발췌하였습니다.
HTML5의 Custom Data Attributes를 이용하여 HTML을 의미있는 데이터로 사용하기’ 내용 중 일부 글을 발췌하였습니다.

CSS Class 의 네이밍을 어떻게 지을까?

DOM이 복잡해지면, Class 네이밍이 굉장히 복잡한 작업이 되어버린다. 그래서 각 회사마다 컨벤션 규칙에 따라 Class 네이밍을 적용하고, 유지보수를 편하게 하려고 한다.

네이버 모바일 웹의 일부분이다. brick-vowel 이라는 class 이름을 가진 div 태그 밑에 grid1 속성이 base 로 지정되어 있으며, id_uio_link id_uio_thumbnail id_cui_cupid_news 등으로 네이밍이 되어있다.

OOCSS, Object Oriented Cascading Style Sheets

[CSS방법론] SMACSS, BEM, OOCSS 블로그 내용 중 OOCSS 라는 패턴을 간단하게 살펴보면 다음과 같다.

구조와 외양을 분리

.button {
    ...
}
.box {
    ...
}
.widget {
    ...
}
.skin {
   background: linear-gradient(#ccc, #222); 
   box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px; 
}

컨테이너와 컨텐츠를 분리

/* 분리하기 전 */
.header-inside{
   position:relative;
   margin:0 auto;
   width:980px;
   height:260px;
   padding:20px;
   overflow:hidden;
}

/* 분리 후 */
.globalwidth{
   position:relative;
   padding-left:20px;
   padding-right:20px;
   margin:0 auto;
   width:980px;
   overflow:hidden;
}
.header-inside{
   padding-top:20px;
   padding-bottom:20px;
   height:260px;
}

<!-- HTML -->
<div class="header-inside globalwidth"></div>
<div class="main globalwidth"></div>
<div class="footer-inside globalwidth"></div>

클래스 이름 짓기

간결함: 되도록 짧게
명료함: 스타일과 작동 방식이 고스란히 드러나게
분명한 말뜻(Semantics): 어떻게 생겼는지가 아니라, 어떤 모듈인지
포괄성: 대부분의 사이트에서도 적용되도록
화면 중심성: 종이나 다른 매체가 아닌 모니터를 기준으로

/* OOCSS 적용 전 */
.twitterbtn {
  border:3px solid #000;
  padding:10px 20px;
  color:#fff;
  border-radius:10px;
  background:red;
}
   
.facebookbtn {
  border:3px solid #000;
  padding:10px 20px;
  color:#fff;
  border-radius:10px;
  background:gray;
}
  
<a href="#" class="twitterbtn">Twitter</div>
<a href="#" class="facebookbtn">Facebook</div>

/* OOCSS 적용 후 */
.btnbase {
  border:3px solid #000;
  padding:10px 20px;
  color:#fff;
  border-radius:10px;
}
   
.twitter {
  background:red;
}
.facebook {
  background:gray;
}
  
<a href="#" class="btnbase twitter">Twitter</div>
<a href="#" class="btnbase facebook">Facebook</div>

HTML이 약간 복잡해지는 단점이 OOCSS의 한계라고 볼 수 있으나, OOSass 방법론을 사용하면 OOCSS의 단점을 보완할 수 있다. (자세한 내용은 블로그 원 글을 참고)

좋은 습관

Component Library를 이용하여 HTML을 구성하자. (like lego) http://pflannery.github.io/oocss-skeleton.docpad/oocss/help/components.html
semantic 스타일을 지속적으로 사용하자
내부에 종속되지 않도록 모듈을 디자인하자
코드를 유연하게 (width는 container가 제어하고, height은 contents가 제어하도록)
Grid를 사랑하는 습관을 갖자. http://jsfiddle.net/inuitcss/CLYUC/l
선택자(selector) 사용은 최소화하자
여러개의 클래스를 적용하여 확장성을 열어두자
CSS Lint를 사용해서 코드를 검사하자
구조와 스킨을 독립적으로 관리(위에서 설명)
컨테이너와 컨텐츠를 구분하자(위에서 설명)
Reset and fonts를 사용하자 (ex. YUI)
나쁜 습관

의존적인 스타일을 피하자 .class p{...}
CSS에 HTML 태그를 적지말자 div.classname{...} or p.classname{...}
ID 사용은 피하자
모든 이미지를 스프라이트 하지 말자
높이를 고정시킨 상태에서의 정렬을 피하자
텍스트를 이미지로 사용하지 말자
너무 이른 최적화는 피하자
쓸모 없는 것을 두번 반복해서 사용하지 말자

CSS 클래스와 네이밍

CSS Class 의 네이밍을 어떻게 지을까?

OOCSS, Object Oriented Cascading Style Sheets

좋은 습관

나쁜 습관

Share this post