2nd/10_Wiki/Topic_CSS/CSS_Variables_Overriding.md

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

id	title	category	status	verification_status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	created_at	updated_at	review_reason	merge_history	tags	raw_sources	applied_in	github_commit
css-overriding-variables	CSS Overriding Variables	Frontend	draft	conceptual		override CSS variable local variable override redeclare variable scoped custom property local custom property variable scope		B	0.88	2026-06-23	2026-06-23			css web frontend w3schools variables custom-properties scope	https://www.w3schools.com/css/css3_variables_overriding.asp

CSS Overriding Variables

🎯 한 줄 통찰 (One-line insight)

A global CSS variable can be overridden just for one section by re-declaring it inside that selector — the local value wins there — and if a value is needed in only one place, declaring a brand-new local variable is the cleaner alternative. [S1]

🧠 핵심 개념 (Core concepts)

• Scope recap — global variables can be accessed through the entire document, while local variables can be used only inside the selector where they are declared. [S1]
• Section-specific change — sometimes you want a variable to change only in a specific section of the page. [S1]
• Re-declare to override — re-declaring --primary-bg-color inside a selector makes var(--primary-bg-color) within that selector use the local value, overriding the global one for that selector. [S1]
• Or add a new local variable — if a variable is going to be used in only one single place, you can instead declare a new local variable. [S1]

🧩 추출된 패턴 (Extracted patterns)

• Local override pattern — declare --primary-bg-color: red; inside .container .note so only that block uses the red value while the rest of the page keeps the global value. [S1]
• New-local pattern — for a one-off value, declare a fresh --note-border-color: red; rather than overriding a shared global variable, keeping intent explicit. [S1]

📖 세부 내용 (Details)

Override Global Variable With Local Variable [S1] From the previous page we learned that global variables can be accessed through the entire document, while local variables can be used only inside the selector where they are declared. Sometimes we want the variables to change only in a specific section of the page.

Assume we want a different border color for <p class="note"> elements. Then, we can re-declare the --primary-bg-color variable inside the .note selector. When we use var(--primary-bg-color) inside this selector, it will use the local --primary-bg-color variable value declared here. The local --primary-bg-color variable will override the global --primary-bg-color variable for the .note selector:

:root {
  --primary-bg-color: #1e90ff;
  --primary-color: #ffffff;
}

body {
  background-color: var(--primary-bg-color);
}

.container {
  color: var(--primary-bg-color);
  background-color: var(--primary-color);
  padding: 15px;
}

.container h2 {
  border-bottom: 2px solid var(--primary-bg-color);
}

.container .note {
  --primary-bg-color: red; /* local variable will override global */
  border: 1px solid var(--primary-bg-color);
  padding: 10px;
}

Add a New Local Variable [S1] If a variable is going to be used only one single place, we could also have declared a new local variable, like this:

:root {
  --primary-bg-color: #1e90ff;
  --primary-color: #ffffff;
}

body {
  background-color: var(--primary-bg-color);
}

.container {
  color: var(--primary-bg-color);
  background-color: var(--primary-color);
  padding: 15px;
}

.container h2 {
  border-bottom: 2px solid var(--primary-bg-color);
}

.container .note {
  --note-border-color: red; /* new local variable */
  border: 1px solid var(--note-border-color);
  padding: 10px;
}

CSS var() Function [S1]

Function	Description
var()	Inserts the value of a CSS variable

🛠️ 적용 사례 (Applied in summary)

The page's examples are the applied cases: overriding the global --primary-bg-color locally inside .container .note for a red note border, and the alternative of declaring a new --note-border-color local variable for the same effect. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Override a global variable locally (language: CSS):

.container .note {
  --primary-bg-color: red; /* local variable will override global */
  border: 1px solid var(--primary-bg-color);
  padding: 10px;
}

Declare a new local variable instead (language: CSS):

.container .note {
  --note-border-color: red; /* new local variable */
  border: 1px solid var(--note-border-color);
  padding: 10px;
}

⚖️ 비교 및 선택 기준 (Comparison & decision criteria)

• Re-declare (override) the global variable — use when you want a section to reuse the same conceptual token (e.g. the primary color) but with a different value scoped to that section. [S1]
• Declare a new local variable — use when the value is going to be used in only one single place, keeping the global token untouched and the intent explicit. [S1]

⚖️ 모순 및 업데이트 (Contradictions & updates)

No contradictions found in the source.

✅ 검증 상태 및 신뢰도

• 상태: draft
• 검증 단계: conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
• 출처 신뢰도: B (W3Schools — widely used educational reference, not a primary standards body)
• 신뢰 점수: 0.88
• 중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

• 상위/루트: CSS Tutorial
• 관련 개념: CSS Variables var(), CSS Selectors, CSS Specificity, CSS Colors
• 참조 맥락: Referenced when scoping or locally overriding custom properties for a specific page section.

📚 출처 (Sources)

• [S1] W3Schools — CSS Overriding Variables — https://www.w3schools.com/css/css3_variables_overriding.asp

📝 변경 이력 (Change history)

• 2026-06-23: Initial draft synthesized from the W3Schools "CSS Overriding Variables" page (Astra wiki-curation, P-Reinforce v3.1 format).