네이밍 방법론 (케이스 스타일, 네이밍 컨벤션)

CSS에서 스타일링을 하다보면, 클래스 이름을 무분별하게 작성하는 나를 발견한다.

최소한의 카멜케이스 또는 스네이스케이스를 사용한다거나, 의미 파악이 안되는 작명을 하지 않는다는 정도..?

👉  그러나 코드 일관성 유지 및 유지 보수와 함께 가독성을 위해서는 꼭 규칙에 맞게 작명을 해주는 습관이 좋다.

 

 

네이밍 / 작명에 대해

 

1) 케이스 스타일 

1. 카멜 케이스 :  낙타의 모양을 따와 만든 표기법, ex) camelCase

2. 스네이스 케이스 : 뱀의 모양을 따와 만든 표기법, 띄어쓰기를 언더바 _ 로 연결해 표기 ex) snake_case

3. 케밥 케이스 : 케밥의 내용물이 연결된 모양을 따와 만든 표기법, 하이픈 - 으로 연결해 표 ex) kebab-case

4. 파스칼 케이스 : upper camel case라 불리는 표기법으로 파스칼의 언어처럼 첫 문자를 모두 대문자로 표기 ex) PascalCase

 

* 1, 2, 3 첫 문자는 소문자로 시작하며, 4는 첫 문자는 대문자로 시작한다.

 

 

📍기본사항

• 작명 시에는 의미 파악이 되도록 지어야 한다. 👉 직관적이어야 한다.
• 자바스크립트/ 타입스크립트에서 변수/함수/메서드 등을 생성시 카멜케이스 사용
• CSS에서는 class는 케밥케이스, id는 카멜케이스 주로 사용

👉 세부적인 규칙은 회사나 프로젝트의 규칙에 따라 달라진다.

 

2) CSS 네이밍 컨벤션

CSS 네이밍 컨벤션이란 CSS class 지정 방식을 표준화하는 규칙이다.

동일하게 코드 일관성, 유지 보수 그리고 가독성을 위해 필요하다.

가장 많이 사용되는 것은 BEM으로 block, element, modifier로 구분하여 작명하며,

모듈화된 CSS 작성 방식으로 코드를 구조화하고, 재사용성을 높이는 장점때문에 많이 사용한다.

 

 

1. BEM(Block-Element-Modifier

: 요소를 block/형태, element/의미, modifier/상태로 구분해 작명

: 기능을 보여주고, 구성요소의 구조를 보여준다.

ex).block__element--modifier

 

2. OOCSS(Object-Oriented CSS)

: 객체지향 프로그래밍에서 사용되는 객체의 개념과 유사한 방식으로 작성

: 재사용이 가능한 최소한의 단위로 만든다.

ex).btn(기본 버튼 정의) / .btn-primary(주 버튼) / .btn-secondary(보조 버튼)

 

 

3. SMACSS(Scalable and Modular Architecture for CSS)

: CSS를 모듈화하여 작성, 5가지의 범주(base, layout, module, state, theme)로 나누어 작성한다. 

 

4. Atomic CSS

: CSS 속성을 최소한의 단위로 나누어 작성해 코드의 재사용성을 높인 작성법

: CSS 클래스를 단일 스타일에 대응시키는 방식 - 스타일을 직관적으로 설명

ex).m-0, .p-2와 같이 margin과 padding 값만 가지는 클래스를 만든다.

 

3) BEM 기법 (가장 많이 사용함)

 

📍포인트

• 형태_의미_상태 순서로 조합한다.
• class 선택자에 적용하며, 스타일시 class만 사용하는 것을 지향한다.
• 3단계 이상 넘어가지 않도록 한다. 👉 오히려 복잡해져 가독성 떨어짐
• ex) .menu__item--active

 

1. Block (블록)

독립적으로 존재할 수 있는 모듈이나 컴포넌트의 이름을 나타냄

구성요소의 가장 상위 요소의 블록

2. Element (요소)

block 안에서 특정 기능을 수행하는 하위 요소

블록과 달리 독립적으로 존재하지 못하는 요소,  __ (언더바 2개)로 구분

3. Modifier (수식어)

block이나 element의 상태를 나타내는 것

기본 클래스를 대체하기 위한 것이 아니라 확장하기 위한 것이다.

선택적으로 사용할 수 있으며,  -- (하이픈 2) 로 구분

 

---

(23.05.31 추가)

 

B - 블록 .search / .search-form

*블록이나 요소의 단어가 길어지는 경우 - (하이픈1개 / 케밥케이스) 로 연결해 가독성 높인다.

 

E - 요소 .search-form__input

블록과 요소의 계층구조를 표현한다. __ 언더바 2개 사용

 

M - 상태 .search-form__input--disabled / .search-form__input_disabled

상태는 -- 하이픈 2개 또는 _ 언더바 1개를 사용한다.

• -- 하이픈 2개 : 일시적 상태로 상태에 따른 스타일 적용이나 동작 변경에 사용
  (.button 이 일반 상태일 때 .button--active 활성 상태의 스타일을 적용한 버튼)
• _ 언더바 1개 :  시각적/동작 상태로 스타일 적용이나 동작 변경에 직접적 영향 x
  (.button_active 활성 상태를 나타내는 일반 블록의 변형)

---

 

4. Bem의 단점 

단점을 찾아보니 아래와 같은 단점들이 있다고 한다.

자세한 예시들은 BEM을 사용해보고, 밑의 단점들을 느낄 때 해결해봐야지!!!

아직은 사용안해봐서 모르겠음

 

1. 클래스 이름이 길어진다.

👉 CSS 전처리기를 사용해 변수를 사용하거나, 믹스인을 만들어 클래스 이름을 줄일 수 있다.

 

2. 중복되는 코드의 양이 많아진다.

BEM은 클래스 이름을 구조화해 중복 코드를 줄이는 것이 목적이나, 때로 중복되는 코드 양이 많아지는 문제가 있다.

👉 이럴 때는 CSS 모듈을 사용해 컴포넌트별로 CSS를 분리하고 중복되는 코드를 줄일 수 있다.

 

3. CSS 선택자의 specificity(우선순위에 영향을 줌)가 높아진다.

👉 !important 키워드를 사용하지 않는다.

👉 특정 선택자를 사용하는 대신 더 일반적인 선택자를 사용한다.

👉 CSS 전처리기를 사용해 클래스 이름을 단축시키거나, 추상화된 클래스를 사용해 specificity를 낮춘다.