[코드스쿼드] 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 사용은 피하자
  • 모든 이미지를 스프라이트 하지 말자
  • 높이를 고정시킨 상태에서의 정렬을 피하자
  • 텍스트를 이미지로 사용하지 말자
  • 너무 이른 최적화는 피하자
  • 쓸모 없는 것을 두번 반복해서 사용하지 말자





© 2018. by HYEON

Powered by HYEON