[우아한테크] 동동 : CSS 방법론

 

 

https://www.youtube.com/watch?v=B70h37mpD74 

 

영상에 대한 내용을 간략하게나마 정리해보았다.

 

---

 

1. CSS방법론이란?

1) CSS의 등장

CSS는 html의 각 요소를 꾸미는 스타일언어이다. CSS등장 전에는 html요소들마다에 스타일을 부여했다. 이 경우 유지보수가 불리하다는 단점이 있고, html은 본래 문서구조를 의미하므로 스타일 지정하는 것은 바람직하지 않다는 문제점또한 있다. 그러한 이유로 스타일을 따로 적용할 수 있는 CSS가 등장하게 되었다. CSS는 기본적으로 전역범위이기에 유지보수가 용이하다.

 

---

2) CSS방법론의 등장_CSS의 문제점

위에서 서술되었다싶이 CSS는 기본적으로 전역범위라서, 페이지수가 늘어남에 따라 CSS가 점점 복잡해지고 관리하기 어렵다. 유지보수가 용이한 CSS를 작성하는것이 어려워졌고, 이를 해결하기 위한 여러가지 CSS방법론들이 대두되었다.

 

 

 

---

 

2. CSS방법론

 

1) OOCSS

Object Oriented CSS의 축약어로, 객체지향 CSS라는 의미이다. 니콜 설리번(Nicole Sullivan)이  제창하였다.

주요발상은 다음과 같다.

① 레고처럼 자유로운 조합이 가능한 모듈의 집합을 생성

이때, 모듈을 구현하기 위한 두가지 원칙이 있다.

1. 스트럭처(구조)와 스킨(화면)분리
   : 하나의 요소를 설정하기 위한 긴 스타일언어를 구조(공통부분), 스킨 기준으로 분리하여 설정한다.
   스킨 부분만 새로 설정하므로 재사용이 용이하다!
2. 컨테이너(영역)와 컨텐츠(모듈) 분리
   : 모듈을 가능한 특정 영역에 의존하지 않도록 한다.

② 모듈을 조합해 페이지 생성
③ 즉, 신규페이지를 만드는 경우에도 기본적으로 추가적인 CSS를 만들 필요가 없다.

▶ 정리

역사가 매우 길기 때문에 OOCSS한가지만으로 실질적인 CSS설계를 수행하는 것은 그다지 현실적이지 않다. 허나 다른 방법론들의 모토가 되었기에 방법론의 '진리'라고 표현 가능하다.

 

 

---

2) SMACSS

Scalable acd Modular Architecture for CSS의 축약어로, 조나단 스눅(Jonathan Snook)이 제창하였다.

주요 발상은 역할에 따라 5가지로 분리되어있다.

① 베이스(base)

프로젝트 전반에 적용되는 스타일링(ex. 바탕색, 브라우저간 차이제거하기위한 리셋CSS, 노멀라이즈CSS도 이에 해당)

 

② 레이아웃(layout)

헤더,메인,사이드바 등 웹의 레이아웃을 구성하는 큰 모듈에 관한 규칙이다. id셀렉터를 허용하며, 반복사용하는 모듈의 경우 클래스셀렉터를 이용한다. 특정 페이지에서만 레이아웃을 변경하고싶은 경우 손자셀렉터(띄어쓰기로 구분지정하는 선택자)를 이용해 레이아웃 모듈의 스타일을 덮어쓴다.

③ 모듈(module)

title, button, card, navigation등 일반적인 UI컴포넌트를 나타낸다. 모든 모듈은 레이아웃 규칙 안에 배치되는것으로 가정한다. 모듈의 루트요소에는 반드시 클래스 셀럭터를 사용하고, 자녀 셀렉터를 사용하여 영향 범위를 지나치게 넓히지 않도록 주의한다.

④ 스테이트(state)

기존 스타일을 덮어쓰거나 확장하기 위해 사용한다. 스테이트 규칙에 따른 클래스 이름은 모두 is-접두사를 붙여 다른 규칙들과 구별하여야하며, 자바스크립트에 의존한다.

⑤ 테마(theme)

사이트 내 레이아웃, 색상, 텍스트 처리 등을 일정한 규칙에 따라 덮어쓰는 것이다. (ex. 다크모드, 테마 컬러변경 등) theme접두사를 붙이는 것이 권장된다.

 

▶정리

각 규칙이 엄격하지 않아 유연하다. 하지만 이 부분은 경우에 따라 실제 코드의 지침으로 삼기 어렵다. 모듈 규칙에 OOCSS를 적용하거나 다음에 설명할 BEM의 규칙을 일부 적용하는 등 다른 설계 기법과 조합하는 경우가 많다.

 

 

---

3) BEM

Block, Element, Modifier의 축약어이다.  주로 클래스 셀렉터를 사용한다. 이는 덮어쓰기를 쉽게하기 위함이다.

 

주요 발상은 다음과 같다.

 

① block

재사용할 수 있는, 기능적으로 독립적인 페이지 구성요소. 상태가 아닌 용도로 네이밍해야한다. margin과 position을 설정하지 않아야하고, 중첩이 가능하다.

② element

block의 복합부품으로 block과 별도로 사용할 수 있다. 마찬가지로 상태가 아닌, 용도로 네이밍해야한다. 명명법은 다음과 같다. block-name__element-name. 모든 block이 element를 가져야 하는 것은 아니다.

③ modifier

block, element의 모양, 상태 또는 동작을 정의한다. 즉 네이밍도 그렇게 해야한다.

 

 

---

 

3. Utility-First CSS / Functional CSS

위에서 설명한 총 3가지의 방법론들의 문제점을 극복하기 위한 방법론이며, 위의 방법론들의 문제점은 다음과 같다.

1. CSS가 html 구조와 강하게 결합되어있다.
2. html에 CSS가 의존한다.
3. CSS에 html가 의존한다.

 

전체적으로 inline style과 유사하지만, 일관된 스타일링을 할 수 있고, media query와 hover, focus등의 의사클래스 셀렉터도 사용 가능하다는 차이점이 있다.

대표적인 것으로는 Tailwind CSS, Tachyons, Atomic CSS가 있다.

 

 

 

---