Learn full-stack web development using fastn in a week

Frontend

Property

horizontal-not-left-right: Use horizontal property

When positioning elements on a web page, it is common to use the left and right properties to specify their horizontal placement. However, if both values are the same, it is more efficient to use the horizontal property instead.

The horizontal property is a shorthand for specifying both the left and right properties with a single value.

Not recommended

-- ftd.text: Hello World
padding-left.px: 20
padding-right.px: 20

;; or

-- ftd.text: Hello World
margin-left.px: 20
margin-right.px: 20

Lang:

ftd

Recommended

-- ftd.text: Hello World
padding-horizontal.px: 20


;; or

-- ftd.text: Hello World
margin-horizontal.px: 20

Lang:

ftd

vertical-not-top-bottom: Use vertical property

When positioning elements on a web page, it is common to use the top and bottom properties to specify their horizontal placement. However, if both values are the same, it is more efficient to use the horizontal property instead.

The horizontal property is a shorthand for specifying both the top and bottom properties with a single value.

Not recommended

-- ftd.text: Hello World
padding-top.px: 20
padding-bottom.px: 20

;; or

-- ftd.text: Hello World
margin-top.px: 20
margin-bottom.px: 20

Lang:

ftd

Recommended

-- ftd.text: Hello World
padding-vertical.px: 20

;; or

-- ftd.text: Hello World
margin-vertical.px: 20

Lang:

ftd

optimize-container-props: Applying properties to container with consistent child values

When working with container components, it is efficient to apply properties to the container component instead of individual child elements, particularly when those properties have the same values for all child elements. This can help optimize performance and reduce the amount of repetitive code. It saves time and improves the overall functionality of their applications.

Not recommended

-- ftd.column:

-- ftd.text: Hello
align-self: center

-- ftd.text: World
align-self: center

--end: ftd.column

Lang:

ftd

Recommended

-- ftd.column:
align-content: center

-- ftd.text: Hello

-- ftd.text: World

--end: ftd.column

Lang:

ftd

alignment-in-container: Best-practice for aligning items within the container

In general, it is not recommended to apply the same value of align-content to both the flex container and its child elements because it can lead to unexpected behavior. If the same value is applied to both, the child elements may not align properly within the container.

However, if different values of `align-content are applied to the container and its child elements, then the property should be applied to the child elements to control their alignment.

Not recommended

-- ftd.column:
align-content: center

-- ftd.text: Hello
align-self: start

-- ftd.text: World
align-self: center

-- end: ftd.column

Lang:

ftd

Recommended

-- ftd.column:
align-content: center

-- ftd.text: Hello
align-self: start

-- ftd.text: World

-- end: ftd.column

Lang:

ftd

parent-propagation: Propagating Child Properties to Parent Containers

Not recommended

-- ftd.column:

-- ftd.text: Hello World
color: $inherited.colors.text
role: $inherited.types.copy-regular

-- ftd.text: Hello Multiverse
color: $inherited.colors.text
role: $inherited.types.copy-regular

-- end: ftd.column

Lang:

ftd

Recommended

-- ftd.column:
color: $inherited.colors.text
role: $inherited.types.copy-regular

-- ftd.text: Hello World

-- ftd.text: Hello Multiverse


-- end: ftd.column

Lang:

ftd

Property related best practices