무슨 수업?

Dec 30 2022

HTML 태그에 대해 더 나은 클래스 이름을 선택하는 방법

최근에 어떤 클래스 이름을 사용해야 하는지에 대한 질문을 받았습니다. 마지막으로 그것에 대해 생각해야 했던 지 오랜 시간이 흘렀지만 그것은 나에게 좋은 재충전과 내 생각을 요약할 수 있는 기회였습니다.

Unsplash의 Helena Hertz 사진

최근에 어떤 클래스 이름을 사용해야 하는지에 대한 질문을 받았습니다. 마지막으로 그것에 대해 생각해야 했던 지 오랜 시간이 흘렀지만 그것은 나에게 좋은 재충전과 내 생각을 요약할 수 있는 기회였습니다. 다른 사람이 관심을 가질 경우를 대비하여 주제에 대한 몇 가지 메모를 적어두기로 결정했습니다. 나는 그것이 대부분의 사람들이 생각하는 것처럼 명백하지 않을 수도 있다고 생각합니다.

수업이 나오는 곳

여기서 주목해야 할 첫 번째 사항은 내가 "당신의 CSS 선언 블록"이 아니라 "당신의 HTML 태그를 위한" 클래스 이름을 선택했다고 말했다는 것입니다. CSS를 수행하는 방법에 따라 클래스가 "CSS에서" 또는 "HTML에서" 오는 것으로 볼 수 있습니다.

선언 블록의 클래스 이름을 선택하는 첫 번째 접근 방식은 CSS 선언 블록을 레이블이 지정된 라이브러리 함수로 취급합니다. 여기서 이 "함수"는 특성을 통해 "HTML로 가져옵니다" class.

HTML 요소에 대한 클래스 이름을 선택하는 두 번째 접근 방식은 클래스 를 콘텐츠에서 정확히 동일한 역할을 공유하는 요소 집합에 지정된 레이블로 처리한 다음 CSS에서 선택하고 선언 블록에 할당합니다.

나는 후자가 올바른 멘탈 모델이라고 생각합니다. 최소한 관련 문서 에서 CSS를 설명하는 방법에 더 가깝습니다 .

[...] 문서의 프리젠테이션을 설명합니다. [...]

이것은 대부분의 개발자에게 큰 변화입니다. 그래도 가치가 있다고 생각하기 때문에...

"구조적" 클래스 이름 사용

클래스 이름은 콘텐츠의 모양이 아니라 문서의 컨텍스트에서 콘텐츠를 설명하거나 레이블을 지정할 수 있습니다. 예를 들어:

<ul class="skills">
  ...
</ul>

<ul class="vertical-flex text-size-regular bg-grey">
  ...
</ul>

구조적 클래스 이름을 사용하면 세 가지 이점이 있습니다.

첫째, 구조적 클래스 이름은 추상적인 시각적 개념이 아니라 단순히 콘텐츠에 레이블을 지정하기 때문에 생각하기가 더 쉽습니다. (또한 개발자가 UX 개념에 익숙하지 않아 와 같은 이름으로 끝나는 경우에도 도움이 됩니다 box.)

둘째, 더 중요한 것은 코드 유지 관리가 더 쉬워진다는 것입니다. 예를 들어 <span class="text-grey text-small">단종된 제품의 마지막 알려진 가격을 설명해야 한다고 가정해 보겠습니다. 나중에 가격의 색상을 변경하기로 결정한 경우 새 클래스를 발명하거나 클래스 이름을 변경하고 HTML 및 CSS의 모든 위치에서 변경해야 합니다. <span class="last-price">CSS에서 모양만 사용하고 업데이트하면 훨씬 간단합니다 . 이것은 또한 관심사의 분리에 대한 요점을 이끌어냅니다. 프레젠테이션의 변경 사항은 분리가 올바른 경우 이상적으로는 CSS에 국한되어야 하기 때문입니다.

