Custom CSS in webcomponents

[DrMalchev]

Hello,
we have a colleague who is experienced with classic UI5 and he insists that we don't use custom css because it can break components. Often it is impossible to arrange the components the way we want without custom css. Is there a general recommendation when and if we should use css?
Thanks,
Delyan

[Lukas742]

Hi @DrMalchev

in general, using CSS is totally fine and even intended to be used. For example, for the Text (ui5-text) web component, the recommended way of setting white-space behavior is via CSS. Similarly, when using the FlexBox, defining align-content for example, also requires CSS.

There are certain properties and values that can affect the layout of a component, such as display, box-sizing, and position, to name a few. However, this heavily depends on the component, and even more so if it's a web component wrapped by our wrapper or a React component. Still, it’s essential to check if the component looks fine after applying CSS that can affect the layout.

The only thing that is not recommended is customizing internal CSS (except for available part pseudo-elements), because the internal structure could change without notice.