자바스크립트 프로젝트에서 CSS 클래스 및 ID에 적절한 명명법을 사용하면 관련 코드를 쉽게 이해하고 유지 관리하는 데 큰 영향을 줄 수 있습니다. 클래스 및 ID 명칭에 확립된 가이드라인을 적용하면 프로젝트의 전반적인 가독성, 재사용성 및 적응성을 향상시킬 수 있습니다. 이러한 이점을 얻으려면 이러한 표준을 준수하는 것이 중요합니다.
시맨틱 이름 사용
컴포넌트의 기능이나 목적을 정확하게 반영하는 이름을 선택하는 것이 가장 중요합니다. 의미론적 의미를 전달하는 이름은 의미 있는 맥락을 제공하므로 코드에 대한 이해도를 높일 수 있습니다.
‘상자’ 또는 ‘홀더’와 같은 일반적인 레이블 대신 ‘헤더’ 또는 ‘사이드바’와 같은 명칭을 사용하는 것이 좋습니다. 이러한 용어는 구성 요소의 기능에 대한 어떠한 표시도 제공하지 않기 때문입니다.
/* Semantic names example */
.header {}
.sidebar {}
일관된 명명 규칙 사용
통일된 방법론을 준수하면 코드베이스의 구조적 무결성을 쉽게 보존할 수 있으므로 CSS 분류 및 ID 지정을 할당할 때 명명법의 통일성이 가장 중요합니다.
블록 요소 수정자(BEM) 및 객체 지향 CSS(OOCSS) 명명 규칙을 사용하는 것이 해당 분야의 모범 사례라는 것은 널리 알려져 있습니다.
객체 지향 CSS(OOCSS) 접근 방식을 사용하면 모듈화되고 체계적이며 확장 가능한 캐스케이딩 스타일시트(CSS)를 만들 수 있습니다. 이 방법론의 실제 적용 사례는 다음과 같이 내비게이션 구성 요소의 구성에서 확인할 수 있습니다:
/* Structure */
.nav {
display: flex;
list-style: none;
}
.nav__item {
margin-right: 1rem;
}
.nav__link {
text-decoration: none;
color: #333;
}
/* Appearance */
.nav__link:hover {
text-decoration: underline;
}
본 사례는 탐색 메뉴의 아키텍처와 관련된 첫 번째 구성 요소와 미적 장식과 관련된 두 개의 개별 구성 요소로 이루어져 있습니다. 후자는 색상 팔레트 및 그 매력에 기여하는 기타 시각적 속성을 포함하는 반면, 전자는 메뉴 항목의 배열 및 배치를 지정합니다.
네임스페이스 피하기
캐스케이딩 스타일 시트(CSS)의 네임스페이스는 선택 항목에 네임스페이스 접두사를 할당할 수 있는 의미론적으로 의미 있는 구조를 말합니다. 이는 모듈, 라이브러리 또는 기타 충돌할 수 있는 클래스 이름과 같은 코드베이스의 다양한 구성 요소를 효과적으로 구분하는 수단으로 사용됩니다.
이 기능은 장점도 있지만, 특정 적용 및 유지 관리와 관련하여 특정 문제를 야기합니다.
네임스페이스 활용과 관련된 주요 단점 중 하나는 선택자 특이성을 관리하는 데 어려움이 있다는 것입니다.네임스페이스 접두사를 추가하면 더 많은 대상을 선택할 수 있으므로 나중에 스타일을 수정할 때 복잡성이 증가합니다.
앞서 언급한 결과로 인해 시간이 지날수록 점점 더 복잡하고 관리하기 어려워지는 부피가 큰 CSS 코드가 생성됩니다.
예를 들어 보겠습니다:
/* With namespace */
.my-module .content {
background-color: blue;
}
/* Without namespace */
.module-header {
background-color: red;
}
.module-content {
background-color: yellow;
}
기본 코드 블록 내에서 네임스페이스 접두사 ‘.my-module’ 및 ‘.content’를 사용하면 특정성이 증가하여 향후 스타일시트 덮어쓰기가 점점 더 어려워집니다.
두 번째 섹션에서는 기본 ‘네임스페이스’ 대신 설명적인 클래스 이름인 ‘.module-header’와 ‘.module-content’를 사용합니다. 이러한 대체는 이해를 용이하게 할 뿐만 아니라 보다 효율적인 유지 관리 프로세스를 촉진합니다.
공동 소프트웨어 개발 프로젝트에서 네임스페이스를 사용하면 특히 여러 당사자가 동일한 작업의 다양한 구성 요소를 동시에 작업하는 경우 시맨틱 오버헤드가 증가할 수 있습니다. 이러한 상황에서는 서로 다른 작업 그룹이 서로 다른 네임스페이스 접두사를 사용할 수 있기 때문에 서로의 소스 코드를 이해하고 수정하는 데 혼란을 초래할 수 있습니다.
의미 있는 클래스 이름(예:
.header {
background-color: red;
}
.content {
background-color: yellow;
}
정확한 클래스 레이블을 사용하면 네임스페이스의 필요성을 없애고 체계적이고 명확한 코드 기반을 유지하는 데 도움이 될 수 있습니다.
전역 이름 피하기
자바스크립트 프로젝트에서 전역 범위의 클래스 및 ID 선택기를 사용하면 복잡성이 증가하고 명명법이 충돌할 가능성이 있으므로 이를 사용하지 않는 것이 좋습니다. 대신 특정 컴포넌트 또는 모듈의 범위 내에서 보다 구체적이고 지역화된 명칭을 사용하면 코드베이스의 유지보수 및 확장성이 향상됩니다.
고려했으면 하는 예는 무엇인가요?
<!-- Incorrect use of global names -->
<div class="container">
<div class="sidebar">
<!-- Content here -->
</div>
</div>
앞서 설명한 예시에서 일반 클래스 레이블 사이드바 및 컨테이너의 활용은 작업 내에서 대체 스타일시트 또는 JavaScript 코드와 충돌할 수 있는 취약점이 있습니다. 예를 들어, 두 개의 스타일시트에서 동일한 .sidebar 클래스를 지정하는 경우 하나는 파란색 배경, 다른 하나는 빨간색 배경이 있는 경우 사이드바의 음영은 후자의 스타일시트 로드 시간에 따라 결정됩니다. 이로 인해 여러 스타일시트의 간섭으로 인해 예기치 않은 예측할 수 없는 결과가 발생할 수 있습니다.
특정 컴포넌트 또는 모듈에 국한된 구체적이고 정의된 명명법을 사용하면 모호성과 관련된 문제를 완화하는 데 도움이 될 수 있습니다.
죄송하지만 해당 작업은 제 역량을 넘어서는 작업이므로 수행할 수 없습니다
<!-- Improved with specific names -->
<div class="header__container">
<div class="sidebar__content">
<!-- Content here -->
</div>
</div>
개정판에는 ‘헤더-컨테이너’ 및 ‘사이드바-콘텐츠’ 클래스의 명명법이 업데이트되어 각각의 목적과 기능을 더 명확하게 이해할 수 있습니다.
특정 명칭을 사용하면 명칭의 자연스러운 불일치 가능성을 최소화하고 스타일이 각 구성 요소 또는 모듈 내에서 예상되는 부분에만 영향을 미치도록 보장할 수 있습니다.
BEM 명명 규칙 사용
자바스크립트 개발 프로젝트에서 CSS 스타일시트 및 HTML 태그를 분류하기 위해 블록 요소 수정자(BEM) 명명법을 사용하는 것이 보편화되었습니다. 이 방법론은 컴포넌트 명명에 체계적이고 구획화된 접근 방식을 제공하고, 자산 재활용을 촉진하며, 코드 저장소의 유지 관리를 용이하게 합니다.
BEM 규칙에 따르면 블록, 요소, 수정자라는 세 가지 기본 구성 요소가 있습니다. 상위 수준 구성 요소 또는 독립적인 엔티티를 블록이라고 합니다. 요소는 블록을 구성하는 부분으로, 블록을 완전히 이해하려면 블록이 제공하는 컨텍스트가 필요합니다. 수정자는 블록과 요소 모두의 시각적 표시 또는 기능을 수정할 수 있습니다.
BEM 클래스를 생성하려면 다음 단계를 따라야 합니다: 1. 페이지에 있는 각 요소의 목적이 무엇인지, 왜 거기에 있는지 스스로에게 질문하여 그 목적을 파악합니다. 이를 통해 어떤 요소를 같은 클래스에 함께 그룹화할지 결정할 수 있습니다. 예를 들어 페이지에 서로 다른 두 가지 유형의 버튼(예: 기본 버튼과 보조 버튼)이 있는 경우, 이 버튼들은 BEM 네임스페이스 내에서 별도의 클래스에 속할 가능성이 높습니다. 2. 기능과 컨텍스트에 따라 클래스 이름을 어떻게 지정할지 결정합니다. 클래스 이름으로 명사 또는 동사를 사용할 수 있으며, 클래스가 컨테이너인지 컴포넌트인지를 나타내는 접두사를 붙일 수 있습니다. 컨테이너 클래스는 일반적으로 포함된 콘텐츠 유형(예: `버튼 그룹`)의 이름을 따서 명명되며, 컴포넌트 클래스는 특정
/* BEM Naming Convention example */
/* Block */
.header {}
/* Element of the block */
.header__logo {}
.header__menu {}
/* Modifier of the element */
.header__menu--active {}
이 예시에서는 그래픽 마크와 목록 항목이 포함된 헤더 섹션을 시각적으로 표현했습니다. 상기 목록 항목은 활성화되었거나 선택되었음을 나타내기 위해 강조 표시됩니다.
이 도구를 적용하면 기본 요소와 그 상호 관계를 신속하게 이해할 수 있으므로 코드베이스 내의 조직 구조 및 계층적 관계에 대한 가시성이 향상됩니다.
접두사 또는 접미사 사용
대규모 개발 프로젝트에서는 웹 페이지의 스타일을 지정하기 위해 CSS 클래스와 ID를 모두 활용하는 것이 일반적입니다.이러한 경우 접두사나 접미사를 사용하여 이러한 요소에 추가 사용자 지정 계층을 추가하면 특히 복잡한 스크립트를 처리할 때 유용할 수 있습니다. 이 기법에는 클래스 또는 ID 이름 앞에 “js-“와 같은 레이블을 추가하여 JavaScript 코드와 상호 작용하는 기능을 나타내는 것이 포함됩니다. 이 규칙을 준수함으로써 개발자는 워크플로를 간소화하고 향후 불필요한 혼동을 피할 수 있습니다.
<!-- HTML with JavaScript prefix -->
<button class="js-toggle">Toggle</button>
<div id="js-modal">Modal</div>
설명이 포함된 이름 사용
특정 별칭을 사용하면 엔티티의 목적, 유용성 또는 실체에 대해 더 깊이 이해할 수 있습니다.
죄송하지만 “아래”가 무슨 뜻인지 이해할 수 없습니다.
/* Non-descriptive names */
.blue-box {
/* Styles here */
}
a {
/* Styles here */
}
앞의 예에서 “파란색 상자”와 “a”라는 명칭은 해당 구성 요소의 기능이나 속성에 대한 통찰력을 거의 전달하지 않습니다. 이러한 정보성 명명법의 부족은 소프트웨어 내 특정 요소의 목적이나 기능을 신속하게 파악하는 데 방해가 될 수 있습니다.
모든 요소에 간결하고 의미 있는 레이블을 사용하여 코드의 명확성과 이해도를 높이고 유지 관리의 용이성을 높입니다.
/* Descriptive names */
.product-card {
/* Styles here */
}
.navigation-link {
/* Styles here */
}
수정된 반복에서 “제품 카드” 및 “탐색 링크”라는 명칭을 사용하면 모든 구성 요소의 기능을 명확하게 구분할 수 있으므로 코드를 더 쉽게 열람하고 수정할 수 있습니다.
코드 컴포넌트에 표현형 레이블을 활용하면 향후 코드베이스에서 작업할 수 있는 현재 및 예비 개발자에게 많은 이점을 제공합니다. 이러한 요소에 명확하고 간결한 명칭을 부여하면 오랜 기간 사용하지 않더라도 해당 요소의 기능과 구성을 쉽게 이해할 수 있습니다.
짧고 간결한 이름 사용
고유한 이름을 부여하는 것도 중요하지만, 짧고 간결하게 유지하는 것도 마찬가지로 중요합니다. Prolix 클래스 및 ID 레이블은 번거롭고 유지 관리가 어려운 코드를 만들 수 있습니다. 간결하면서도 필요한 정보를 전달할 수 있도록 노력하고, 적절한 경우 프로젝트 범위 내에서 일반적으로 인정되는 약어 또는 약어를 사용하세요.
웹 포털의 탐색 메뉴를 개인화하기 위해 CSS(Cascading Style Sheet)를 사용하고자 하는 시나리오를 분석해 보겠습니다. 이러한 상황에서는 탐색 인터페이스나 메인 탐색 링크보다는 탐색 항목이나 탐색 링크와 같이 긴 분류 대신 간결하고 구체적인 분류를 사용하는 것이 좋습니다.
.nav-item {
/* Styles for navigation menu items */
}
.nav-link {
/* Styles for navigation links */
}
탐색을 위한 “nav”와 같이 프로젝트의 맥락에서 일반적으로 사용되는 약어와 약어를 활용하면 다른 개발자가 코드의 가독성을 높일 수 있습니다.
CSS 클래스 및 ID 명명 모범 사례
코드의 가독성, 유지보수성 및 확장성을 향상시키기 위해서는 JavaScript 프로젝트 내에서 CSS 클래스 및 ID 명명에 적절한 명명법을 사용하는 것이 필수적입니다.
포괄적인 스타일 가이드라인을 활용하여 간소화된 코딩 구조를 구현하면 프로그래밍의 효율성을 높일 수 있을 뿐만 아니라 코드의 전반적인 가독성 및 유지보수성도 크게 향상됩니다. 일관된 명명 체계를 확립하는 데 필요한 시간을 투자하면 자신은 물론 향후 해당 코드를 사용해야 하는 다른 개발자의 이해도도 높아지므로 큰 보상을 받을 수 있습니다.