[WP] 13.03.2023 | css-in-js

 

fig 1.1 example of css-in-js solution

CSS have a way to use variables. They have access to the DOM. The scope of the variable is a selector under which it was created. In this way css variables created using html{} selector will be scoped globally. Exactly same effect is possible to obtain using :root{} pseudoselector. There is another name for this feature. It is called css custom properties. All custom properties are written in format: eg. –color-theme: …value… – css variables need to be prefixed with double dash. CSS variables may be accessed using var() function. Var function signature goes as follows var(css_variable, default_value):value.

There are several component libraries/UI frameworks available out there such ass bootstrap, tailwind or mui. They provide low-level components for building web application. Using existing component library may reduce applications time of delivery but in this case it is a trade-off for unique identity of developed project. Reading about this dependencies i came across something called design system. Basically it is a collection of design rules agreed in early stage of a project and followed during its development to keep the web application consistent.

A little digresion for above subject is that today i found another two topics about web app design which is totally worth studying. The first one is css-in-js libraries especially styled-components library. According to internet sources the second most popular library of that type is css modules – the one which is built in react app. The latter subject is the library of ‚bare’ components which are built to fulfill the requirements for screenreaders and keybord handling(accessibility – a11y) it is called Radix primitives. Such basic components can be acustomed to consumer requirements.(react-motion, formik)

Prop delegation is a way to collect all additional props which are passed by component consumer (eg. form field validation attributes: min length or required={true}). In other words it takes care of all props passed by the user but unspecified in component’s definition. Whenever user delegate a property already existing within a component, one of the values will be overwritten. location of accessing delegated props is crucial. When they are accessed before built in props – the latter will overwrite delegated props. Things look differently in opposite case. To use …delegated props(so called …rest props) {…delegated} need to be added as last components prop and also mentioned in component function as a last part of props destructuring expression. Props conflict(same prop assigned in component design and during instantiation) may be solved in three ways: 3. The third most intriguing is merging both values(eg two css classes).

• 1.Prioritize user value(passed to component)
• 2.prioritize built-in value.
• 3.merging both values(eg two css classes).

Delegation pattern may be used to delegate styles. There are two ways of styles delegation. The first one is to pass granular properties contaitng values of corresponding style properies. The other one is to pass whole style object. Giving consumer access to all styles of a component increase flexibility but endangers design system consistency.

Lock and load

g-marcin