2021-11-12 TIL

Day11 TIL

 

 

CSS 설계 기법

▪️ OOCSS(Object Oriented Cascading Style Sheet) 

객체 지향(Object Oriented)이란 간단하게 표현하자면 프로그램에서 고려해야하는 모든 기능적 요소들을 각각 하나의 사물처럼 보는 것이라고 할 수 있다

OOCSS는 모듈을 하나의 레고블록(사물)이라고 생각했을 때 이를 여러개 조합해서 만드는 방법론이다

 

- 방법

 1) 구조와 스킨 분리 : 동일한 UI에 스킨만 다른 경우

     ▫️ 구조에 포함되는 속성 : width, height, padding, margin 등 레이아웃에 영향을 미치는 속성

     ▫️ 스킨에 포함되는 속성 : color, background, border 등 레이아웃에는 영향을 주지않고 시각적인 영향을 주는 속성

 

<예시1>

/* 구조(레이아웃에 영향을 끼치는 속성들) */
.btn{
width: 200px;
height: 80px;
font-size: 30px;
}
/* 스킨 */
.btn-close{
background: black;
color: #fff;
border: dotted 3px #fff;
}

<button type="button" class="btn"></button>
<button type="button" class="btn btn-close"></button>

 

<예시1> 결과 화면

 

 

2) 컨테이너와 콘텐츠의 분리 : 컨테이너와 콘텐츠 간의 의존성을 제거한다 즉, 콘텐츠의 스타일이 특정 컨테이너 내의 스타일로 한정되지 않도록 하여 재사용 가능하게 한다

아래 <예시2-1>의 CSS 코드를 이 규칙을 적용하여 <예시2-2>의 코드로 바꿀 수 있다

 

<예시 2-1>

#btn {
    width: 300px;
    padding: 20px 10px;
    margin: 100px;
    font-size: 18px;
    line-height: 1.5;
}
#btn .submit {
    background-color: green;
    color: white;
}
#btn .cancel {
    background-color: red;
    color: white;
}

<예시 2-2>

.btn {
    width: 300px;
    padding: 20px 10px;
    margin: 100px;
    font-size: 18px;
    line-height: 1.5;
}
.submit {
    background-color: green;
    color: white;
}
.cancel {
    background-color: red;
    color: white;
}

 

 

▪️ SMACSS(Scalable and Modular Architecture for CSS)

  CSS규칙을 다음 5가지로 분류한다

 

 - Base Rules 베이스

   ▫️ 기본적으로 보여지는 CSS 디폴트 스타일(default styling)을 정의한다 heading 크기, link 스타일, body background 등이 포함되며 !important는 사용되선 안된다

 

- Layout Rules 레이아웃

  ▫️ header, article, footer 등의 큰 골격을 가지는 레이아웃에는 id를 사용한다

<main id="main">
    <header id="header">
    	<h1>Layout 예시</h1>
	</header>
    <footer id="footer">
    </footer>
</main>

- Module Rules 모듈

   ▫️ 레이아웃안에 배치되는 모든 요소들을 의미하며 반복되는 요소들이기 때문에 ID 선택자를 사용하지 않는다

   ▫️ 요소 선택자의 사용을 최소화한다(자식 요소에만 적용)

.module span {
    padding: 5px;
}

   

  ▫️ 같은 모듈안에 있는 요소들에게 차별적인 스타일을 주고싶을때는 sub-class를 만들어 기존 스타일을 덮어씌움으로써 다른 스타일을 줄 수 있다

.btn{
    display: inline-block;
    width: 300px;
    padding: 20px 10px;
    font-size: 18px;
    text-decoration: none;
    text-align: center;
    color: beige;
    background-color: saddlebrown;
  }

/* sub-class */
.btn.btn-small{
    width: 80px;
    padding: 10px 0;
    font-size: 14px;
  }
.btn.btn-long{
    width: 160px;
 }

 

