Decide on an approach to style resets
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	• Pablo-WMDE
	Jul 13 2020, 1:33 PM

Description

If and how do we insulate our components' styles from other styles on the page, not developed with isolation in mind?
Example: How would a global style p { margin: 20px } affect the style of a <p> element in one of our components?

e.g. reset.css/normalize.css

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Resolved		None	T257812 Set up component library infrastructure
		Resolved		• Pablo-WMDE	T257828 Decide on an approach to style resets

Event Timeline

• Pablo-WMDE created this task.Jul 13 2020, 1:33 PM

• Pablo-WMDE updated the task description. (Show Details)Jul 16 2020, 9:55 AM

@Pablo-WMDE Write ADR about our decision

https://github.com/wmde/wikit/pull/96

• Pablo-WMDE moved this task from Doing to Peer review on the Wikidata - DS hike (Milestone 2 - Create Button Component in Storybook) board.Jul 20 2020, 4:32 PM

• Pablo-WMDE mentioned this in T258481: Create a shared CSS "namespace" for our components.Jul 21 2020, 10:12 AM

• Pablo-WMDE mentioned this in T258482: Remove base/reset CSS which has not effect in our components.Jul 21 2020, 10:15 AM

Comparison of tools to use for style resets

normalize.css

✔️ Browser Support:

Chrome
Edge
Firefox ESR+
Internet Explorer 10+
Safari 8+
Opera

✔️ Resets margins on all elements
❌ Does not reset padding on all elements.
❌ No special accessibility rules.

bootstrap-reboot

Build on top of nomralize.css
Used by bootstrap

❌ Browser Support

Chrome >= 60
Firefox >= 60
Edge >= 16
iOS >= 10
Safari >= 10
Android >= 6

Does not support IE and Opera

ress

Build on top of nomralize.css
Used by Vuetify

✔️ Browser Support:

Chrome
Edge
Firefox ESR+
Internet Explorer 10+
Safari 8+
Opera

✔️ Resets the margins and paddings on all elements.
✔️ Has accessibility rules:

Hide content from screens but not screen readers
Specify the progress cursor of updating elements
Specify the pointer cursor of trigger elements
Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements

Jakob_WMDE mentioned this in T258691: Apply style reset to all components.Jul 23 2020, 10:30 AM

We'll be implementing ress in T258691: Apply style reset to all components

• Pablo-WMDE moved this task from Peer review to Done on the Wikidata - DS hike (Milestone 2 - Create Button Component in Storybook) board.Jul 23 2020, 2:51 PM

Decide on an approach to style resetsClosed, ResolvedPublicActions