[CSS] nesting

nesting이란?

CSS에서 nesting 문법이란, 선택자 내부에 다른 선택자를 작성하여 특정 요소의 하위 요소를 스타일링하는 것을 의미.

CSS 코드를 더 깔끔하고 가독성이 좋게 만들기 위한 기술 중 하나이다.

 

비교

nesting을 적용하지 않은 CSS.

 

nesting을 적용한 CSS.

 

결론

적은 양의 CSS 코드를 작성할 때에는 큰 차이가 없으나 CSS 코드의 양이 많아진다면 nesting을 사용하는 것이 가독성의 차이도 나고 관리하기도 훨씬 편해진다.