BEM

BEM provides solutions for all frontend technologies (CSS, JavaScript, templating) and is applicable anywhere. The key feature of BEM is block independence, ensuring blocks can be placed anywhere on a page without being affected by their surroundings. This makes maintaining and combining blocks easier.

Prefixing modifier CSS classes with their block name ensures the modifier affects only the intended block, especially when multiple blocks or elements are mixed at the same DOM node. It also helps with CSS specificity and makes the block structure clearer in the markup.

Yes, while BEM generally recommends avoiding nested selectors, it is reasonable for a block modifier to affect its elements since elements are block-dependent. For example, a Christmas-themed block can have its button element styled accordingly.

Global modifiers can cause specificity issues, make it difficult to control the order of styles, and lead to inconsistencies when combined with multiple blocks. BEM recommends using standalone blocks with mixes instead of global modifiers to avoid these problems.

Combining block and prefixed modifier classes ensures the core block styles are always applied, even when modifiers are dynamically added or removed with JavaScript. This approach avoids redundancy and simplifies maintenance.

Using CSS classes for blocks is more flexible and allows for natural representation of block mixes. Custom tags may not always be suitable (e.g., for link or input blocks) and do not support mixing blocks as easily as classes do.