CSS Specificity

Specificity determines which CSS rule takes precedence when multiple rules apply to the same element. Think of it as a "weight" assigned to each rule. The rule with the higher weight wins.

Specificity Hierarchy (from lowest to highest):

1. **Universal selector (\*)**: Targets all elements.
2. **Element (Type) selectors**: Targets HTML elements directly (e.g., `p`, `h1`, `div`).
3. **Class selectors**: Targets elements with a specific class (e.g., `.important-text`).
4. **Attribute selectors**: Targets elements based on their attribute values (e.g., `[type="text"]`).
5. **Pseudo-classes**: Targets elements based on their state or position (e.g., `:hover`, `:first-child`).
6. **ID selectors**: Targets elements with a specific ID (e.g., `#example-text`).
7. **Inline styles**: Styles applied directly within the HTML element's `style` attribute (e.g., `

   `).

8. **!important**: Overrides all other declarations (use with caution!).

When rules have the same specificity, the rule that appears last in the CSS stylesheet takes precedence.

CSS Inheritance

Inheritance is the mechanism by which certain CSS properties are passed down from parent elements to their children. Not all properties are inherited.

Commonly Inherited Properties:

• `color`
• `font-family`
• `font-size`
• `font-weight`
• `text-align`
• `line-height`

You can prevent inheritance using the `inherit`, `initial`, or `unset` keywords.

Resolving Conflicting Styles

When multiple CSS rules conflict and apply to the same element, the browser uses the following process to determine which rule to apply:

1. Find all matching rules: The browser first identifies all CSS rules that apply to the element.
2. Sort by origin and importance: Rules are sorted by their origin (author, user, browser) and importance (!important). !important rules override normal rules.
3. Sort by specificity: If rules have the same origin and importance, they are sorted by specificity. The rule with higher specificity wins.
4. Sort by order of appearance: If rules have the same origin, importance, and specificity, the rule that appears later in the stylesheet wins.

Understanding this process allows you to predictably manage and resolve styling conflicts in your CSS code.

Best Practices

• Avoid using `!important` unnecessarily. Rely on specificity and order in your stylesheets.
• Keep your CSS selectors as simple as possible to improve performance and maintainability.
• Use a CSS naming convention (e.g., BEM) to help organize your styles and avoid conflicts.
• Prioritize maintainability over cleverness. Write CSS that is easy to understand and modify.