# Avoid writing custom CSS

*Category:* Getting started
*Section:* Guidelines
*Source:* https://uikit.developers.rio.cloud/#/start/guidelines/custom-css
*Captured:* 2026-04-27T14:57:05.092Z

Maintaining CSS will become harder over time due to various reasons like growing amount of styles, old and unknown overwrites, exchange of Team members etc.

## Avoid writing custom CSS

Getting more familiar with Bootstrap and the UIKIT will speed up your development and keep the maintenance of custom styles low.

Therefore, avoid writing custom CSS where possible and try to achieve the desired results by using

HTML designUIKIT componentsUIKIT foundation utility classes.

## Custom CSS

If the UIKIT colors do not fit your needs, you have the option to use 5 additional custom color vars.

You just have to add those css vars to the index.html head and than you can use the following classes. bg-custom-a, text-color-custom-a, fill-custom-a.

```html
<head>
<style>
:root {
--custom-color-a: #5eff1e;
--custom-color-b: #e51eff;
--custom-color-c: #1e90ff;
--custom-color-d: #ff4b1e;
--custom-color-e: #ffcb1e;
}
</style>
</head>
```

<head>

&lt;style&gt;

:root { --custom-color-a: #5eff1e; --custom-color-b: #e51eff; --custom-color-c: #1e90ff; --custom-color-d: #ff4b1e; --custom-color-e: #ffcb1e; }

&lt;/style&gt;

</head>

```html
<div class="bg-custom-a">
<p class="text-color-custom-b">
<svg class="fill-custom-c"></svg>
</p>
</div>
```

<div class="bg-custom-a">

<p class="text-color-custom-b">

<svg class="fill-custom-c">

</svg>

</p>

</div>