CSS : class naming (OOCSS)

CSS에서 class를 이름 짓는 것은 굉장히 중요하다.

우리는 주로 CSS에서 div, span, section, nav 태그들로 content들을 감싸는데, HTML로 처음 구조를 잡아주고, 나중에 CSS로 글자크기, 위치, 태그의 크기 등등을 정한다. 이 때 필요한 개념이 class 이다.

 

OOCSS (Object Oriented Cascading Style Sheets)

class는 다른 언어에서도 많이 등장하는 개념이다.

class는 하나의 틀이라고 생각하면 된다. 틀을 만들어서 내가 필요할 때마다 재사용하는 개념이 class에서 가장 중요한 개념이다. 즉, code의 재사용률을 높이는 것이다. 

 

• OOCSS의 장점
  • 코드의 재사용성
  • 코드 재사용으로 인한 스타일시트의 용량 축소
  • 스타일시트의 용량 축소로 인한 속도 향상

• OOCSS의 단점
  • 다중 클래스 사용으로 HTML가 복잡해짐
  • non-semantic한 클래스 사용
  • Sass와 함께 사용하게 되면 단점을 보완할 수 있음

---

1. 구조와 외양을 분리

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

위의 구조를 보면,  button, box, widget 을 담당하는 기능을 따로 나누고, 외양을 담당하는 skin을 따로 나누었다.

이렇게 기능을 하는 것과 외양을 담당하는 부분을 따로 나누어야 한다.

 

2. container와 content 분리

.header-inside{
   position:relative;
   margin:0 auto;
   width:980px;
   height:260px;
   padding:20px;
   overflow:hidden;
}

지금 보면 header-inside 에 container를 담당하는 position, margin, width, 그리고 content를 담당하는 padding, overflow, height가 합쳐져있다. (width는 보통 container에 담는다. height는 보통 content에 담는다.)

.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;
}

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

위 처럼 globalwidth와 header-inside로 class 명으로 나누고, HTML에 적어줄 때는 header-inside globalwidth로 띄어쓰기로 구분해준다. 그러면 두 개의 class css가 적용이 된 것이다.

 

즉, 하나의 class로 되어있는 css가 아니라 Object-Oriented를 가지는 CSS를 만들기 위해 기능을 세분화 하는 것이 좋다.

 

3. class 이름 잘 짓기

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

 

• HTML 코드를 시멘틱하게 짜고자 할때, 아래와 같이 CSS를 작성하는 경우가 많다.

중복되는 스타일이 많다.

.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>

 

OOCSS에 대한 opinion

OOCSS가 말 그대로 객체지향 CSS이기 때문에, 물론 HTML이 다중클래스로 복잡하고 알아보기 힘들 수는 있지만, CSS에서 class만 잘 나눠놓으면 CSS의 용량이 줄어들고 속도향상도 되고, 좋은 점이 더 많은 것 같다. 그리고 sass와 쓰면 단점을 보완할 수 있다고 하니까, 나중에 sass 도 공부해보자.

 

 

 

 

 

출처 : 

https://antaehyeon.github.io/devlog/2018/07/09/%EC%BD%94%EB%93%9C%EC%8A%A4%EC%BF%BC%EB%93%9C-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-Lv3-CSS-%ED%81%B4%EB%9E%98%EC%8A%A4%EC%99%80-%EB%84%A4%EC%9D%B4%EB%B0%8D/

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