Discussion: custom and default styling

[caroqliu]

Objective

Establish a default styling heuristic that is compatible with the three modes of usage in Bento

Summary

The CSS in Bento AMP document discusses the following main points:

• The state of AMP's current and future default and custom styling
  • Default styles in AMP: build step transforming CSS to JS
  • Custom styles in AMP: inline or with restricted CSS in <style amp-custom>
  • Custom styles in Bento: inline or unrestricted CSS in <style>\
  • Custom styles in Preact: CSS modules or styled-components via props.style.
• Default styles in AMP are one of (1) functionally crucial or (2) visually enhancing. We want some way to enforce (1) while making (2) optional. Even more, we ideally want (2) to be all-or-nothing, rather than publishers styling their components on a delicate combination of (2) and their custom styles. This makes it possible to modify low-stakes CSS rules without breaking live usage.
• Core principles for Bento:
  • Propagate all props to component
  • Wrap functionally crucial styles
  • Never compromise mutability between modes
  • Optionally provide visually enhancing styles (for the reasons described earlier)

[caroqliu]

Related: https://drafts.csswg.org/css-scoping-1/#default-element-styles

[dvoytenko]

That's the good discussion and an interesting feature. Unfortunately it's limited in scope and doesn't help with our React components - only with Web Components. But we definitely should understand and see how this fits.