Balancing Ideal Sass and Ideal CSS

Sass makes CSS fun again, right? Well yeah, but that also makes it easy to forget that we’re still writing CSS. We can get caught up in all the new tools and tricks that Sass lets us do so easily that we lose sight of some CSS that might not be as awesome as we think it is. Last night at the Philadelphia Sass Meetup I set out to talk about the finer points of using mixins and extendable selectors, and ended up exploring how we can find the balance between a great Sass codebase and close-to-ideal compiled CSS.

Balancing Ideal Sass and Ideal CSS - Buttons

  1. Let’s just style a button. - Sassmeister Example
  2. Create a mixin. DRY Sass, but bloated CSS - Sassmeister Example
  3. Convert to an extended class. DRY Sass and small CSS - Sassmeister Example
  4. Convert that extended class to a silent extendable. Even better! - Sassmeister Example
  5. Maybe we need an alternate version of the button? Let’s try some manual overrides. Good CSS, but we could have DRYer Sass - Sassmeister Example
  6. We’ll try creating a new silent extendable that calls our mixin with a new argument. Better Sass but now our CSS is starting to bloat. - Sassmeister Example
  7. So now we’ll split our mixin into a ‘base’ mixin for the styles that are common to all buttons, and a ‘colors’ mixin to handle our alternate colors. We’ll create a %button extendable by calling both mixins, and a %button-cta extendable that extends %button and calls the button-colors mixin for its overrides. Clean Sass and clean CSS! Sassmeister Example
  8. What about RWD? Well it gets trickier. Extendables need to be scoped to their media query, so we need to redefine our extendables within a media query. The CSS is pretty clean but now the Sass is becoming a little hard to work with. - Sassmeister Example
  9. Instead of worrying about scoping those media queries we’ll call the mixins within the selector nest. This creates more css than we need, but the Sass is much easier to work with. - Sassmeister Example

Don’t extend native elements

  1. Extending a native element once seems ok. - Sassmeister Example
  2. But if we keep going we see a lot of (probably) unintended comma-separated selectors start to pile up. In a real project this gets pretty obsene. - Sassmeister Example
  3. So instead let’s define some silent extendables and then use them to define our native element styles as well as any extensions to them. Managable Sass and clean CSS! - Sassmeister Example