Frequently Asked Questions
What about utility classes or frameworks like Tailwind?
Utility classes are often considered easy to write, but difficult to read and maintain. It also shifts the work required to implement brand-specific styles from CSS to the template, often resulting in long and unclear classes throughout the components.
Data attribute usage
Components often use data attributes to target styles instead of class names. This allows us to more easily target components/elements outside of our immediate localized scope and helps reduce spaghetti CSS code where it's unclear how and why styles are being applied.
Why do we use SASS?
- It compiles well for both style guide and WordPress contexts.
- Battle tested and widely used. Still considered a best-practice option.
- Widely taught in engineering classes and bootcamps, resulting in quicker onboarding and usage.
Why do we use css modules?
- Most of the reasons above for SASS.
- Clear separation of concerns.
- Allows us fake "tree shaking", allowing us to only enqueue assets used.
Why do we use mixins?
- Keeps styles organized and reusable.
Why do we avoid media queries in favor of component queries and intrinsically responsive components?
[Why I refuse to use media breapoints is...] because @media breakpoints are anathema to design systems. My component, defined outside of context, could be instantiated within a container parent element of any width. Context is variable, but all @media queries can do is adjust things according to the constant that is the viewport. The Flexbox Holy Albatross (opens in a new tab)
Why don’t we use tokens like originally planned?
The original Nova architecture called for multi-tiered design tokens (reference the many faces of themeable design systems (opens in a new tab)), but we found that our brands require enough unique/bespoke styling that simply swapping out typography or colors doesn't offer enough flexibility.
For example, we have over 60 Text component themes, each has 3+ CSS properties. That alone results in hundreds of CSS variable tokens.
Instead, we offer brand+component-specific CSS modules, allowing more flexibility in how and where we customize brand CSS.