Extend Styling without a Class

I recently had a request to extend the styling of a unique button on a site, allowing it to be used outside of what the Design System supported. Setting aside the question of whether the CSS should have been more flexible, I wanted to find a solution that met two criteria:

  1. Not requiring a change to how the button was handled in the CMS.
  2. Not requiring existing styling to be re-scoped.

So the goal was to find a solution that simply required writing the new styling, and then committing the updated CSS file.

The good news was that this button was currently being used in a consistent manner within a component. Meaning, the key question was how best to target it when it was outside that component. Your initial instinct might be to target the new styling based on it's new context, however that would again keep its future use limited.

To build-in more flexibility, the solution I landed on was to use the negation pseudo-class selector :not(). While this results in a CSS specificity of 0.3.0, it allowed the new button styling to be used globally in multiple, known and unknown contexts throughout the site.

.button:not(.unique-component .button) {
	/* new styling */
}

A solution like this is just a small reminder of how flexible and powerful CSS is, and the creativity it supports.