CSS 설계 기법 정리

본 글은 CSS 설계 기법 책을 읽고 단순하게 정리하고 나열한 글이다. 추후에 이러한 지식을 바탕으로 프로젝트의 CSS 체계를 직접 고려해보고 적용시키는 과정을 거쳐보려고 한다.

 

---

OOCSS

기초 중의 기초인 CSS 설계 기법이다. 가장 밑바탕이 되어준다.

 

1. 스트럭처와 스킨을 분리
   구조(width ,height ,margin ,padding 따위)와 스킨(background, font, color 따위)을 분리하여 css를 설정한다. 이는 상황에 따라 적절히 구분해야할 것이다.
2. 컨테이너와 콘텐츠 분리
   한 영역에만 적용될 콘텐츠 만드는 것을 지양하자.

SMASSS

느슨한 개발을 원할 경우에 적합하다. 다른 기법과 조합해도 좋은 기법.

 

1. 베이스 규칙

프로젝트의 표준 스타일을 정의한다.
ID 셀렉터나 class 셀렉터는 사용하지 않는데, 이것은 특정 상황을 사용하도록 가정하기 때문이다. 요소형 셀렉터(body{})나 >,:… 등과 같은 셀렉터만을 사용한다. 리셋 css도 여기에 속한다.

 

2. 레이아웃 규칙

큰 틀(메인영역, 사이드바 등)을 구성하는 큰 모듈에 관한 규칙이다.
보통 특정 페이지에 한 차례씩 사용되는 정도이기에 ID 셀렉터와 class 셀렉터 모두 사용 가능하다.
만약 특정 상황에서 레이아웃이 변경된다면, 가장 상단의 요소에다가 새로운 레이아웃 클래스(혹은 ID)를 만든 뒤 그 안에다가 변경된 레이아웃에 대해서 작성하면 된다.

.l-header{width:20px}
.l-something-change .l-header{width: 50px}

 

3. 모듈 규칙

타이틀이나 버튼, 카드 등 같은 레이아웃 안에 배치 되는 모듈들에 관한 규칙이다.
반복사용되는 상황을 가정하고 있기에 다른 페이지로 이동하거나 다른 레이아웃에 삽입되어도 형태가 부서지면 안된다. css 설계의 허리가 되는 부분이므로 불필요한 코드를 생략하거나 이동 시 다른 곳에 영향이 없는지 꼼꼼하게 체크 할 필요가 있다.

< 참조 >

1. 요소를 시맨틱으로 한다.
    시맨틱한 코드를 쓰거나 혹은 클래스명을 써서 명확히 하는 것이 좋다.
2. 가급적 요소형 셀렉터는 사용하지 않는다. 
3. 요소형 셀렉터를 사용하려면 시맨틱 요소에만 하고, 사용할때는 자녀 셀렉터(>)만 사용한다.

모듈 내에서 변화를 주어야할 때는 “어느 모듈 안에 있을 때는 이런 형태..”와 같이 쓰는게 아니라 서브클래스를 사용한다. 이렇게 하면 특정 콘텍스트에 의존하지 않고 해당 모듈의 변화를 따로 담아낼 수 있다.
서브클래스인지 클래스인지 구분이 안가지만 규칙에는 없기에 본인이 정하면 될 듯 하다.. 예를 들어 서브클래스는 하이픈을 두개 달던지

 

4. 스테이트 규칙(is-)

기존 스타일을 덮어쓰거나 확장하기 위해 사용. 서브클래스와 다른 점으로 2가지가 있는데,

1. 레이아웃이나 모듈에 할당할 수 있다. 
이는 재사용을 위한 것이기라기보단 특수한 상황에서 스타일이 변경되어야 함으로, 특정 콘텍스트에 의존하게끔 만드는 것이 좋다. 물론 재사용이 되는 사항이면 그렇지 않는다. 상황에 따라 이용하라는 뜻.

2. js에 의존한다는 의미를 갖는다.
기존 스타일을 모두 덮어써서 반영하는것이기에 !important도 여기선 사용 권장한다. 예를 들어 메뉴 버튼을 클릭 시 활성화 상태를 보여야하는데 이 때 해당 규칙을 활용하는 것이다.

 

5. 테마 규칙

theme-라는 접두사를 붙여 사용한다.

BEM

블록별로 분리해서 간단하고 신속한 개발 목적으로, 엄격하고 강력하다.

요소형이나 ID는 권장하지 않는데, 모두 class를 사용함으로 상세도를 균일하게 유지하기 위함이다.

클래스 이름은 형태를 묘사하기 보단 그 클래스가 무엇인지에 초점지어 짓는다. 예를 들어 red-text가 아닌 error 같은 느낌으로 짓는다.

 

1. Block

기능적으로 독립한 모듈이다. 언제든지 다른 곳에서 사용할 수 있기에 이 곳에 레이아웃에 관한 스타일링은 하면 안된다.

블럭 안에 블럭이 중첩가능하다.

 

2. Element

클래스명: 블록이름__상태(ex:menu__item)

Block 외부에서는 사용 불가한 Block 안에 있는 구성 요소이다. 예를 들어 nav안에 li들이 Element인 셈이다.

엘리먼트 안에 엘리멘트가 더 있을시 엘리먼트가 변경되었을 때 혼란오지 않도록 클래스명을 menu__item__link가아니라 menu__link와 같은 형태로 짓는다. 

 

3. Modifier

클래스명: 블록__엘리멘트_모디파이어(ex:global-nav__link-item_actived)

모디파이어는 한 단어의 상태는 한 단어로 쓰지만, 두 단어 이상일 때는 키와 값 형태로 지을 수 있다.

(btn btn_size_s btn_text_large → 사이즈는 작고 글자는 큰 버튼)

블록이나 엘리먼트의 형태, 상태, 움직임 같은 그것이 어떠한가를 중심으로 이름을 짓는다. 반드시 블록, 엘리먼트 클래스 뒤에 두 번 째 클래스로 사용되어야한다.

 

4. Mix

블록이나 엘리멘트의 레이아웃을 수정하고 싶을 때 block_element 이름의 클래스를 넣어 여기다가 레이아웃을 조절할 수 있다. 이렇게 하면 기존의 블록과 엘리먼트의 독립성을 유지하면서 특정 상황을 받아들일 수도 있다.