4 ms·

In practice CSS rarely lives up to the aeparation between state and presentation. In most projects the to are updated in tandem. DOM is not expressive enough to

• c-smile 7y ago
  That is more about architecture actually. Ideally Web/UI component has two sets of styles: So called "primordial" or "base" - the one that defines layout of sub-components and parts and that is essential for component operation. And another set is about decoration - colors, fonts, sizes. For example in Sciter (https://sciter.com https://sciter.com) component is defined by so called style sets: @set nullable-input-base { :root { flow:horizontal; } :root > input { display:block; width:*; } :root > button.clear { display:block; } } // concrete nullable-input styling: // derives from nullable-input-base @set nullable-input < nullable-input-base { :root { background-color: var(inputback) } :root > button.clear { width:2em; background: url(x-cross.svg) 50% 50% no-repeat; } } And in script: class NullableInput : Reactor.Component { const styleset = ["nullable-input", url("widgets.css") ]; function render() { return <widget.nullable-input> <input|text /> <button.clear /> </widget>; } } This way you can redefine nullable-input in the way you want without putting any styles into code.