# Styles

All custom website styles live here.

## Structure

Styling has one main file that imports other style partials/chunks. These partials/chunks are organized into different folders.

### Global

`/global` folder contains all global styling that is not tied to any particular component, element or page. Truly global styles such as variables, general global styling, typography styling and utility classes belong here.

### Partials

`/partials` folder contains smaller chunks of styling that get bundled into one optimized CSS file. This approach allows us to split our styling into smaller more manageable pieces.

Styles here should be focused on one smaller piece of UI. Ideally files here should be split by components such as button, form elements (input, checkbox etc.), modal, dropdown etc.

### Pages

`/pages` folder contains styles that are specific to certain pages.

We should focus on creating smaller reusable chunks of UI instead of doing per page styling, but sometimes page specific variants of same UI have to be created or some UI is just super specific to certain page and not really reusable in any way.