<Block>
- in UpperCamelCase, the name of the component this element belongs to-<Element>
(can be left out) - in UpperCamelCase, a meaningful name of this element (e.g. Container
, Button
, Divider
, Image
... whatever identifies the purpose of this element)<Block[-Element]>
class, a block or element may have any number of modifiers of the form:<Block[-Element]>_<booleanModifier>
- for boolean modifiers such as isActive
, isVisible
, isBold
, etc. The presence of this modifier indicates that it is "true", and it's absence indicates that it is "false".<Block[-Element]>_<modifierName>_<someValue>
- for boolean modifiers with values such as color_red
, type_primary
, size_thumbnail
className
would get repetitive, so ScandiPWA uses rebem-jsx
to be able to use block
and elem
to specify the class. As an example, look at the render
method of ProductCard
:mods
prop. Boolean modifiers will be automatically detected and treated as such.@include
directive::root
. That way, re-defining them anywhere else is an easy way to override them. Example:Image
block, the CategoryDetails-Picture
class will be added. Since the element will now have both of these classes, the parent component can additionally style the element with new rules.mix
prop to an element in the Component – this won't happen automatically. For example, consider how the Image component passes on the mix
prop: