[FE로드맵] CSS 양식

브리셀·2021년 9월 27일

BEM OOCSS SMACSS SUITCSS frontend roadmap

BEM

Block Element Modifier
- B__E1__E2--M의 형식으로 클래스 명명
- Block: 홀로 존재할 수 있는 요소 단위
- Element: 상위 block에 종속되어 존재하는 하위 요소 (예: <ul>과 <li>의 관계)
- Modifier: block이나 element에 덧붙이는 스타일 (예: highlighted, size-big 등)
특징: 클래스 이름은 길어지지만 역할 예측이 쉬워짐

OOCSS

Object Oriented(객체지향) CSS
중복을 최소화하고 캡슐화를 원칙으로 함
1. 구조와 외형을 분리
  - 구조: 길이, 너비, 여백 등
  - 외형: 색상, 글씨크기 등
2. 컨테이너와 내용을 분리
  - 위치나 태그에 관계 없이 클래스 작성
특징: 어떤 위치에서든 같은 스타일로부터 같은 외양을 얻을 수 있지만 한 번에 적용해야하는 클래스가 많아짐

SMACSS

Scalable and Moudlar Architecture for CSS
스타일을 다섯 가지 범주로 나누어 분류하는 방식
- Base
  - 가장 기본적인 스타일 정의
  - class나 ID가 아니라 element에 직접 적용
  - !important를 사용하면 안 됨
- Layout
  - header, article, footer 등의 큰 레이아웃의 스타일 정의
  - module과 달리 기본적으로 재사용되는 부분이 아니기 때문에 class보다는 ID를 사용하는 것이 적합할 수 있음
  - 보통은 single selector를 사용하지만 상황에 따라 변화를 주어야 할 경우 추가 클래스를 활용할 수 있음
  - 클래스를 사용할 경우 Layout의 L을 따서 prefix l-을 붙이길 권장
- Module
  - 재사용 가능한, standalone한 단위의 스타일 정의
  - 모듈 명을 namespace로 하여 prefix (module)-를 활용
  - 역할을 충분히 예측 가능하다면 자식요소를 element로 선택해도 되지만, 가능하면 class로 직접 적용하길 권장
    - 확장성에도 큰 영향이 있으므로 아무튼(?) class 사용 권장
- State
  - hidden, expanded, inactive 등의 상태 변화에 대한 스타일 정의
  - prefix is- 활용
  - !important 사용 권장
  - Module에 포함시킬 수도 있지만 State로 따로 적용하는 경우에는
    - Layout에도 적용시킬 수 있고
    - JavaScript에 대응시킬 때는 이쪽을 선호
- Theme
  - 말 그대로 테마 적용에 필요한 범주이지만 일반적으로 잘 쓰이진 않음
장점: 범주화 되어있음
단점: 그걸 직접 해야함 (...)

SUIT CSS

하이픈을 이용하여 클래스 이름을 구조화 하는 방식 (단어 연결에는 하이픈을 사용하지 않음)
- 유틸리티: u-[sm-|md-|lg-](utilityName)
  - 여러 요소에 적용될 수 있는 스타일 정의
    예: .u-displayFloat { display: float; }
  - prefix u-를 반드시 붙이며, breakpoint에 따라 sm, md, lg 등의 키워드를 넣을 수 있음
  - 이름은 camelCase로 작성
    - 첫 단어를 제외하고 각 단어의 첫 글자를 대문자로 하여 연결하는 방식
- 요소: [(namespace)-](ComponentName)[-(descendentName)][--(modifierName)]
  - 각 요소의 스타일 정의
  - 필요한 경우 앞에 소문자로 namespace를 붙일 수 있음 (소문자로?)
  - 이름은 PascalCase로 작성
    - 첫 단어를 포함한 모든 단어의 첫 글자를 대문자로 하여 연결하는 방식
  - 하위 요소는 camelCase로 작성
  - modifier는 camelCase로 작성
    - 기본 Component와 함께 적용하는 것을 전제로 함
      예: <button class="Button Button--default" type="button">...</button>
- 상태: (Component).(is-stateOfComponent)
  - 절대 단독으로 작성하지 않고 Component와 연결하여 작성
    예: .Comp { ... } .Comp.is-active { ... }
- 변수
  - --(Component)[-(onState)]-[(cssProperty)|(variableName)]
  - --(variableName) (for non-component variables)
    - 어느 경우든 cssProperty나 variableName은 camelCase로 작성
- 요약하자면 namespace와 ComponentName을 제외하면 모든 키워드를 camelCase로 작성함
특징: BEM과 비슷할 듯. 클래스 이름은 길어지지만 역할 예측이 쉬워짐