Why are elements a thing with syntax?

[mindplay-dk]

I didn't find this covered in the FAQ, so:

I get the -- separator for modifiers is necessary - you need a reserved sequence to disambiguate from other word separators and prevent collisions.

What I don't get, is why do you need the __ separator to separate blocks and elements?

Let's say you have a panel block, and a panel__title element.

While still following BEM, I could instead choose to merely describe the same components as a panel block and a second panel-title block, right?

These would be functionally equivalent, and we're not supposed to rely on cascading rules in any case, right?

Which would seem to imply that the panel__title element would work just as well without the panel block as a parent.

So it seems the choice between the two is completely arbitrary. You don't strictly need to have any elements at all.

It also doesn't prevent collisions, except between my own panel__title and panel-title, which is totally ambiguous, and I'd never have those in the first place. My panel__title element or panel-title block can both collide with yours - we'll need namespace prefixes to prevent that case either way.

The only function I can see this having, is communicating intent - the use of the __ could suggest "you're supposed to use these together", but again, block and block-title suggest this just as well, and it's more idiomatically what CSS authors everywhere have been doing practically forever.

On top of which, following that convention only suggests a direct relationship between a parent and child - it does not indicate or suggest any internal parent/child relations between individual elements, so you'll need a style guide for the precise structure of complex components anyway.

Am I missing something?

[garrypolley]

I think there are might be a misunderstanding of some of the goals of BEM.

From the documentation on why you would use it:

No matter what methodology you choose to use in your projects, you will benefit from the advantages of more structured CSS and UI. Some styles are less strict and more flexible, while others are easier to understand and adapt in a team.

Before answering specific questions the main reason to use BEM is for a common language to easily talk about CSS and also how the semantic styling relates to the project being worked on.

While still following BEM, I could instead choose to merely describe the same components as a panel block and a second panel-title block, right?

This is true, however, because panel is a block element, it would be very confusing for other developers working with the code to have another block level element that uses the panel name as well.

The panel__title would only be expected to be used within a panel. So if I see a panel__title I expect to see a panel somewhere in the encasing DOM nodes.

These would be functionally equivalent, and we're not supposed to rely on cascading rules in any case, right?

Relying on cascading rules can be very helpful, even in BEM. There are times and places to still rely on the cascade part of CSS. I think this is one area of general confusion in BEM, a lot of folks come to a conclusion to not use Cascade styles. The rule of thumb (for projects I have worked on) is to not make the cascading part a very specific selector, so it's easy to override in the panel__ELEMENT if needed.

For example, all elements of the panel may have black text, but in the panel__title you want it to have a black background and white text. Cascading from block level down to elements is still perfectly fine.

Which would seem to imply that the panel__title element would work just as well without the panel block as a parent

While technically true, this is not in the spirit of BEM. The goal of BEM is to have a semantic language to talk about the UI. If a panel__title can be used outside of a panel, the common semantic language around UI elements because very difficult to share between developers, let alone designers who are trying to make development easier.

So it seems the choice between the two is completely arbitrary. You don't strictly need to have any elements at all.

The choice isn't so much arbitrary, as making a choice to help readability and understandability (if that's a word) of the overall CSS.

I'm pretty sure the reason for __ to separate blocks and elements is to make it easier to identify parts of the CSS. Most of all using the __ and -- make it much easier to write linters and automated tooling to help manage large amounts of CSS. By not reserving the - people can still have blocks that are multi-named. For example popup-modal, (debatibly calling it modal would be fine, but that's not the point).

Am I missing something?

I've tried to answer the context that I think you are missing.

A great resource around CSS, that uses a lot of the same principles as BEM, is https://cssguidelin.es/ . It's a long read, but I think well worth it, and goes into detail about some of the philosophy behind ides that are also in BEM.