Update src/routes/reference/jsx-attributes/classlist.mdx

Co-authored-by: Sarah <hello@sarahgerrard.me>

Author: marvin-j97

src/routes/reference/jsx-attributes/classlist.mdx

@@ -48,6 +48,9 @@ setClasses((c) => ({ ...c, active: true }))
 <div classList={classes()} />
 ```
 
-It's also possible, but dangerous, to mix `class` and `classList`. The main safe situation is when `class` is set to a static string (or nothing), and `classList` is reactive (`class` could also be set to a static computed value as in `class={baseClass()}`, but then it should appear before any classList pseudo-attributes). If both `class` and `classList` are reactive, you can get unexpected behavior: when the `class` value changes, Solid sets the entire `class` attribute, so it will overwrite any toggles made by `classList`.
+While possible, mixing `class` and `classList` in Solid can lead to unexpected behavior.
+The safest approach is to use a static string (or nothing) for `class` and keep `classList` reactive.
+You can also use a static computed value for class, such as `class={baseClass()}`, however you must make sure it comes before any `classList` pseudo-attributes.
+If both `class` and `classList` are reactive, changes to `class` will overwrite the entire `class` attribute, potentially undoing any updates made by `classList`.
 
 Because classList is a compile-time pseudo-attribute, it does not work in a prop spread like `<div {...props} />` or in `<Dynamic>`.