Container Component guidelines

conditional-attributes-removes-component-duplication: Using conditional attributes to avoid duplicating similar components

It's a good practice to avoid duplicating similar components with minor variations. Instead, you can use conditional attributes to modify the behavior or appearance of a component based on certain conditions.

Not recommended

-- ftd.decimal: $rent1
if: { !is-price }	

-- ftd.decimal: $rent2
if: { is-price }

Lang:

ftd

Recommended

-- ftd.decimal:
value if { is-price }: $rent2	
value: $rent1

Lang:

ftd

minimize-container-components: Avoid using container components with single or no child

This guideline advises against using container components when there is only one or no child, as it can lead to unnecessary abstraction and complexity in the code. Instead, it's recommended to remove the parent container which results in simpler and more readable code.

Not recommended

;; -------- Example 1 --------

-- ftd.column:

-- ftd.text: Hello World

-- end: ftd.column


;; -------- Example 2 --------

-- ftd.column:
color: $inherited.colors.text
margin.px: 10

-- ftd.text: Hello World

-- end: ftd.column

Lang:

ftd

Recommended

;; -------- Example 1 --------

-- ftd.text: Hello World


;; -------- Example 2 --------

-- ftd.text: Hello World
color: $inherited.colors.text
margin.px: 10

Lang:

ftd