design system naming conventions
Hey, i notice when Kevin sets up his custom properties for his font sizes he uses naming conventions such as
--fs-400, does anyone know the reasoning behind the numbers in the name other than them being easier to remember than the rem values as he says, or is that the only thing? I would much appreciate some help from anyone, or even Kevin himself if he sees this 😄. Thanks in advance.4 Replies
While this is more a #discussions question than a specific code-related question (as it's not about your code), I can provide some insight:
*
fs stands for font size
* 400 is the naming convention for "normal" or "middle-ground". This allows you to do 200 for "smaller" and 600 "bigger". And it leaves room for in-between numbers if you need them
I'm pretty sure the numbering comes from font weight numbers. You'll find the same numbering convention all over the place so it's possible that something else came first, I'm not sure 🤷that's my bad, i did think that but i wasn't entirely sure where to put it.
ohh that makes a lot of sense now, appreciate the help.
The naming convention follows the BEM model. The fs is for font-size and the 400 is for the font-weight.
oh i've heard of that, i'll look into it, thanks!