Why this matters
Consistency in prop casing improves code readability and maintainability.
Prop names should always use camelCase during declaration. When used inside in-DOM templates, props should be kebab-cased. Single-File Components templates and JSX can use either kebab-case or camelCase props. Casing should be consistent.
Consistency in prop casing improves code readability and maintainability.
Side-by-side examples engineers can pattern-match during review.
props: {
'greeting-text': String
}
// for in-DOM templates
<welcome-message greetingText="hi"></welcome-message>props: {
greetingText: String
}
// for SFC - please make sure your casing is consistent throughout the project
// you can use either convention but we don't recommend mixing two different casing styles
<WelcomeMessage greeting-text="hi"/>
// or
<WelcomeMessage greetingText="hi"/>
// for in-DOM templates
<welcome-message greeting-text="hi"></welcome-message>From the same buckets as this rule.
For applications, styles in a top-level `App` component and in layout components may be global, but all other components should always be scoped. This can be achieved through CSS modules, class-based strategies like BEM, or the `scoped` attribute in Single-File Components.