Improve awkward styling and sentences in classList.mdx (#1185)

Author: marvin-j97

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

@@ -3,9 +3,9 @@ title: classList
 order: 1
 ---
 
-Solid offers two ways to set the class of an element: class and classList attributes.
+Solid offers two attributes to set the class of an element: `class` and `classList`.
 
-First, you can set class=... like any other attribute. For example:
+First, `class` can be set like other attributes. For example:
 
 ```tsx
 // Two static classes
@@ -27,7 +27,10 @@ Alternatively, the `classList` pseudo-attribute lets you specify an object, wher
 
 ```tsx
 <div
-	classList={{ active: state.active, editing: state.currentId === row.id }}
+	classList={{ 
+		active: state.active,
+		editing: state.currentId === row.id,
+	}}
 />
 ```
 
@@ -45,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 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>`.