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-propogation`: 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

Support `fastn`!

Enjoying `fastn`? Please consider giving us a star ⭐️ on [GitHub](https://github.com/fastn-stack/fastn) to show your support!

[⭐️](https://github.com/fastn-stack/fastn)

Getting Help

Have a question or need help? Visit our [GitHub Q&A discussion](https://github.com/fastn-stack/fastn/discussions/categories/q-a) to get answers and subscribe to it to stay tuned. Join our [Discord](https://discord.gg/a7eBUeutWD) channel and share your thoughts, suggestion, question etc. Connect with our [community](/community/)!

[💻️](/community/)

Found an issue?

If you find some issue, please visit our [GitHub issues](https://github.com/fastn-stack/fastn/issues) to tell us about it.

Quick links:

- [Install `fastn`](install/) - [Create `fastn` package](create-fastn-package/) - [Expander Crash Course](expander/) - [Syntax Highlighting in Sublime Text](/sublime/)

Join us

We welcome you to join our [Discord](https://discord.gg/a7eBUeutWD) community today. We are trying to create the language for human beings and we do not believe it would be possible without your support. We would love to hear from you.