No !important. Proper cascade management.
The CSS cascade is a feature. Antsand should make override behavior predictable instead of forcing specificity wars.
If you do not want a behavior, remove the class. If you need a variant, add a clearer class or parent context.
It starts an arms race: one forced override creates the next forced override.
.text-center { text-align: center !important; }
.my-special-heading { text-align: left; } /* will not win */
.my-special-heading { text-align: left !important; } /* escalation */Use foundation, layout, components, utilities, patterns, and themes in a deliberate load order.
@import "foundation/variables";
@import "layout/grid";
@import "components/buttons";
@import "patterns/article-header";
@import "themes/modern";Add a second class, combine with a parent selector, or adjust load order. Do not add force where design intent should be clear.
Use a table when the content is a compact decision matrix.
| Situation | Solution | Example |
|---|---|---|
| Utility conflict | Remove the conflicting class | text-left + text-center -> remove one |
| Component tweak | Add a modifier class | .antsand-btn-sm or .antsand-btn-lg |
| One-off override | Use inline style intentionally | style="padding: 2rem" |
| Section-wide override | Use a parent selector | .my-section .antsand-btn |
| Permanent override | Create a variant | .antsand-btn-custom |
| Fighting !important | Remove it and fix order/specificity | Find source, delete !important |
Maximum control, minimum force. The structure of the system should make !important unnecessary.