Property related best practices
horizontal-not-left-right: Use horizontal propertyWhen 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.
horizontal property is a shorthand for specifying both the left and right properties with a single value.
-- 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
-- ftd.text: Hello World padding-horizontal.px: 20 ;; or -- ftd.text: Hello World margin-horizontal.px: 20
vertical-not-top-bottom: Use vertical propertyWhen 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.
horizontal property is a shorthand for specifying both the top and bottom properties with a single value.-- 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
-- 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-- ftd.column: -- ftd.text: Hello align-self: center -- ftd.text: World align-self: center \--end: ftd.column
-- ftd.column: align-content: center -- ftd.text: Hello -- ftd.text: World \--end: ftd.column
alignment-in-container: Best-practice for aligning items within the containerIn 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.-- ftd.column: align-content: center -- ftd.text: Hello align-self: start -- ftd.text: World align-self: center -- end: ftd.column
-- 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-- 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
-- ftd.column: color: $inherited.colors.text role: $inherited.types.copy-regular -- ftd.text: Hello World -- ftd.text: Hello Multiverse -- end: ftd.column
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?
Quick links:
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.
