CSS Specificity: How Selectors Win Conflicts

Each selector type contributes a weight. It is often represented as (a, b, c): a = inline styles and !important, b = IDs, c = classes, attributes and pseudo-classes, d = tags and pseudo-elements. In practice, think of: tag = 1 point, class or attribute = 10 points, ID = 100 points. A selector like `#header .nav a` has more specificity than just `a`.

You can consult the web.dev specificity guide and the MDN reference for detailed tables.

Adding !important to a declaration gives that rule priority over others from the same origin, even with lower specificity. The problem is that it becomes very difficult to override that style without using another !important, and the code becomes fragile. Use it only in specific cases (for example, accessibility utilities that must always win).

Prefer classes (.card, .btn) to apply styles: they are easy to understand and override. Avoid depending on IDs for styling (besides, the ID must be unique on the page). Do not chain many selectors (.header .nav .list .item) if not necessary; a single class name is usually enough.