Astro-DS
Bootstrap-based React Components library.
Styles: Plain CSS, BEM + EM/REM
BEM
We are using our peculiar and condensed BEM Syntax:
-
Use prefix for selecting any element declared within astroticker:
ads-
. -
Block elements will be declared right after. Separated by a low dash to differentiate Blocks from Elements. camelCase is allowed. Sample:
ads-blockClass
-
Elements come right after preceded by a low dash. Sample:
ads-block_elementClass
-
Modifiers close the className for a complete definition of the className. Sample:
ads-block_element-modifier
.
Measurement units: EM/REM
When to apply:
-
body
font-size is set to 62.5% (on small devices), () in order to make calculations easier. This initial value will make 1rem to be equal to 10px. -
We are using
rem
units for font-sizing. Like so, component's font-size itself or its elements does not depend on ascending (parent elements), just the Root. -
We use
em
units for properties that may change depending on the element's font-size. -
We use
rem
for any properties that have a global scope, like spacing properties.