Hostile CSS: Fortifying System Styles Against Inherited Properties
Cascading Style Sheets. They cascade. That’s what they do. It’s both a blessing and a curse for builders of design systems.
For example, if a product’s stylesheet contains:
All h2’s in that product will inherit `font-style: italic`. Even h2’s within design system components.
It’s the design system’s responsibility to compensate for problems like these. Here’s how.
Add hostile CSS to your build environment
Hostile CSS is a global stylesheet that sets terrible defaults for every inherited CSS property. Not all CSS properties are inheritable, but many are, such as `font-style`, `font-weight`, and `line-height`.
This list of inherited CSS properties from Stack Overflow contains a complete reference.
Based on that list, EightShapes created this open-source hostile stylesheet. We use it on all our design system projects.
How to use
Add this stylesheet to your development environment. This will likely break some of your components. It will also reveal what you need to do to fix them. At that point, update your component’s CSS to compensate for the hostile styles.
Do not include this stylesheet with your system’s published CSS. It is for the system build environment only.
Before & after examples
Here’s how components can break with Hostile CSS applied.
Even a simple link should define `font-style`, `line-height`, `text-indent`, `text-shadow`, and `text-transform`. Not doing so allows an unexpected style cascade to break the link style.
Hostile CSS breaks both typography and layout in this list group component.
This button’s styles rely on browser defaults. Adding Hostile CSS causes the button to break. This reveals an unintended dependency on browser styles.
Try it yourself
I doubt adopters of your design system have such egregious default styles. But the goal of Hostile CSS is to prepare for the worst.
Build your components in a hostile environment. Adopters of your design system will be glad you did.