Property Guidelines

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
Recommended
-- ftd.text: Hello World
padding-horizontal.px: 20


;; or

-- ftd.text: Hello World
margin-horizontal.px: 20
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
Recommended
-- ftd.text: Hello World
padding-vertical.px: 20

;; or

-- ftd.text: Hello World
margin-vertical.px: 20
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
Recommended
-- ftd.column:
align-content: center

-- ftd.text: Hello

-- ftd.text: World

\--end: ftd.column
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
Recommended
-- ftd.column:
align-content: center

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

-- ftd.text: World

-- end: ftd.column
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
Recommended
-- ftd.column:
color: $inherited.colors.text
role: $inherited.types.copy-regular

-- ftd.text: Hello World

-- ftd.text: Hello Multiverse


-- end: ftd.column

Support fastn!

Enjoying fastn? Please consider giving us a star ⭐️ on GitHub to show your support!

Getting Help

Have a question or need help?

Visit our GitHub Q&A discussion to get answers and subscribe to it to stay tuned.

Join our Discord channel and share your thoughts, suggestion, question etc.

Connect with our community!

Found an issue?

If you find some issue, please visit our GitHub issues to tell us about it.

Join us

We welcome you to join our Discord 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.
Copyright Β© 2023 - FifthTry.com