3 ms·
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 s
by 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.