Best Practices

Follow these best practices when writing or reviewing userstyles.

Internationalization

Remember that in some languages, UI elements such as buttons may be narrower or wider.

The Scratch project editor usually contains class names that follow the class_name_{hash} format. For example, green-flag_green-flag_1kiAo.

As the hashes might change in the future and may differ between Scratch forks, you should avoid using them in userstyles.

/* Don't do this: */
.green-flag_green-flag_1kiAo {
  visibility: hidden;
}

/* Do this instead: */
[class*="green-flag_green-flag_"] {
  visibility: hidden;
}

If possible, use CSS specificity features to make your selectors more specific, instead of using !important.

We always use kebab-case when defining our own class names.

We recommend that addon-defined class names begin with sa- to avoid potential name collisions with Scratch or other extensions.

It is also recommended to include the addon ID (or part of it) in the class name.