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

Investigate (s)CSS refactor for flexible styling #11

Closed
tobi-or-not-tobi opened this issue Oct 16, 2018 · 3 comments
Closed

Investigate (s)CSS refactor for flexible styling #11

tobi-or-not-tobi opened this issue Oct 16, 2018 · 3 comments
Assignees
Labels
css !!!Deprecated => Use "styling" label instead FR1 phase 1 of an epic team/blamed Formerly known as Team Aimed and Team Framed; next it will be Team Famed?

Comments

@tobi-or-not-tobi
Copy link
Contributor

tobi-or-not-tobi commented Oct 16, 2018

We like to fully adapt CSS custom properties in order to:

  • runtime configurability (no need to rebuild the system)
  • easy customisation
  • avoid strict view encapsulation for theming and customisation (shadow DOM, CSS vars peers through it)

We've experimented with this approach in https://github.com/tobi-or-not-tobi/lipstick-css and the recent decision to drop Internet Explorer 11 has strengthen our decision here (no need for fallbacks).

This is an important input in our rework on the UI framework, see #10.

@tobi-or-not-tobi
Copy link
Contributor Author

UI frameworks of today haven't yet embraced CSS variables. I've started the conversation with bootstrap (see twbs/bootstrap#26596), but they will not do it, not even with a fallback. Other framework have similar hesitations.

@tobi-or-not-tobi tobi-or-not-tobi removed their assignment Oct 16, 2018
@LTiger14 LTiger14 self-assigned this Oct 29, 2018
@LTiger14 LTiger14 added the team/blamed Formerly known as Team Aimed and Team Framed; next it will be Team Famed? label Oct 29, 2018
@Xymmer Xymmer changed the title Lipstick UI Investigate Lipstick UI Nov 2, 2018
@Xymmer Xymmer added css !!!Deprecated => Use "styling" label instead team/blamed Formerly known as Team Aimed and Team Framed; next it will be Team Famed? and removed team/blamed Formerly known as Team Aimed and Team Framed; next it will be Team Famed? labels Nov 10, 2018
@tobi-or-not-tobi tobi-or-not-tobi self-assigned this Nov 13, 2018
@tobi-or-not-tobi
Copy link
Contributor Author

tobi-or-not-tobi commented Nov 13, 2018

We've done a number exercises to understand where we like to go with our css layer. So far we've seen the following issues with our (s)css:

  1. SASS is not processed as we ship compiled components (our scss is compiled to and exposed as css in the libraries)
  2. Selectors will never get the highest specificity, customisation cannot override components as we use (and will use) the emulated view encapsulation.
  3. Spartacus styles will not get replaced in the compiled bundles (we'll end up with unused styles once we override the standard.
  4. Mark-up is too opinionated and doesn’t provide enough flexibility (mainly due to nested structures, which are too tightly connected to the standard design)
  5. DOM is polluted with unnecessary mark-up (we often have a BEM selector, component element, and inner style in the component style, all doing the same thing)
  6. Selectors are over engineered (BEM is superfluous in a view encapsulated component world)
  7. Some components are duplicated in the DOM (in order to render views for different screen size)

We've addressed all those issues:

  • Use css variables (1, 2)
  • Move sass to style library (1, 2, 3)
  • Use sass placeholder selectors (3)
  • Use sass feature toggles (3)
  • Simplify DOM, avoid nesting (4, 5)
  • Avoid BEM (5, 6)
  • Stick to pure css for responsive layouts (7)

@tobi-or-not-tobi
Copy link
Contributor Author

css-entensibility-v1.pdf

@Xymmer Xymmer assigned droshev and LTiger14 and unassigned tobi-or-not-tobi Nov 13, 2018
@Xymmer Xymmer added this to the ALPHA-0 milestone Nov 27, 2018
@tobi-or-not-tobi tobi-or-not-tobi changed the title Investigate Lipstick UI Investigate (s)CSS refactor for flexible styling Nov 29, 2018
@Xymmer Xymmer closed this as completed Dec 5, 2018
@Xymmer Xymmer modified the milestones: ALPHA-0, 1812-06 (0.1.0-prealpha) Dec 6, 2018
@Xymmer Xymmer added the FR1 phase 1 of an epic label Feb 18, 2019
johannathalmann pushed a commit that referenced this issue Dec 12, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css !!!Deprecated => Use "styling" label instead FR1 phase 1 of an epic team/blamed Formerly known as Team Aimed and Team Framed; next it will be Team Famed?
Projects
None yet
Development

No branches or pull requests

4 participants