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:

h2 {
  font-style: italic;
}

All h2’s in that product will inherit `font-style: italic`. Even h2’s within design system components.

CSS style “bleed” from app to design system component.

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.

Link

A default browser styled link (left). With hostile CSS applied (right)

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.

List Group

Browser defaults (left). With Hostile CSS (right)

Hostile CSS breaks both typography and layout in this list group component.

Button

No Hostile CSS (left). With Hostile CSS (right).

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.

Drop this stylesheet into your build environment and see what breaks. Share your before & after hostile CSS images with me on twitter @kevinmpowell.

Build your components in a hostile environment. Adopters of your design system will be glad you did.