1. Úvod
  2. Developer
  3. Standards
  4. Styles Structure
  5. Styles Standars
Global Variables ›

Styles Standars

Verze:

28. 01. 2026

Zodpovědná osoba:

Dominik Šlechta

Poslední aktualizace:

28. 01. 2026, rafael.quinterosv@gmail.com

This standard defines how to structure components using the BEM (Block, Element, Modifier) methodology to achieve predictable, reusable, and maintainable markup and styles. It establishes clear rules for naming, responsibility boundaries, and the relationship between templates and styles, while avoiding tight coupling between layout structure and SASS architecture.

Introduction

The goal is to establish a consistent structure for both markup and styles, ensuring that components are reusable, predictable, and easy to maintain across the project.

Project structure

The project is organized into two main areas that work together:

  • Presenters folder – contains .latte files responsible for the HTML structure and component layout.

  • SASS folder – contains .scss files responsible for the visual styling of those components.

 

BEM Implementation

The following example demonstrates a correct implementation of the BEM (Block, Element, Modifier) methodology applied to a main header component.

The goal is to clearly separate:

  • the block (independent component),

  • its elements (internal parts),

  • and optional modifiers (variations or states).

Utility classes may coexist with BEM classes but do not replace them. 

Block

The root element of the component is the block:

A block MUST represent a standalone and reusable component.
A block MUST NOT depend on its surrounding context.
A block MAY be used multiple times across the project without modification.

<section class="main-header">

The block represents a standalone, reusable component and must not depend on its context.

Elements

All internal parts of the component are defined as elements using the __ notation.
Elements always belong to the block and cannot exist independently.

Elements MUST be defined using the "__" notation.
Elements MUST belong to a block and MUST NOT exist independently.
Elements MUST NOT be shared across multiple blocks.

  • main-header__content

  • main-header__row

  • main-header__column

  • main-header__title

  • main-header__perex

  • main-header__button

Modifiers

Modifiers represent variations or states of a block or its elements and use the -- notation.

Modifiers do not define structure, only visual or behavioral differences.

Modifiers MUST use the "--" notation.
Modifiers MUST NOT define structural layout.
Modifiers SHOULD represent visual or behavioral variations only.

  • main-header--background

  • main-header__column--center

  • main-header__button--large

Global Variables ›