Symbolic CSS Preprocessor Mixins

One of the major advantages to using CSS preprocessors is the mixin, a CSS function to dictate how styles are assigned.  They allow conditional logic and arguments, just like any other language, and are a massive help in unifying styles throughout a site.  They even make RTL a breeze.  I use mixins for another reason:  code importance and organization!

The scenario is as follows:  with the redesign of the web app I work on, I have to support two designs at once.  That means I always have the legacy CSS being loaded, and if the user has permissions to the redesign, I load the additional redesign CSS files.  Not ideal but time is an issue.  This provides a CSS organization issue:  some styles are new, some styles override legacy styles, and some are simply there to offset legacy styles.  If you use mixins correctly, you can easily organize these styles for ease in future maintainability.

The Stylus CSS

Instead of simply overriding styles or offsetting old ones, I use a mixin to do so which allows me to easily identify them in the future:

/* Use this in the case of having to override styles from old template */
compat-important(prop, value) {
  {prop}: value !important;
}

/* Used for style which are only present to override other styles -- these will be deleted once legacy design is gone */
compat-only(prop, value) {
  compat-important(prop, value);
}

The compat-important mixin tells myself and other developers that the style should be made !important for the sake of overriding the legacy stylesheet setting.  The compat-only mixin communicates that the style is only set to offset legacy styles. You'll note that one mixin calls the other -- they do the same job but the mixin name is symbolic!

Another advantage to using mixins for code organization is that you can modify the mixin to experiment with results.  For example, once I remove all of the legacy styles from my app, I can make `compat-only` return nothing (i.e. not set any style) and confirm that all of the styles are no longer needed.  So not only do these methods allow me to organize, they also allow me to experiment!

Do you use any symbolic mixins?  If so, please share!