Kevin Powell - Community•7mo 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•7mo 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

snxxwyyOP•7mo ago

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

Jochem•7mo 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

snxxwyyOP•7mo ago

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

Choo♚𝕂𝕚𝕟𝕘•7mo 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.

snxxwyyOP•7mo 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;
}

Choo♚𝕂𝕚𝕟𝕘•7mo ago

Yes.

snxxwyyOP•7mo ago

alright cool, appreciate the insight.

ἔρως•7mo ago

there's other things you can do

snxxwyyOP•7mo ago

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

ἔρως•7mo ago

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

snxxwyyOP•7mo 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);

ἔρως•7mo 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

snxxwyyOP•7mo ago

ah yeah i've seen that method before

ἔρως•7mo 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

snxxwyyOP•7mo ago

ah got it, thank you

ἔρως•7mo ago

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

Gaming

Programming

what should be made into a variable?