CSS Specificity Philosophy

No !important - Proper Cascade Management

🎯 Core Principle

If you need to override it, you shouldn't need !important. If you don't want it, remove the class.

The CSS cascade is a feature, not a bug. Using !important is admitting we don't understand specificity.

❌ The Problem with !important

/* ❌ BAD: Breaks the cascade */
.text-center { text-align: center !important; }

/* Now if I want to override: */
.my-special-heading { text-align: left; }  /* ❌ Won't work! */

/* Force escalation: */
.my-special-heading { text-align: left !important; }  /* 💣 Arms race! */

Result: Specificity wars, debugging nightmares, unmaintainable code.

✅ The ANTSAND Way

Proper Specificity Hierarchy

/* Foundation (lowest specificity) */
body { font-size: 16px; }

/* Layout (low specificity) */
.antsand-container { max-width: 1024px; }

/* Components (medium specificity) */
.antsand-btn { padding: 0.5rem 1rem; }

/* Utilities (same level - order matters) */
.text-center { text-align: center; }
.my-custom { text-align: left; }  /* ✅ Works! Later in cascade wins */

/* Inline styles (highest - user control) */
<div style="text-align: right">  /* ✅ Overrides everything */

Load Order Defines Priority

// In antsand.scss:

// 1. Foundation (variables, reset, mixins)
@import 'foundation/variables';
@import 'foundation/reset';
@import 'foundation/mixins';
@import 'foundation/utilities';  // Base utilities

// 2. Layout (containers, grid)
@import 'layout/grid';
@import 'layout/section';

// 3. Components (buttons, cards, forms)
@import 'components/buttons';
@import 'components/cards';

// 4. Patterns (hero, features, article)
@import 'patterns/hero';
@import 'patterns/article-header';

// 5. Themes (highest - overrides everything)
@import 'themes/modern';

Rule: Later imports can override earlier ones naturally.

📊 Specificity Levels in ANTSAND

Inline styles              (1000)  <div style="">
#id                        (100)   #header
.class                     (10)    .antsand-btn
element                    (1)     p, div, button

Combined:
.antsand-article p         = 11   (.class + element)
.my-article p              = 11   (same!)
.antsand-article.custom p  = 21   (.class + .class + element) ✅ Wins
Strategy: Increase specificity by:
  1. Adding a second class
  2. Combining with parent selector
  3. Using more specific element chain

Never by: Adding !important

🏗️ How to Override Properly

Scenario 1: Utility Override

<!-- Problem: conflicting utility classes -->
<div class="antsand-card text-left">...</div>

<!-- ❌ WRONG: Add !important -->
.text-center { text-align: center !important; }

<!-- ✅ RIGHT: Remove conflicting class -->
<div class="antsand-card text-center">...</div>

Scenario 2: Component Override

/* ❌ WRONG */
.custom-padding { padding: 2rem !important; }

/* ✅ RIGHT: Increase specificity naturally */
.custom-padding.antsand-btn { padding: 2rem; }

/* OR use more specific selector */
.my-section .antsand-btn { padding: 2rem; }

Scenario 3: Pattern Override

/* ❌ WRONG */
.my-tight-article p { font-size: 14px !important; }

/* ✅ RIGHT: More specific selector wins */
.my-tight-article p { font-size: 14px; }

/* .antsand-article p is less specific than .my-tight-article p */

📝 When to Use Each Technique

Situation Solution Example
Utility conflict Remove conflicting class text-left + text-center → remove one
Component tweak Add modifier class .antsand-btn-sm, .antsand-btn-lg
One-off override Inline style style="padding: 2rem"
Section-wide override Parent selector .my-section .antsand-btn { }
Permanent override Create variant .antsand-btn-custom { }
Fighting !important Remove it! Find source, delete !important

🚀 Best Practices

⚠️ Debugging Override Issues:
  1. Inspect element in browser DevTools
  2. Check computed styles
  3. See what's crossed out
  4. Identify specificity/cascade issue
  5. Fix properly (remove class, increase specificity, or change order)
  6. Never add !important

🎯 Summary

✅ The ANTSAND Way:
  • Understand the cascade - it's your friend
  • Use proper specificity - classes, combinators, nesting
  • Load in order - Foundation → Components → Themes
  • Remove conflicts - don't use both .text-left and .text-center
  • Document exceptions - if you must override, explain why
❌ Never Do This:
  • Never use !important - it breaks the system
  • Don't fight specificity - work with it
  • Don't nest deeply - keep specificity low
  • Don't duplicate utility classes on same element
The Philosophy:

"Maximum control, minimum force. The structure of the system should make !important unnecessary."