CSS 상세도 유지에 있어서, 몇 가지 규칙을 적어보려고 한다.

1. CSS로 지나치게 구조를 유추할 수 있게 하지않는다.

• 이 말이 무엇이냐면 구조적으로 의미있는 마크업과 클래스 명을 지향하되, 그게 지나쳐

CSS의 상세도를 높이면 안된다는 것이다.

예를 들면 아래와 같은 코드가 있다.

.container {}
.container .lnb {}
.container .lnb .lnb-list {}
.container .lnb .lnb-list .lnb-item {}

해당 코드를 보면 직관적인 클래스명으로 구조가 부모 자식간의 구조가 잘보이긴 하지만

.lnb-item 하나를 꾸면 주기위해 너무 많은 클래스가 사용되어 상세도를 높이고 있다.

예시의 .lnb, .lnb-list, .lnb-item 각각은 서로 독립적으로 구별이 되어도 네이밍 적으로 이어지기 때문에 각각을 독립하여 작성하여도 무방하다.

.container {}
.lnb {}
.lnb-list {}
.lnb-item {}

요약 및 실무 적용점 ✏️

1. 유지보수 관점에서 선택자 깊이는 최대 2단계 정도로 유지하는 게 좋다.

→ 지나치게 구조에 의존한 CSS는 유지보수가 어렵고, 우선순위 충돌이 생기기 쉽다.