CSS reset

[SiAdcock]

Source does not make any assumptions about the user's environment and as such has no opinion on the consuming application's choice of CSS reset. This causes a few problems:

• duplication of common patterns across components
• sending redundant CSS to users
• visual inconsistencies across applications

These problems go away if we recommend a CSS reset. But providing a recommendation is challenging because different applications at the Guardian already use different resets.

Application	Reset
dotcom-rendering	Eric Meyer's reset
support-frontend	Eric Meyer's reset
frontend	normalize.css
manage-frontend	None
apps-rendering	None
editorial-emails	None
gateway	None

There's a few recommendations we could make.

Don't recommend a reset

We could continue as we are.

Pros:

• Requires zero effort 😅

Cons:

• Common patterns such as reseting box-sizing to border-box must happen at the component level, leading to duplication across components
• Common patterns are normally centralised in a consuming application's CSS reset anyway. Source components end up setting the same values the reset is already setting
• Hypothetical: if Source components are used in conjunction with an aggressive reset, the appearance of components cannot be guaranteed. The Design System team can't test every component against every reset so there's potential for components to look different across applications

Go with Eric

Since Eric Meyer's reset is the most popular(?) reset in use in Guardian applications that consume Source, we could add the reset to Source's Storybook environment and make a canonical recommendation that if you consume Source, you should also use Eric Meyer's reset.

Pros:

• Greater consistency between applications
• Reduce the likelihood of presentational issues occuring in Source components.

Cons:

• Quite an aggressive reset, might have performance implications
• The applications adopting this reset would need to test it doesn't break anything else!
• If an application chose not to use this reset, the maintainers would need to find a way to add missing styles, such as adding padding: 0 to each component manually 😱

Go custom

We could build a custom reset, either using a subset of Eric Meyer's reset, or something more recent. Andy Bell has formalised a modern CSS reset that is less aggressive than Eric Meyer's. It makes the assumption that the user will be using a fairly modern browser and doesn't try to patch old IE6+ inconsistencies. This could provide a good base.

Pros:

• Less aggressive, more performant than Eric
• Easier onboarding for new apps

Cons:

• Currently untested: we'll need some experimentation time to work on it
• Some onboarding / testing needed for all apps

I'd be very interested to hear your thought on this.

[gtrufitt]

I am +1 on the https://hankchizljaw.com/wrote/a-modern-css-reset/ reset. I think it makes sensible assumptions and is well documented here. I've not used it in anger, but we could certainly switch it out on DCR and see what the visual regression throws up!

A recommended reset I believe is a core requirement in order to be able to achieve the goals of the design system in the long term - it should be that no matter what platform a component is loaded into, with no custom styling it should start at the same base style. The cons of no reset are very well defined above.

[SiAdcock]

I've been thinking about this some more.

Assumptions

The purpose of a reset in Source is to ensure that our components will appear the same across all environments.

If the Source reset is used in conjunction with any other common reset (e.g. Meyer, Normalize), it should not conflict with or override any of those rules.

What is should not do at this point is provide an opinionated reset to be used by all Guardian projects, as a substitute for any other reset.

In the future, the remit of this reset may grow to provide more sensible defaults (such as scroll-behavior: smooth or text-rendering: optimizeSpeed).

Presenting, the world's smallest reset:

/* set box-sizing on elements commonly used in Source */
button, input, select, textarea {
	box-sizing: border-box;
}

/* remove default spacing and decoration from fieldset and legend */
fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}

legend {
	padding: 0;
}

/* remove styling of invalid input elements that gets applied in Firefox */
input:invalid {
	box-shadow: none;
}

Discussion

Are the assumptions above valid?

Is this reset doing enough to be useful?

Are any of these rules doing too much?

Are there any other rules that we could add?

[SiAdcock]

I have kicked this up to the client side infra group as I don't think we can make this decision in isolation

https://github.com/orgs/guardian/teams/client-side-infra/discussions/17

[sndrs]

is this one resolved now do you think?