Best practices
Learn the best practices for designing components.
Designing components may take a few iterations before you find the optimal approach. However, you can get there faster by making the right choices from the start.
Below are some general best practices to consider when planning your components.
Focus on modularity
Instead of using a single, complex component to represent multiple elements, create smaller, simpler components and combine them as needed. That gives you greater flexibility and reusability.
For example, instead of creating one large component for a page section, break it down into an image, a bulleted list, and a button component.
Use descriptive names
Naming your components and attributes clearly and descriptively helps you and your team understand the purpose of each component, making it easier to work with the content structure.
Use names that clearly communicate the component's purpose, such as "Product feature list" or "Product image gallery" rather than "Product cards" or "Product grid", for example.
Split complex components
If a component is near the complexity limit, consider restructuring it by splitting it into smaller components and using multiple slots to accommodate them.
For example, instead of having a single component with multiple sections, create a component for each section and use different slots to render them.
Avoid unnecessary components
Creating components for simple elements like titles or images is usually not necessary. Instead, use structures or primitives to represent them.
A good rule of thumb is to ask yourself: "Do I need flexibility or consistency?"
If you need flexibility, use a structure attribute instead of another component. If you need consistency, a new component is the way to go.
Refactor when necessary
Sometimes, you might be unable to add a new attribute or nesting level to a component because another connected component would exceed the maximum depth. Or, you may need to add an attribute to a component used in many places, but not all of them need it.
If this is the case, you may need to refactor your components to accommodate the new requirements.