Custom CSS Best Practices

Here are some tips on how to write efficient custom CSS for Web UI Components and to avoid getting too messy with it.

When the resulting CSS for a component is compiled on the dashboard render, your custom styles go through the validation and optimization process to exclude invalid entries and to reduce the resulting file’s weight. Some of the things listed below will be fixed automatically on the resulting CSS compilation, but if you plug an external CSS file to a dashboard, those are good advice to follow.

Avoid overqualified unnecessary long selectors, avoid too general selectors, keep selector redundancy in check, prefer classes to tags etc.

Group your styles by a target but keep in mind how CSS is being applied by a browser.

Apply one set of the same properties using several selectors for different components.

Prefer shorthand properties to their composites.

This is excessive. Seems like nothing, but if working with a big set of styles, those px tend to add up quickly, increasing the resulting size of the CSS file.

In a real project, it’s always a risk to let your browser decide what exactly it should render, and this is true for the color names either. Find the actual hexadecimal or RGB value for your color to guarantee that it’s always the same in any browser. If you still want to use names for colors, better assign them as CSS variables.

In these articles, we use default color names a lot in the examples for the sake of simplicity, but it is not the optimal way to assign colors in a real project.

Use caniuse.org to get information about which browsers support the selected property and for how long.

There is no need to apply z-index: 999999; to a component you want to lift it up over its relatives. Usually, a single-digit value is enough to put the element at the very top in the markup.

Define key property values like components’ accent color with variables and change them throughout the whole UI from one place.

Especially when you’re linking fonts directly from the internet.

Was this page helpful?

Tell us more

Send

Thank you!