> For the complete documentation index, see [llms.txt](https://docs.devhub.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.devhub.com/themes-and-custom-templates/site-builder-markup/avoiding-site-builder-css.md).

# Avoiding Site Builder CSS and HTML duplication

## Avoiding Site Builder CSS

Our Site Builder adds some markup (classes, IDs, etc) to [certain elements within the pages](/themes-and-custom-templates/site-builder-markup.md). You should avoid adding your own CSS styles to these elements directly as those can adversely effect the Site Builder editing of those pages.

If you do want to use these classes for your own custom styles, then you should add styles to child elements of these instead of directly to these elements.

| Correct                                                                                              | Incorrect                                                                                       |
| ---------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
| <p><code>.sb-formbuilder form {</code></p><p> <code>/\* styles here \*/</code><br><code>}</code></p> | <p><code>.sb-formbuilder {</code></p><p> <code>/\* styles here \*/</code><br><code>}</code></p> |

## Avoiding duplication of Site Builder HTML element classes

Our Site Builder adds HTML around the various Modules and Widgets that you add to the page. Examples of the HTML and class names can be found here:

{% content-ref url="/pages/-Ld4q\_6o8YNp9M\_HOloA" %}
[Site Builder Markup](/themes-and-custom-templates/site-builder-markup.md)
{% endcontent-ref %}

You should avoid using those same classes and should not copy entire blocks of HTML from a current page into a new HTML widget on the page without first checking to make sure none of the reserved HTML elements are present.

Otherwise, after adding this code to the site, it can negatively impact the behavior of the Site Builder.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.devhub.com/themes-and-custom-templates/site-builder-markup/avoiding-site-builder-css.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.