Naming Convention
- 소스 코드와 문서에 있는 변수 이름, 타입, 함수 등의 식별자에 사용되는 문자를 선택하기 위한 규칙
- 가독성을 위해 많이 사용
1. Lower Camel Case
- 제일 첫 문자를 제외한 각 단어의 첫 문자를 대문자로 표시
- 보통 camelCase라고 하면 loweCamelCase를 의미
2. Upper Camel Case
1) Pascal Case
- 첫 문자를 포함해 각 단어의 첫 문자를 대문자로 표시
2) Hungarian Notation
- 이름 앞에 변수 타입을 접두어로 표시
ch(char),db(double),str(string),b(boolean)등
3. Snake Case
- 각 단어의 사이를 언더바로 구분
- snake_case
BEM
- Block, Element, Modifier로 구성된 이름을 짓는 css 컨벤션
- block__element--modifier로 이름지음
- ID가 아닌 Class명으로만 사용 가능
Block
- 재사용이 가능한 기능적으로 독립적인 페이지 컴포넌트
- 떼어다가 다른 곳에 쓸 수 있는 단위
Element
- 블럭을 구성하는 단위
- 의존적인 형태로 자신이 속한 블럭 내에서만 의미를 가져 다른 블럭에 쓸 수 없음
Modifier
- 블럭이나 엘리먼트의 속성을 담당
OOCSS
- Object Oriented CSS로 구조와 외형을 분리하고 컨테이너와 내용을 분리하고자 함
구조와 외형을 분리
구조
- width, height, border, padding, margin
외형 - color, border-color, font-color, background
btn {}
primary-skin {}컨테이너와 내용을 분리
- 어떤 태그라도 동일한 외형 제공
- 위치에 의존하지 않음
<h1 class="title">hello</h1>
<section class="title">hello</section>SMACSS
- Scalable and Modular Architecture for CSS
- CSS에 대한 확장형 모듈식 구조의 형태로 5개의 구분된 카테고리가 존재
Base - 기본 규칙
- 각 브라우저의 기본 스타일 및 요소 element 스타일의 기본 정의
Layout - 레이아웃 규칙
- 큰 틀의 레이아웃, 배치에 적용
- header, footer, aside, container
- list, item, form 등
Module - 모듈 규칙
- 페이지에 재사용 가능한 요소
- button, banner, icon 등
- 재사용이 가능하고 id, tag는 사용하지 않음
State - 상태 규칙
- 요소의 상태 변화를 나타내는 요소
- active, disable 등
- 모듈과 레이아웃 모두 적용 가능
Theme - 테마 규칙
- 사용자가 선택 가능하도록 스타일 재선언하여 사용
참고자료
https://bmind305.tistory.com/45
https://nykim.work/15
https://whales.tistory.com/33
https://velog.io/@fromzoo/css-방법론-BEM-방식
