Learn full-stack web development using fastn in a week
Learn Now

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