3 ms·

The issue of this direction is if you need to update the markup, you will need to update the css, which is hard and risky because of css global scoping.

HelloNurse 3y ago
New and updated CSS rules should be usually needed for new "themes", exactly the type of change that semantic markup is robust against (e.g. placing image captions in a sidebar rather than below the respective images), and for backwards compatible extensions of the original design that add support for something new that will only be used in new markup in new pages (e.g. allowing small images inside paragraphs, meant to be displayed inline, in addition to large ones between paragraphs). What kind of fragile markup and problematic CSS global rules are you worrying about?
- skydhash 3y ago
  > What kind of fragile markup and problematic CSS global rules are you worrying about? I’m wondering that too. If I’m writing a SPA, styles are usually scopped to the component with a base styles for UI atomic elements. And some conventions around spacing. If it’s a website, it will be separated in layouts and small components Bootstrap-like. An update will be identified as a variant or a special case. As for coding this, search all files is usually a godsend when refactoring. You can use ripgrep if the editor does not have a good implementation.
  - sbergot 3y ago
    The author uses css targets like *body > header*. Search and replace won't be enough to tell you which components are affected by a given rule.
- sbergot 3y ago
  A lot of applications have a long lifetime. They are not shipped only once. If I want to add a new feature, say allow users to perform a new operation in an existing screen, I will have to update a few components for this. You want to preserve the theme an consistency of the UI, but adapt its functionality. For this type of changes the semantic version is problematic.
  - HelloNurse 3y ago
    Ordinary changes fall within the boundaries of the existing design system: for example, "a new operation in an existing screen" probably means adding instances of a few existing components (button, paragraph, title, section, pop-up submenu, etc.), with no impact on styles, not "updating" components.
MaxArt2501 3y ago
I can't, for the sake of me, understand how some frontend devs still complain about CSS' global scope when style encapsulation exists and is widely adopted in a form or the other, either native (Shadow DOM) or emulated. You don't like global styles? Don't use global styles, period. Even without adopting Nue and staying on React, CRA and Next comes out with CSS Modules out of the box. Angular and Vue have their own equivalent.

HelloNurse 3y ago

New and updated CSS rules should be usually needed for new "themes", exactly the type of change that semantic markup is robust against (e.g. placing image captions in a sidebar rather than below the respective images), and for backwards compatible extensions of the original design that add support for something new that will only be used in new markup in new pages (e.g. allowing small images inside paragraphs, meant to be displayed inline, in addition to large ones between paragraphs). What kind of fragile markup and problematic CSS global rules are you worrying about?

skydhash 3y ago
> What kind of fragile markup and problematic CSS global rules are you worrying about? I’m wondering that too. If I’m writing a SPA, styles are usually scopped to the component with a base styles for UI atomic elements. And some conventions around spacing. If it’s a website, it will be separated in layouts and small components Bootstrap-like. An update will be identified as a variant or a special case. As for coding this, search all files is usually a godsend when refactoring. You can use ripgrep if the editor does not have a good implementation.
- sbergot 3y ago
  The author uses css targets like *body > header*. Search and replace won't be enough to tell you which components are affected by a given rule.
sbergot 3y ago
A lot of applications have a long lifetime. They are not shipped only once. If I want to add a new feature, say allow users to perform a new operation in an existing screen, I will have to update a few components for this. You want to preserve the theme an consistency of the UI, but adapt its functionality. For this type of changes the semantic version is problematic.
- HelloNurse 3y ago
  Ordinary changes fall within the boundaries of the existing design system: for example, "a new operation in an existing screen" probably means adding instances of a few existing components (button, paragraph, title, section, pop-up submenu, etc.), with no impact on styles, not "updating" components.

MaxArt2501 3y ago

I can't, for the sake of me, understand how some frontend devs still complain about CSS' global scope when style encapsulation exists and is widely adopted in a form or the other, either native (Shadow DOM) or emulated. You don't like global styles? Don't use global styles, period. Even without adopting Nue and staying on React, CRA and Next comes out with CSS Modules out of the box. Angular and Vue have their own equivalent.