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

Improve CSS architecture #99

Closed
oliviertassinari opened this issue Jul 23, 2020 · 0 comments · Fixed by #168
Closed

Improve CSS architecture #99

oliviertassinari opened this issue Jul 23, 2020 · 0 comments · Fixed by #168
Labels
component: data grid This is the name of the generic UI component, not the React module! priority: important This change can make a difference

Comments

@oliviertassinari
Copy link
Member

oliviertassinari commented Jul 23, 2020

3 improvements opportunities:

  1. Make specificity as low as possible. I have discovered this looking at the component, there are cases where we will need to allow the developer to customize the rendering of the component, we should identify these cases and make sure the CSS specificity is as low as possible. There are specificity over 5 (barely overridable) in:
    https://github.com/mui-org/material-ui-x/blob/3a68cef50b0906674f3e43b37bd888c2e7b4c86c/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx#L11
    The higher the specificity is the harder the overrides are.
  2. Differentiate class names that are public and private. It's unclear, looking with the Chrome dev tool, which classes are private, and which ones are public to be customized.
    For the name of the class names, let's use the same convention as the main repository.
  3. Reduce bloat. I think that we should drop styled-components for the first MVP to simplify the usage of the grid (one less dependency to install & to configure for SSR & injection order), leverage the values from the theme (easier overrides), reduce the bundle size (-12 kB gzipped).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: data grid This is the name of the generic UI component, not the React module! priority: important This change can make a difference
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant