Clear indication of local & global scope

[steveduffin]

As we add more mixins with the intention of being locally scoped, should we introduce a convention that clearely marks them as such?

Edit: increasing the scope of this ticket to cover other instances of external vs internal usage such as variables.

e.g // Scope : Local | Scope : Global

or // For local usage

[MrDinsdale]

I like the first option!

[joe-bell]

I'm feeling like we could resolve this through a number of different options:

• Naming - is the naming of our variables something we could improve?
• Commenting - do the inline comments clearly define scope?
• Warnings - could we warn the user they're using local code incorrectly?

[steveduffin]

@joebell93 maybe stick to the convention of putting _ before every local scoped thing, just a bit of a chore to do this to existing variables. Is it a breaking change if they have been misused?

@MrDinsdale on #323 asked "We could look to move any variables which could be beneficial to global usage into settings?." - That could work but could lead to us making arbitrary connections between usage. Can you find any examples? I think it for the most part it makes sense to leave them in their respective component files

[joe-bell]

I think I'd actually agree with @MrDinsdale's view of

"We could look to move any variables which could be beneficial to global usage into settings?"

Not necessarily move, but actually only encourage the external use of variables that are from Core?

[MrDinsdale]

@steveduffin I guess an example would be vars associated with buttons such as spacing and border width which should also be aligned with forms, select and dropdowns etc.

We should only ever encourage use of vars from core, any other local variables should be considered high risk.

$_var-name works although I still think having something in the component to highlight this would be beneficial such as:

/* Private variables
  =========================================== */
$_btn-border-width: ...