Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to handle CSS? #4

Open
tomByrer opened this issue Apr 30, 2018 · 1 comment
Open

How to handle CSS? #4

tomByrer opened this issue Apr 30, 2018 · 1 comment

Comments

@tomByrer
Copy link

An HTMLx string could include <script> and <style> tags. The contents of these tags must not be interpolated, but must instead be preserved as typed.
What happens to the contents of those tags is up to the framework.

Correct me if I'm wrong, but AFAIK CSS code tends to be handled by frameworks & bundlers in 1 or more of 3 ways:

  • collate into global style sheet to be loaded in the index.html via bundle or <link href="main.css" rel="stylesheet" type="text/css">
  • collate into the module/page bundle with unique names so not to leak into global styles
  • inlined to all HTML elements via ``style="background:#1beef3;;">`

All have pros & cons. But could they cause unexpected behaviors when intermingled, & the CSS approach is unknown? What I'm imagining is that different frameworks, thus different CSS approaches, would be intermingled in the same project. So layout would be done by React, a spreadsheet would be run in Ember, comment section in Preact, Svelte runs the animations, etc.

@Rich-Harris
Copy link
Collaborator

HTMLx deliberately doesn't specify what should happen there — it's purely concerned with syntax, not behaviour. The main reason <style> got mentioned at all is to eliminate any confusion over whether the contents of {...} should be treated as a JS expression, because obviously those characters come up frequently in both CSS and JS!

I would expect each framework to have a clearly-defined answer to the question of what to do with that CSS. If they're doing things sensibly, there should be no ill effects from combining components from multiple frameworks, as the styles will be scoped to the components they belong to.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants