BEM style string

In this medium-level challenge, you'll implement BEM<B, E, M> which generates BEM-style CSS class name strings from a block, an array of elements, and an array of modifiers.

Detailed Explanation

type BEM<
  B extends string,
  E extends string[],
  M extends string[]
> = `${B}${E extends [] ? '' : `__${E[number]}`}${M extends [] ? '' : `--${M[number]}`}`

How it works:

• The type takes three parameters: B (block string), E (element string array), and M (modifier string array)
• E extends [] checks if the element array is empty. If so, no element suffix is added; otherwise __${E[number]} appends each element with the __ separator, where E[number] converts the array into a union of its members
• M extends [] similarly checks if the modifier array is empty. If so, no modifier suffix is added; otherwise --${M[number]} appends each modifier with the -- separator
• Template literal types with unions automatically distribute, so when both E and M have multiple members, all combinations are generated as a union of strings
• For example, BEM<'btn', ['price'], ['warning', 'success']> produces 'btn__price--warning' | 'btn__price--success'

This challenge helps you understand template literal types combined with indexed access types and union distribution, and how to apply these concepts in real-world scenarios.