Best Practices

Follow these best practices when writing or reviewing userstyles.


Consider languages with longer words

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

Styling existing Scratch UI

Avoid targeting hashed class names

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;

Avoid !important unless absolutely necessary

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

Styling addon UI elements

Begin addon-defined class names with sa-

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.