CSS all elements rule *

, , ,
1

Is there any reason to have this CSS rule? I am currently trying to use some defaults css values for html elements in a custom component I am injecting but they all get overrode by this rule.

I would love to not have to add a class name just to apply the default css of each element and couldnt find a way to override this rule with none values.

* {
    border: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

I didn't see any noticeable break if we move it to body instead of applying to everything.

2

Hi! Resetting the styles for all elements using * is a pretty standard CSS practice for normalising default styles and making sure you start with a consistent, blank slate, consistent box sizing and without any cross-browser differences. It usually shouldn't have an impact because you typically override it with more specific styles.

Which elements are you adding that should just inherit the browser's default styling? I tried to make sure to pick reasonable defaults for the most common elements, but I'm happy to add more if there's something missing.

3

At the moment I think the lack of margin for: <hn> elements and padding for <ul>

But makes sense, just wanted to make sure there wasn't an option to override those directly before I added those rules directly to each element.

4

Ah okay – and yes, I can probably just add these back for the next release.

In the meantime, you could also use the global_css setting in your prodigy.json and override those elements globally (so you don't have to do it on every instance). For example:

{
    "global_css": ".prodigy-content ul { margin-bottom: 3rem }"
}

It'd suggest prefixing it with .prodigy-content (the container of the annotation card) to make sure you're not introducing any unintended side-effects for the whole page layout.