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

Semantic classes for UI components #132

Open
Fabilin opened this issue Sep 18, 2023 · 0 comments
Open

Semantic classes for UI components #132

Fabilin opened this issue Sep 18, 2023 · 0 comments
Labels
enhancement New feature or request good first issue Good for newcomers

Comments

@Fabilin
Copy link
Member

Fabilin commented Sep 18, 2023

The current Emotion-based override system is powerful, but it has a few downsides:

  • no syntax highlighting or validation unless you use Emotion's object-based CSS and you install its types, or use specific IDEs (e.g. Intellij Idea Ultimate) with Emotion's css`...` string template.
  • no obvious mapping between overrides and DOM elements, which complicates prototyping and debugging from the browser.
  • no easy way to style children from a parent override: one must either use CSS variables to pass data between the two overrides, or rely on the precise DOM structure (which we may change at any time).

One way to solve these issues would be to add classes to every element that uses overrides.

One foreseeable pitfall to this approach would be that class-based CSS overrides may conflict with emotion-generated CSS. In those cases, some specificity hacks may be required.

@Fabilin Fabilin added the enhancement New feature or request label Sep 19, 2023
@Fabilin Fabilin added the good first issue Good for newcomers label Oct 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests

1 participant