Style Guide: component naming in templates

[Justineo]

OK let's continue the discussion in this issue.

Some earlier discussion can be found under #1160.

I think kebab-case is also clear to identify components from elements because elements always have a one-word name while component names always have more than one word. PascalCase might not be the only way to make the visual difference.

According to current style guide:

For component names:

Scenario	Convention
template and <template> in SFC	PascalCase
In-DOM templates	kebab-case
JSX	PascalCase

For props:

Scenario	Convention
template and <template> in SFC	kebab-case
In-DOM templates	kebab-case
JSX	PascalCase

The logic here is not quite consistent IMO. As @chrisvfritz said earlier:

PascalCase is a convention used to identify instances in JavaScript. It applies to components, because they're really both JavaScript and instances. I think PascalCase would be strange for attributes, because they don't have instances.

1. Instance are identified by camelCase
2. Properties of JavaScript objects are in camelCase

So I think JavaScript “semantics” doesn't apply here. As the explanation of kebab-casing for prop names in the style guide itself says:

We're simply following the conventions of each language. Within JavaScript, camelCase is more natural. Within HTML, kebab-case is.

If we are gonna use kebab-case prop names, there's no reason to prevent this for component names. Otherwise the underlying logic is like: components are in JavaScript scope, props are not? Something like <WelcomeMessage greeting-text="hi"/> are clearly not natural IMO. I said PascalCase “smells like JSX” earlier, which was just another way of saying “the naming convention is not consistent”.

What I propose:

• Always use kebab-case in templates, use PascalCase in JSX.
• or, use PascalCase every where, but use camelCase for props.

[Justineo]

Oops, duplicated with #1162. Merge to #1162.