CSS Specificity (CSS 명시성)

 

CSS Specificity (명시성)

클래스네임 선언 순서가 명시성을 보장하지 않는 경우가 있습니다. 이는 CSS의 기본적인 규칙과 React에서의 클래스네임 병합 방식 때문입니다. CSS의 우선순위는 주로 명시성(specificity), 선언 순서(order of appearance), 그리고 !important 규칙에 의해 결정됩니다. 그러나, 클래스네임 선언 순서만으로는 명시성을 보장할 수 없는 상황들이 있습니다. 그 이유는 다음과 같습니다:

1. 명시성(Specificity)의 기본 규칙

CSS 명시성은 선택자의 유형에 따라 점수가 매겨집니다:

• 인라인 스타일: 1000점
• ID 선택자: 100점
• 클래스, 속성, 의사 클래스 선택자: 10점
• 태그, 의사 요소 선택자: 1점

명시성이 높은 선택자가 우선순위를 갖습니다. 즉, 더 높은 명시성을 가진 스타일이 더 낮은 명시성을 가진 스타일을 덮어씁니다.

2. CSS 선언 순서(Order of Appearance)

동일한 명시성을 가진 선택자라면, CSS 파일에서 나중에 선언된 스타일이 우선됩니다. 즉, 파일 내에서 뒤쪽에 선언된 스타일이 앞쪽의 스타일을 덮어씁니다.

3. React의 클래스네임 병합 방식

React에서 여러 클래스네임을 병합할 때, 순서에 따라 적용되는 스타일이 달라질 수 있습니다. 그러나 이 순서가 항상 우선순위를 보장하지는 않습니다. 예를 들어:

CSS 파일 (styles.module.css)

css코드 복사
.button {
  background-color: blue;
  color: white;
}

.primary {
  background-color: red;
}

.secondary {
  background-color: green;
}

React 컴포넌트 (Button.js)

import React from 'react';
import styles from './styles.module.css';

const Button = ({ isPrimary, isSecondary }) => {
  let className = styles.button;
  if (isPrimary) {
    className += ` ${styles.primary}`;
  }
  if (isSecondary) {
    className += ` ${styles.secondary}`;
  }

  return <button className={className}>Click me</button>;
};

export default Button;

위 예제에서 isPrimary와 isSecondary가 모두 true인 경우, className은 styles.button styles.primary styles.secondary가 됩니다. 여기서 어떤 스타일이 우선되는지는 CSS 파일 내의 선언 순서에 달려 있습니다. .primary와 .secondary 모두 .button보다 뒤에 선언되었으므로 .primary나 .secondary의 스타일이 우선 적용됩니다.

4. !important 사용의 영향

!important가 사용되면 명시성이나 선언 순서와 관계없이 해당 스타일이 항상 우선됩니다. 예를 들어:

css코드 복사
.primary {
  background-color: red !important;
}

.secondary {
  background-color: green;
}

이 경우, .primary의 background-color: red 스타일이 항상 우선 적용됩니다.

결론

클래스네임 선언 순서가 명시성을 보장하지 않는 이유는 다음과 같습니다:

• 명시성 규칙: 클래스네임 선언 순서보다 명시성 규칙이 더 큰 영향을 미칩니다. 더 높은 명시성을 가진 스타일이 우선합니다.
• 선언 순서: 동일한 명시성을 가진 스타일이라면, CSS 파일 내에서 나중에 선언된 스타일이 우선합니다.
• React의 클래스 병합: React에서 여러 클래스를 병합할 때, CSS 모듈에서 정의된 순서가 우선순위에 영향을 미칩니다.
• !important 사용: !important는 명시성이나 선언 순서와 관계없이 항상 최우선으로 적용됩니다.

따라서, 클래스네임 선언 순서만으로는 명시성을 완전히 보장할 수 없으며, 명시성 규칙, 선언 순서, !important와 같은 요소들을 종합적으로 고려해야 합니다.

 

Avoiding CSS order of appearance problems with CSS Modules