Kevin Powell - Community•4mo ago

When to use private custom props?

Really quick question: I use private props a lot --_private-property for anything that isn't global. I have a situation where there's essentially a grid page container that contains the whole page. I feel like that's essentially global so prefixing it with the private property doesn't make a whole lot of sense, but also I'll only be using it within nested classes / elements. Thoughts?

5 Replies

ἔρως•4mo ago

there is no such thing as "private properties" they are all global you just treat them differently because of the _

vinceOP•4mo ago

No they aren't

:root {
  --color: red;
}

.red {
  --color: green;
}

:root {
  --color: red;
}

.red {
  --color: green;
}

Red's prop won't be accessible outside of itself or children, which means it wouldn't be global (but yes I know the name prefix _ is just convention and doesn't do anything). Moreso the question was if I should prefix it as it isn't accessible outside of the class its in but its essentially wrapping the whole app

Kevin Powell•4mo ago

I'll only be using it within nested classes / elements.

Could you give a simple example of how you'd use it?

vinceOP•4mo ago

Something like this:

<main class="layout">
  <nav class="sidebar">

<main class="layout">
  <nav class="sidebar">

.layout {
  --_sidebar-width: 300px;
  grid-template-columns: var(--_sidebar-width) 1fr;
}

.layout .sidebar {
  min-width: var(--_sidebar-width);
}

.layout {
  --_sidebar-width: 300px;
  grid-template-columns: var(--_sidebar-width) 1fr;
}

.layout .sidebar {
  min-width: var(--_sidebar-width);
}

Any other time I'd be like 'yea makes sense to put it as a private prop' but since it's basically wrapping the whole page it feels 'global' I guess (ignore the semantics of if this could be in an aside and outside of main instead I'm just using it as an example haha)

Kevin Powell•4mo ago

I'd probably do it anyway, but yeah, it could go either way. The benefit of the _ approach isn't a big here.

Gaming

Programming

When to use private custom props?

Did you find this page helpful?