Docs: Clarify class naming convention. (#15764)

The paragraph description is difficult to parse, even if you already understand the intent behind it. A straight-forward example using generic labels is a much clearer way to communicate.

docs/contributors/coding-guidelines.md

@@ -8,7 +8,12 @@ This living document serves to prescribe coding guidelines specific to the Guten
 
 To avoid class name collisions, class names **must** adhere to the following guidelines, which are loosely inspired by the [BEM (Block, Element, Modifier) methodology](https://en.bem.info/methodology/).
 
-All class names assigned to an element must be prefixed with the name of the package, followed by the name of the directory in which the component resides. Any descendent of the component's root element must append a dash-delimited descriptor, separated from the base by two consecutive underscores `__`. The root element is considered to be the highest ancestor element returned by the default export in the `index.js`. Notably, if your folder contains multiple files, each with their own default exported component, only the element rendered by that of `index.js` can be considered the root. All others should be treated as descendents.
+All class names assigned to an element must be prefixed with the name of the package, followed by a dash and the name of the directory in which the component resides. Any descendent of the component's root element must append a dash-delimited descriptor, separated from the base by two consecutive underscores `__`.
+
+* Root element: `package-directory`
+* Child elements: `package-directory__descriptor-foo-bar`
+
+The root element is considered to be the highest ancestor element returned by the default export in the `index.js`. Notably, if your folder contains multiple files, each with their own default exported component, only the element rendered by that of `index.js` can be considered the root. All others should be treated as descendents.
 
 **Example:**