search

webstudio-is / webstudio

Open source website builder and Webflow alternative. Webstudio is an advanced visual builder that connects to any headless CMS, supports all CSS properties, and can be hosted anywhere, including with us.
https://webstudio.is
GNU Affero General Public License v3.0
5.2k stars 615 forks source link

Some css properties become useless when you change another css property #475

Open istarkov opened 1 year ago

istarkov commented 1 year ago

Examples: If you change display: flex to display: block all flex CSS properties become useless i.e align-items, justify-content, flex-direction, etc ...

align-content has no sense (in the flex model) in case of flex-wrap is set to nowrap

display: grid has its own bunch of properties.

Probably from a UX perspective, it's not that bad that the system preserves the state of properties I set. But on the production site, I don't want "useless" CSS properties.

Not a big issue as these properties should not affect anything (but remember gap it didn't work with flex but now is).

kof commented 1 year ago

Some thoughts here:

  1. The need for cleaning up unused properties when a property they depended on has been removed, but:

    • what happens if user only tried to switch to display: block for a second and then goes back to flex, do you think they expect all other flex properties to be gone?
    • What happens if you set a bunch of flex child properties and then change the parent instance to block? Would you expect the same cleaning that you would potentially do for the same-instance dependencies?

  2. What happens if you set the properties in flex mode, but allow overrides to set the display value? (future possibility)

  3. What if your component is used in external code and it's used with both display: block and display flex, depending on some other logic?

Overall it seems dangerous to automate this cleaning. It has to be controlled by the user somehow. Should we warn them somehow?

Maybe we need a separate feature, entirely independent: styles checker. It could check for potential useless properties, but instead of removing them, just warn and show where to find them. It could check for accessibility issues. It could check for potential performance issues etc.