[html]클래스명 및 변수 네이밍 방법 / css 방법론

스네이크 케이스 name_value

카멜 케이스 nameValue

파스칼 케이스 NameValue

*헝가리 어쩌고로 타입을 정해주는것도 있으나 잘안씀

(ex. intNum strName 등)

 

css 방법론

OOCSS

- 일반적으로 흔히 사용하는 방법

- 구조와 외형, 컨테이너와 내용을 분리시켜 작성함

ex) .title / .sub_title / .btn / .btn.tel 등

 

BEM

- 클래스만을 하용하며 id는 사용하지않음

- 블록, 엘리먼트, 모디파이어로 나누어서 클래스명을 작성

- 블록__엘리먼트--모디파이어

- 일반적으로 언더바 2개, 하이픈 2개씩 작성하지만 꼭 그렇지는 않은 듯

- 더블클릭시 하이픈은 제대로 선택이 되지않음. 통일성만 가지고가면 좋을듯함

- 컴포넌트 단위로 가이드를 작성할때 좋았음 

- css보다는 scss를 사용하기에 적합

ex) .header / .header__tab / .header__tab--hide

 

SMACSS

- 작성할 css를 5가지의 비슷한 스타일로 나누고 각 유형에 맞춰 작성

- 기본base, 레이아웃layout, 모듈module, 상태state, 테마theme

base - reset파일을 생각하면됨 

layout - 흔히 id를 사용하는 요소

module - title_name, title_number 등 재사용이 높은 쇼소 

state - 에러 히든 디스에이블 등의 요소

theme - base등 기존에 지정한 요소가 아닌 custom요소(재선언)