Mixins vs @extend: Which Minimizes Generated CSS Size in Stylus?

Trade‑off Overview

Stylus offers two primary mechanisms for reusing style blocks: mixins and the @extend directive. Mixins allow parameterization but duplicate properties each invocation, while @extend collapses selectors into a single rule set, reducing output size at the cost of limited argument support and potential specificity complications.

Key Unresolved Decision

When building a UI kit that must stay under a strict CSS payload threshold, developers face an unresolved decision: should they favor mixins for their flexibility or @extend for its leaner output? The choice is further complicated by cross‑file @extend resolution rules and the lack of tree‑shaking for unused mixins.

Open Questions

• Under what import‑ordering or file‑scoping conditions does @extend produce a smaller final CSS file than an equivalent mixin implementation?
• How can developers mitigate selector specificity inflation that arises when @extend chains across multiple selectors in large component sets?
• What measurable impact does the presence of unused mixin definitions have on source size versus compiled size, and how should this influence the decision to use mixins in a production build?