---
title: "Preoptimize your CSS theme and JavaScript"
slug: "preoptimize-your-css-theme-and-javascript"
abstract: "Use preoptimization to style your themes."
---
# Preoptimize your CSS theme and JavaScript

SXA lets you build optimized files on front-end developer machines using the built-in theme tooling. This lets you generate `pre-optimized-min` files outside of the Sitecore instance, giving you more control over your assets.

You can do all optimization during front-end development. This way of working allows you to store your theme files in a repository, such as Git, to enable version tracking. It makes it easier to merge theme files because they are not stored as serialized items and their content is not encoded. It also allows different developers to work on the same theme at the same time.

> [!note]
> By default, the configuration encourages you to use preoptimization and does not upload your source CSS or JS. To change the default setting, go to the `config.js` file:`<Theme>/gulp/config.js`.

To use `pre-optimized-min` files for uploading styles and scripts:

1. Create a new theme using [SXA CLI](https://doc.sitecore.com/xp/en/developers/sxa/104/sitecore-experience-accelerator/add-a-theme-using-sxa-cli.html "Add a theme using SXA CLI"). All script and style assets are automatically downloaded to your local theme folder.
2. [Use npm install and run the gulp watcher task](https://doc.sitecore.com/xp/en/developers/sxa/104/sitecore-experience-accelerator/modify-your-site-design-with-creative-exchange-live.html "Modify your site design with Creative Exchange Live") .
3. When you now change a style or script, the `pre-optimized-min` file is created and uploaded to your Sitecore instance automatically.

    For example, if you change a style for the Accordion component and save it, the message shows you that the source is not uploaded separately but by using the `pre-optimized-min` file.

    ![Uploading of pre-optimized-min was successful message.](https://doc.sitecore.com/api/markdown-image/xp/en/developers/sxa/104/sitecore-experience-accelerator/images/SXA-preoptimizedmin-message.png)

    In the Content Editor, your theme's styles and scripts folders only contain the `pre-optimized-min` file and not the source assets.

    ![The theme folder contains the pre-optimized-min folder only.](https://doc.sitecore.com/api/markdown-image/xp/en/developers/sxa/104/sitecore-experience-accelerator/images/SXA-preoptimizedmin-styles.png)