HTML & CSS Interview Question #62
What does !important do in CSS?
CSS Fundamentals, Selectors, Cascade, Specificity, Box Model, Units & Typography Mid-Level Intermediate
Quick Interview Answer
The !important flag changes a declaration's importance within the cascade and can cause it to override ordinary declarations in the same relevant origin and layer context. It is not simply an unlimited 'highest priority' switch because the full cascade still has rules for origins, layers, and important declarations.
Detailed Explanation
The !important flag changes a declaration's importance within the cascade and can cause it to override ordinary declarations in the same relevant origin and layer context. It is not simply an unlimited 'highest priority' switch because the full cascade still has rules for origins, layers, and important declarations.
Routine use of !important usually indicates that selector architecture or cascade management should be improved. It is appropriate in limited cases, but it should not be the default solution for specificity problems.
Code Example
.button {
color: white !important;
}
/* Prefer a predictable cascade and component
architecture instead of widespread !important. */