이번엔 태그 선택자를 사용하지 않아야 하는 이유에 대해서 정리를 해보려고 한다.
위 문서에서는 HTML 태그를 직접적으로 선택하여 스타일을 적용하는 것에 대한 문제점을 다루고 있다. 동시에, 태그를 직접 타겟팅하기 보다는 클래스를 사용하기를 권장한다는 내용이기도 하다.
태그 이름에 스타일을 줄 수 있는데 왜 클래스를 사용해야 하냐고 질문할 수도 있는데 그에 대한 설명을 이제부터 할 예정이다.
HTML 태그는 불가지론적이다.
HTML 태그는 추상적인 개념이며 프로젝트의 맥락이나 사용 목적을 알지 못하며, 주로 의미론적인(semantic) 구조와 웹 접근성, 검색 엔진 최적화(SEO)를 위한 도구로 사용되어야 한다. 또한 외관을 결정하는 역할은 담당하지 않아야 한다.
<div class="element">
<div>
<h2>Title</h2>
<p>Text</p>
<p>Text</p>
<ul>
<li>List item</li>
<li>List item</li>
</ul>
<div>
<h2>Title</h2>
<p>Text</p>
...
</div>
</div>
<div>...</div>
</div>위 HTML 문서를 예로, .element 의 자식인 div 내의 모든 p 태그의 텍스트를 파란색으로 설정하고 싶다면 아래처럼 css를 작성하면 된다.
.element > div p {
color: blue;
}우리는 불필요한 클래스를 추가하지 않고도 이렇게 직관적으로 작성하여 원하는 결과를 얻을 수 있다. 물론 이렇게 작성해도 큰 문제가 없다고 생각할 수 있다.
다음으로, 새로운 스타일을 적용시키기 위해 .element 의 자식인 div 내의 h2와 두개의 p를 래핑해야 하는 경우라면 아래처럼 작성할 수 있다.
.element > div > div p {
color: blue;
}점점 지저분해지고 있다. 그리고 .element의 자식인 div와 또 그 자식인 div가 어떤 부분인지 이해하기가 어려워지고 있다. 작은 규모의 프로젝트에서는 이렇게 작성하여도 문제가 발생하지 않을 수 있지만 DOM 구조의 변경이나 확장성을 고려했을 때 유지보수가 어렵고 재사용성에서도 기능이 떨어진다.
아래는 class를 활용하여 스타일을 적용한 예시이다.
//HTML
<div class="element">
<div>
<p>This is a paragraph.</p>
<p class="blue-text">This is a blue paragraph.</p>
</div>
<div>
<p>Another paragraph.</p>
</div>
</div>
//CSS
.blue-text {
color: blue;
}'blue-text'라는 class를 원하는 위치에 추가하면 해당 텍스트가 파란색으로 적용이 된다.
이렇게 태그를 직접 타겟팅 하는 대신 class를 활용하여 스타일을 적용하면 유연성이 높아지고, 구조와 스타일 간의 연결이 유연해진다.
성능 문제
브라우저가 CSS 선택자를 해석할 때 오른쪽에 있는 선택자를 시작해서 왼쪽으로 이동하여 매칭되는 요소를 찾는데, 이 방식은 스타일 규칙을 적용할 때 중요한 역할을 한다.
예를 들면 아래와 같은 HTML 구조가 있을 때,
<div class="container">
<div class="box">
<p>This is a paragraph.</p>
</div>
</div>- 태그 직접 타겟팅한 경우
.container div p {
color: blue;
}이 경우에 브라우저는 모든 'p'를 찾고, 그 다음 'div'태그를 찾아 '.container'내부에 있는지 확인을 한 후, '.container' 클래스가 적용된 요소를 찾는다.
- class 사용한 경우
.blue-text p {
color: blue;
}이 경우엔 브라우저가 '.blue-text'클래스가 적용된 요소를 찾고, 그 다음 이들 요소 내부에서 'p'태그를 찾는다.
class를 사용했을 경우에 브라우저가 보다 더 직접적으로 해당 요소를 찾아내므로 작업을 더 효율적으로 수행할 수 있다.
예외 및 타협
물론 모든 요소에 클래스를 추가하려면 코드가 복잡해질 수 있다. 이 경우에는 필요한 요소에만 클래스를 추가하고, 전체적으로는 태그를 직접 타겟팅하거나 더 범용적인 스타일을 적용하는 접근방식을 선택할 수도 있다.
웹사이트 내에서 특정 상황에만 스타일을 변경해야 하는 경우도 있을 수 있다. 예를 들어, 사용자의 록읜 여부에 따라 다른 스타일을 적용해야 한다고 가정했을 때, 이런 경우에는 로그인 여부에 따라 클래스를 동적으로 추가하여 스타일을 변경할 수 있다.
요지는 CSS 방법론은 개발 과정을 효율적으로 만들어 주지만, 모든 상황에서 무조건 이 방법을 적용해! 라기 보다는 프로젝트의 특성과 요구사항을 고려하여 적절한 방식을 선택하는 것이 좋다는 것이다.
마치며
어느정도 인식도 하고 있고 대충 알고는 있던 내용이었는데 이렇게 정리하니 또 새롭게 느껴진다. 그리고 알고 있다고 생각했는데도 직접 글로 정리를 해보니 내가 잘 알고 있는 게 맞나? 하는 생각도 들고, 내가 아는 걸 남들이 볼 때도 알아들을 수 있게 설명하는 게 쉬운 일이 아니구나라는 생각도 들었다.
물론 내가 다시 보려고 정리한 글이긴 하지만, 다른 사람들이 볼 때도 과연 내가 정리한 글이 이해가 되기는 하는 걸까? 하는 마음으로 계속 정리를 했다.
처음 배울 때에는 태그를 타겟팅해서 스타일을 적용하는 방식으로 CSS를 작성하기도 했었는데 확실히 이 글을 본 뒤로는 웬만하면 class를 활용해서 스타일을 적용하려고 노력하고 있다. 글에서 설명한 대로 모든 요소에 class를 적용하려다 보니 코드가 지저분해지기도 하지만 확실히 어떤 HTML 구조에 대한 스타일을 적용하는 건지 바로 확인이 되는 게 제일 좋은 점이라고 생각한다.
