Kevin Powell - Community•2w ago

what should be made into a variable?

Hey, what properties should be stored in variables? I'm aware of things such as colours, things regarding fonts (family, sizes, weights etc) , spacing, and i occasionally store border radius, leading and kerning values if i have a few different sizes with hierarchical naming conventions e.g. x-sm, x-md etc. Is there anything that shouldn't be a variable? Perhaps a rule of thumb or something? Thanks in advance.

17 Replies

Jochem•2w ago

in general, things that are used in multiple places and would need to be updated in multiple places if you have to change it

snxxwyy•2w ago

ah makes sense, thank you. Is there anything that isn't necessary in any case to be a variable?

Jochem•2w ago

just the inverse of the other thing, really stuff that's in one spot and doesn't need changing also to add to this, things that may not ever need to change but is used in a lot of places. Things like brand colors for example

snxxwyy•2w ago

ah okay good stuff, really understand that now, thanks.

ChooKing•2w ago

In addition to values that are used in multiple places, variables are also useful when you want to use the same code with different values in multiple places. In some cases, it's simpler to replace the value and use the same code.

snxxwyy•2w ago

ah so things like this?

.card {
  --bg-color: orange;

  background-color: var(--bg-color);
}

.card[data-type="secondary"] {
  --bg-color: yellow;
}

.card {
  --bg-color: orange;

  background-color: var(--bg-color);
}

.card[data-type="secondary"] {
  --bg-color: yellow;
}

rather than this?

.card {
  background-color: orange;
}

.card[data-type="secondary"] {
  background-color: yellow;
}

.card {
  background-color: orange;
}

.card[data-type="secondary"] {
  background-color: yellow;
}

ChooKing•2w ago

Yes.

snxxwyy•2w ago

alright cool, appreciate the insight.

ἔρως•2w ago

there's other things you can do

snxxwyy•2w ago

oh nice, what might those be if you don't mind sharing?

ἔρως•2w ago

for example, if you want to change font sizes dynamically, for different resolutions, you can use variables

snxxwyy•2w ago

that's like this right?

--font-small: clamp(x, y, z);
--font-medium: clamp(x, y, z);
--font-large: clamp(x, y, z);

--font-small: clamp(x, y, z);
--font-medium: clamp(x, y, z);
--font-large: clamp(x, y, z);

ἔρως•2w ago

:root {
  --font-size: 1rem;
  @media screen and (max-width: 768px) {
    --font-size: 0.85rem;
  }
}

body {
  font-size: var(--font-size);
}

:root {
  --font-size: 1rem;
  @media screen and (max-width: 768px) {
    --font-size: 0.85rem;
  }
}

body {
  font-size: var(--font-size);
}

you can use that too

snxxwyy•2w ago

ah yeah i've seen that method before

ἔρως•2w ago

or do like this, as the font size is always the same (which may or may not be what you need) you can use this for spacings as well for example, if you have a gap of 16px but you want 8px for phones, you can use the same structure

snxxwyy•2w ago

ah got it, thank you

ἔρως•2w ago

paddings work as well margins things like that you're welcome

Gaming

Programming

what should be made into a variable?