> For the complete documentation index, see [llms.txt](https://docs.prestashop-project.org/1-6-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.prestashop-project.org/1-6-documentation/english-documentation/developer-guide/coding-standards/css-html-smarty-and-twig-coding-standards.md).

# CSS, HTML, Smarty & Twig Coding Standards

Regarding the CSS and HTML codebase, because we have integrated Bootstrap 4 both in the back office and front office of PrestaShop 1.7, we have decided to follow their [coding standards](http://codeguide.co), maintained by [@mdo](/1-6-documentation/english-documentation/developer-guide/coding-standards/css-html-smarty-and-twig-coding-standards.md).

When you are writing HTML code, if your line is longer than 120 characters, we have chosen to do a line break after each attributes with an indentation. For example, it will look like this:

```
<img class="test"
  id="..."
  name="..."
  data="..."
  src="..."
  title="..."
  alt="..."
  role="..."
>
```

Some noteworthy rules:

* HTML
  * Use soft tabulations with two spaces to indent.
  * Avoid superfluous HTML markup.
  * No more self-closing tag.
* CSS
  * Use soft tabulations with two spaces to indent.
  * When grouping selectors, keep individual selectors to a single line.
  * End all declarations with a semicolon, even the last one.

```
<img class="test" src="...">
img,
a,
input[type="text"] {
  display: block;
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}
```

PrestaShop 1.7 uses both the Smarty and Twig template engine. Since those are mostly used to generate HTML, we expect the Smarty/Twig code to comply with the HTML standards above – as well as the one used by SensioLabs for Twig.

Some noteworthy rules:

* Use soft tabulations with two spaces to indent.
* Use single quotes to surround strings.
* Use [snake case](https://en.wikipedia.org/wiki/Snake_case) (underscores) to name your blocks.

```
{% block my_block_name %}
   {% set foo = 'foo' %}
{% endblock %}
```

```
```


---

# 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, and the optional `goal` query parameter:

```
GET https://docs.prestashop-project.org/1-6-documentation/english-documentation/developer-guide/coding-standards/css-html-smarty-and-twig-coding-standards.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.
