What’s the correct way to extend/override the base CSS without causing specificity conflicts?

[kiwigitops]

I’m trying to customize the styling in this template, but I want to avoid modifying the core stylesheet directly.

Right now I’m running into issues where overrides either don’t apply or require overly specific selectors, which starts to feel messy.

Is there a recommended pattern for:

Structuring an override stylesheet (e.g., load order, naming conventions)
Avoiding specificity wars with existing selectors
Keeping things maintainable if the base template changes later

Also, are there any pitfalls with how the current CSS is structured that I should be aware of before extending it?

[AdamHanafi]

✅ Best Way to Override/Extend Base CSS Without Specificity Issues
Here's the recommended approach to customize styling while keeping the original style.css untouched:

1. Create a Separate Override File

Add a new file: assets/css/custom.css
Put all your custom styles in this file only

2. Load Order (Very Important)
   Update the in every HTML page to load files in this order:
   HTML

3. How to Override Effectively Best: Use CSS Variables (if the template supports them) CSS/* custom.css */ :root { --primary-color: #2563eb; --heading-font: 'Inter', sans-serif; } Good: Target existing classes CSS.hero-section { padding: 10rem 0; background: linear-gradient(135deg, #1e3a8a, #3b82f6); }

.navbar .nav-link {
font-weight: 600;
}
Low-specificity trick:
CSS:where(.section-title) {
color: #1e40af;
}
4. Tips for Maintainability

Group your rules with clear comments
Avoid !important unless absolutely necessary
Use root-relative paths for the custom stylesheet

Common Pitfalls in This Template

Heavy use of IDs and long selectors (high specificity)
Some rules may already use !important
Inline styles on certain elements

This method makes future template updates much easier — you only replace the base file, your custom.css stays safe.