#Component Best Practices

There are a few things to consider and keep in mind when designing Components.

#Styling

When styling Components, it is best to style everything within the Component in its Style tab. Do not style the relation or positioning between Components. For example:

.some-component
  padding 8px 16px
  border 1px solid rgba(0, 0, 0, 0.1)

This works well, but don't put margin on the Component or provide spacing between Components. It is entirely up to the parent Page or Component that's using the Component to determine positioning.

This is also true with width and height. The Component should fill its container. This allows the parent to use position: fixed to attach it to the screen, or put it in a grid or flex container. If you hardcode width, height or margin, it quickly becomes difficult or impossible to use the Component flexibly.

#Attributes

Rather than creating many slightly different versions of Components, you should add Attributes to them that change functionality. You can provide granular control by adding many different Attributes for each of the Component's colors, for example, or you can make simple boolean options that change lots of the Component's style and functionality at once for common use cases.

#Exportability

It is highly recommended to not directly reach into the site's Collections, but instead ask to be passed a specific Entry as an object attribute. The same is true for color values. If you write a Component that accesses only attr, then exporting it and using it on another site will be much easier.

The user of the Component can then pass those values into each individual Component's attributes on the Pages they use them and set default values in the Attributes screen using Templating.

#Static Components

Vue Components are very powerful and extremely useful, but they add load time to a page and can cause accessibility problems if you allow them to control large areas of the DOM due to layout shifting.

For simple things like buttons, tab lists, or dropdown menus, vanilla JavaScript is all that's needed. Only use Vue Components when very complex user interaction is required or the Component needs to maintain its own complex internal state such as a checkout process.

Vue Components aren't bad, and actually greatly improve maintainability and ease of coding as long as they're used properly.

#Naming Conventions

Because Components use custom HTML tags and attributes, it's important to not conflict with existing names. The easiest way to do this is ensure all Component names and attributes use two or more words.

For example, don't call a Component "Nav". This conflicts with the existing <nav> tag. Don't call an attribute "Title" since this conflicts with the existing title attribute.

There are no HTML or Attribute names with two words, so you are safe to instead make <site-nav> and button-title.