- State Rules 스테이트

  ▫️ 기존 스타일을 덮어쓰거나 확장하는데 사용한다

 

  ❔ 모듈과 스테이트의 차이

   둘다 스타일을 덮어씌우는건 동일하지만 모듈은 스타일을 한번 적용하면 고정이고 스테이트는 JS에 의존적으로 JS의 동작에 따라 넣었다 뺐다 할 수 있다 예를 들어 tab을 클릭하는 이벤트가 발생했을 때 is-active* 클래스가 추가 되고 다른 tab을 클릭하면 먼저 클릭했던 요소에는 is-active 클래스가 제거되는 식으로 사용할 수 있다

   또한 스테이트는 모듈과 다르게 레이아웃, 베이스 규칙에도 적용할 수 있다

* CSS에 :active 속성이 있는데 굳이 is-active 클래스를 추가하는 이유 : css 속성은 브라우저 화면상 표현되는 스타일만 주는 역할만 하므로 active한 status를 저장할 수가 없다 is-active 클래스를 만듦으로써 JS로 해당 클래스를 요소에 추가하고 active 상태를 저장할 수 있도록 처리할 수 있다

 

- 테마

  ▫️ 이미지(background-image), 색상(background-color, color, etc) 등의 사이트의 모양이나 느낌에 영향을 주는 요소에 사용되는 스타일 규칙

  ▫️ 초기에 모듈에 기본 스타일을 적용하고 나중에 테마 스타일을 적용하는 식으로 사용한다

<link type="stylesheet" href="module-name.css">
<link type="stylesheet" href="theme.css">

/* module-name.css에서 기본 default 스타일을 정의 */
.mod {
    border: 1px solid;
}

/* theme.css에서 theme 스타일을 정의 */
.mod {
    border-color: blue;
}

 

▪️ BEM(Block, Element, Modifier)

  ▫️ 기본적으로 OOCSS와 같은 모듈 기반의 스타일 설계 방식

  ▫️ 클래스 선택자만 사용하는 것을 권장한다(id 선택자, 요소 선택자 x)

     → 한가지 선택자로만 통일함으로써 가중치 계산을 원활하게 하기 위해

 

 - Block

  ▫️ 어디에 종속되지 않고 자체적으로 의미가 있는 개체를 캡슐화하는 요소로서 우선순위나 계층이 없다 (ex. container)

  ▫️ 어디에서나 재사용이 가능하다

  ▫️ 클래스 네이밍에 있어 목적이 명확해야 한다(ex. error, hidden)

  ▫️ 형태를 설명하는 클래스 네이밍은 배제하고 의미를 중시하는 클래스명을 사용한다

class="green-box" (X)
class="error-red" (O)

 

- Element

  ▫️ Block에 종속되는 요소

  ▫️ 클래스 네이밍 : block 요소의 클래스 네임을 상속 받고 element의 클래스 네임을 언더바 두개로 연결

  ▫️ element 안에 또 element를 사용할 경우 클래스 네이밍은 element 끼리 중첩하지 않는다

<div class="opcacity-half">
    <button class="opacity-half__btn">
        <span class="opacity-half__txt">Click</span>
    </button>
</div>

opacity-half__btn__txt (x)
opacity-half__txt (o)

 

- Modifier

  ▫️ 요소의 모습이나 상태 또는 움직임 (활성화된 상태, 사이즈, 컬러 등)을 정의

  ▫️ 클래스 네이밍 : block이나 element의 이름을 상속 받고 언더바 하나로 연결한다 두개 이상의 단어 사용할 시 하이픈으로 연결한다

  ▫️ 단독으로 클래스 이름을 사용하지 않고 요소의 두 번째 클래스 이름으로 사용한다

<button class="btn-move btn-move_size-small">
</button>

btn_size_small (x)  -- 단독 사용하지 않는다
btn_move btn_move_active (o)

 

 

 

 

---

 

 

 

OOCSS, SMACSS, BEM 모두 대표적인 CSS 방법론이긴 하지만 어느 한가지 반드시 따라해야하는 것은 아니다

회사별로 따로 사용하는 규칙, 방법론이 있으므로 참고 정도할 것

 

 

클래스 이름에 대문자를 쓰는 건 피하는 게 좋다고 한다

자바스크립트에서 카멜케이스 쓰던 버릇이 있었어서 css 클래스 이름에도 종종 그렇게 썼었는데 고쳐야겠다

 

 

 

 

 

---

참고자료

OOCSS - The Future of Writing CSS - KeyCDN

Book - Scalable and Modular Architecture for CSS

BEM — Block Element Modifier