• CSS 네이밍 방법론은 CSS 클래스와 ID를 명명하는 방식에 대한 원칙과 규칙을 제시한다.
• 이 방법론은 코드의 가독성, 유지보수성, 확장성을 향상시키고 개발자들 간의 협업을 용이하게 한다.
• 여러 가지 CSS 네이밍 방법론이 있지만 가장 널리 사용되는 네가지 방법론 4가지.
• 이러한 방법론들은 각각의 장단점이 있고 프로젝트의 요구사항에 따라 선택되어야 하고 어떤 방법론을 선택하더라도 일관된 네이밍 규칙을 유지하고 이를 팀 내에서 일관되게 적용하는 것이 중요하다.

<aside> 💬 BEM(Block Element Modifier): BEM은 Block(블록), Element(요소), Modifier(수정자)의 약자입니다. 이 방법론은 각각의 요소를 쉽게 식별하고 스스로 설명할 수 있도록 클래스명을 작성합니다. 블록은 독립적으로 의미 있는 컴포넌트를 나타내며, 요소는 블록 내부의 하위 요소를 나타내며, 수정자는 요소의 상태나 외관을 변경합니다. 예를 들어, .button, .button__icon, .button--large와 같이 클래스를 작성합니다.

</aside>

<aside> 💬 OOCSS(Object-Oriented CSS): OOCSS는 객체 지향 프로그래밍의 개념을 CSS에 적용한 방법론입니다. 이 방법론은 스타일을 재사용 가능한 모듈로 분리하여 적용하고자 합니다. 이를 위해 컨테이너와 내용을 분리하고, 스킨과 구조를 분리하여 스타일을 적용합니다.

</aside>

<aside> 💬 SMACSS(Scalable and Modular Architecture for CSS): SMACSS는 확장 가능하고 모듈화된 CSS 아키텍처를 위한 방법론입니다. 이 방법론은 스타일을 범주화하고 이에 따라 조직화하여 스타일의 관리성을 높입니다. 기본적으로 5가지 유형의 범주를 정의합니다: Base, Layout, Module, State, Theme.

</aside>

<aside> 💬 Atomic CSS: Atomic CSS는 CSS 클래스를 작은, 독립적인 스타일 단위로 나누어 클래스 이름에 의미를 부여하는 방법론입니다. 클래스 이름은 해당 스타일의 성격과 의도를 반영하며, 클래스마다 하나의 스타일을 지정합니다. 이는 클래스 재사용성과 유연성을 높이는데 도움이 됩니다.

</aside>

참고 사이트 : https://getbem.com/