Component naming conventions in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

Why should Svelte component names start with a capital letter?

Starting component names with a capital letter helps Svelte and developers distinguish components from regular HTML elements. It improves readability and prevents naming conflicts.

beginner

What is the recommended file naming style for Svelte components?

Svelte components should be saved with PascalCase file names, like MyComponent.svelte. This matches the component name and helps keep the project organized.

intermediate

How should you name components that represent UI elements versus pages in Svelte?

UI elements usually have descriptive names like Button or Modal. Pages often use names that reflect their route or purpose, like HomePage or UserProfile.

beginner

What naming style is NOT recommended for Svelte components?

Using lowercase or kebab-case (like my-component.svelte) for component files is not recommended because it can confuse Svelte and developers, making it harder to identify components.

intermediate

Why is consistent component naming important in Svelte projects?

Consistent naming makes the code easier to read, maintain, and scale. It helps new team members understand the project quickly and reduces errors caused by misnaming.

Which of these is the correct way to name a Svelte component file?

A UserProfile.svelte

B userprofile.svelte

C user-profile.svelte

D user_profile.svelte

Svelte components should use PascalCase file names matching the component name, like UserProfile.svelte.

Why should component names start with a capital letter in Svelte?

A To avoid using quotes

B To make the file size smaller

C To improve performance

D To distinguish components from HTML tags

Capital letters help distinguish components from regular HTML elements, improving clarity.

Which naming style is discouraged for Svelte components?

A PascalCase

B camelCase

C kebab-case

D UpperCamelCase

kebab-case is discouraged because it can confuse Svelte and developers when identifying components.

What is a good practice when naming page components in Svelte?

A Use random names

B Use names that reflect the page's purpose

C Use all lowercase letters

D Use numbers only

Page components should have descriptive names that reflect their purpose, like HomePage or UserProfile.

Consistent component naming helps with:

A Code readability and maintenance

B Increasing file size

C Slowing down the app

D Making code harder to understand

Consistent naming improves readability, maintenance, and teamwork.

Explain why Svelte components should be named using PascalCase and start with a capital letter.

Think about how you tell a friend apart from a place by their names.

Describe the difference in naming conventions between UI element components and page components in Svelte.

Consider how you name small tools versus big rooms in a house.