Visual Hierarchy on Naming Page

[ddturner]

Hi -- apologies for just jumping in as a stranger. But as an information and UX designer, I was interested in learning about BEM but then very confused by the Naming page. The problem is that you seem to have a conceptual hierarchy (top level: Block, Element, Modifier; each has lower levels of Naming, HTML, CSS) but the top level names are presented at the same font size as the lower levels -- plus, the colorizing of the top level names with different colors works against the principles of gestalt theory, which show that humans group things of the same color, separate things of different colors.

Possible solution: bump the Naming, HTML, and CSS down to

, set Block, Element, and Modifier to the same color (doesn't have to be the same color as the body text!).

[floatdrop]

@ddturner thanks for the feedback. In fact lower levels was a bit smaller, but not quite visible. I done some retouches in naming page – hope this looks better.