# Working with PHTML templates

**When working with Loki themes, the aim is to create as little template overrides as possible. However, if we *do* create template overrides, let's focus on a couple of principles to create better templates.**

## Guidelines for cleaner templates
- Use `ViewModel` classes instead of `Block` classes;
- Create as many `ViewModel` classes as needed;
- Move as much logic into `ViewModel` classes instead of keeping it in the template;
- Keep templates small and readable;
- Use as little JavaScript bindings (including Alpine.js bindings) as possible;
- Use the Loki `$css()` utility;

## Cleaning up legacy JavaScript
With Loki Theme Kit, a template override of the original Luma theme is needed to create a better alternative. The first step here is to remove all Knockout, Require and jQuery shit and clean things up. 

- `data-mage-init`
- `x-magento-init`
- `data-bind`
- `require()`
- ...

## Recreate client-side logic
Next, try to reproduce as much logic of the removed JavaScript: Preferably this is done with plain HTML and CSS. If new JavaScript is needed, carefully choosen between JavaScript components and Alpine.js components.

## `$css()` util from `Loki_CssUtils` module
The `Loki_CssUtils` module adds a variable `$css()` to PHTML templates, which allows for defining CSS classes for a given HTML attribute. By doing this via PHP (instead of hard-coded in HTML) is that PHP-based parsers can be used to replace and modify CSS classes. Even better, you can append and override CSS classes via the XML layout as well.

```html
<label class="<?= $css('label', scope: 'label') ?>" 
```

Ideally, the default CSS class in PHTML templates is either empty or semantically correct. Utility classes should be avoided.