(CSS-in-JS 유형의 설정에 대해서는 언급조차 하지 않겠습니다. 이러한 시스템을 사용하는 사람들은 사용하려는 명명 규칙보다 해결해야 할 더 큰 문제가 있습니다.)

세 번째로, 모든 사용자 에이전트가 문서의 시각적 모양(봇, 점자 판독기, 텍스트 전용 브라우저) 을 활용하는 것은 아니기 때문에 다음을 사용하여 무언가를 표현할 수 있는 경우 이러한 에이전트가 거쳐야 하는 총 HTML 양이 줄어듭니다. 수업이 적다. 구조적 클래스는 모양의 다양한 측면을 적용하는 것이 CSS 와 HTML 이 아닌 CSS에서 완전히 수행되기 때문에 일반적으로 HTML 코드가 덜 필요합니다 .

구조적 클래스로 코드 재사용

구조적 클래스를 사용할 때 개발자가 직면하는 경향이 있는 한 가지 문제는 코드 재사용입니다. 앞서 언급한 .last-price예에서 선택한 스타일이 다음과 같다고 가정해 보겠습니다.

.last-price {
  font-size: 87.5%;
  color: var(--muted);
}

.last-price,
.date-discontinued {
  font-size: 87.5%;
  color: var(--muted);
}

{
  font-size: 87.5%;
  color: var(--muted);
}

나중에 .date-discontinued. 그런 다음 단순히 더 이상 공유되지 않는 선언을 블록에서 제외할 수 있습니다.

.last-price,
.date-discontinued {
  color: var(--muted);
}

.last-price {
  font-size: 112.5%;
}

.date-discontinued {
  font-size: 87.5%;
}

(나는 단일 속성 선언 블록을 옹호하는 것이 아니라는 점에 유의하십시오. 이는 단순화된 예제 코드의 결과일 뿐입니다. 이론적으로 단일 속성 블록을 수행할 수 있습니다 . ) — 하지만 저에게는 코드가 너무 복잡해집니다. 약간의 반복은 온전한 상태를 유지하는 데 큰 도움이 됩니다.)

이 스타일의 CSS 재사용은 대부분 오버라이드를 수행할 필요성을 없애고 BEM과 같은 복잡한 이름 지정 시스템을 필요로 하지 않습니다. BEM 및 유사한 메커니즘의 주요 목적은 선택기의 특정성을 줄여 오버라이드를 더 쉽게 만드는 것입니다. 로 시작하는 재정의를 피할 수 있다면 특이성에 대해 걱정할 필요가 없습니다! 아주 멋진.

이 재사용 모델이 무너지는 한 가지 시나리오가 있는데 그것은 UI 툴킷(UI 라이브러리)입니다. 예를 들어 Bootstrap과 같은 CSS UI 라이브러리를 빌드하는 경우 미리 콘텐츠 구조를 인식하지 못하기 때문에 이러한 종류의 재사용을 수행할 수 없습니다. 안타깝게도 이 경우에는 좋은 조언이 없습니다. 어쩌면 당신은 나를 위해 몇 가지가 있습니까? (CSS는 정말 기본 믹스인이 필요합니다.)

클래스를 사용하는 경우

클래스는 요소를 선택하는 한 가지 방법일 뿐이며 더 많은 방법이 있습니다 . 반드시 클래스를 사용할 필요는 없습니다. 다른 선택자에 비해 클래스를 사용할 때 내재된 이점은 없습니다. 예전에는 복잡한 선택자를 사용하면 눈에 띄는 성능 영향이 발생했지만 이제는 그렇지 않습니다. 오늘날 대부분의 선택기는 상당히 잘 최적화되어 있습니다.

내 마지막 프로젝트에서는 실제로 소수의 클래스만 필요했고 다른 모든 것은 id콤비네이터 및 의사 선택기를 사용하여 선택되었습니다. 충분히 고려하면 대부분의 클래스를 없앨 수 있다고 생각합니다.