Skip to content

Research on better CSS solution to avoid class name conflict #65

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.

Sign up for GitHub

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

Jump to bottom
Closed
ecgan opened this issue Nov 16, 2020 · 1 comment
Closed

Research on better CSS solution to avoid class name conflict #65

ecgan opened this issue Nov 16, 2020 · 1 comment
Assignees
@ecgan

Comments

@ecgan
Copy link
Contributor

ecgan commented Nov 16, 2020 •
edited
Loading

This is a follow-up on #63 (comment).

The problem:

Currently when we come up with a new component and CSS, we have to come up with a CSS class name that is good enough and specific enough that it won't accidentally clash or cause conflicts with other components. Example: .woocommerce-marketing-installed-extensions-card.

The problems with this are:

  • We still got to come up with the class name on our own.
  • There is still potential class name conflict (albeit small chance of it happening).
  • Prone to errors like spelling mistakes.

Possible solution is to look into things like styled-components. Gutenberg project uses @emotion/styled, we can probably consider Emotion library.
@ecgan ecgan self-assigned this Nov 16, 2020
@ecgan ecgan mentioned this issue Nov 16, 2020
Merged
@ecgan ecgan mentioned this issue Nov 24, 2020
Closed
@ecgan
Copy link
Contributor Author

ecgan commented Nov 27, 2020

As per the discussion in PR #71 and subsequently the demo PR #76, because there are many existing things in SCSS that we can't easily port over to JavaScript, we will be putting CSS-in-JS / Emotion library aside and stick to using SCSS way for now.

@ecgan ecgan closed this as completed Nov 27, 2020
@tomalec tomalec mentioned this issue Dec 18, 2020
Merged
tomalec added a commit that referenced this issue May 2, 2021
@tomalec
Encapsulate ContentButtonLayout's styles.
b00cb0d 
Move them as inline styles to element's shadow root.

Add `useShadowStyles` hook,  to separate style encapsulation logic.

Addresses #65
@tomalec tomalec mentioned this issue May 2, 2021
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ecgan ecgan

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Use @emotion library for CSS woocommerce/google-listings-and-ads
1 participant
@ecgan