How to create a robust and logic class naming system in WordPress theme developing?

The more I read the codex, the less I understand the global logic.

That’s because there is no global logic. The system you are trying to understand simply does not exist.

CSS classes are just CSS classes, the naming scheme itself doesn’t confer special abilities, and most of the HTML classes WordPress uses are there for historical reasons or chosen by a contributor a long time ago. I think you’re reading more into the CSS class names than you should.

Some HTML classes are used for content to indicate alignment, and there are blocks that have classes you can match against to style, likewise with the body and post classes, but wether you use them or not is up to you as a frontend developer. There’s no structured system that needs to be followed.

You might find hints of one in the default themes, but this is specific to those individual themes. It’s usually because the people who wrote them preferred a particular style, not because WordPress provides or requires one.

The closest to a systematic naming system can be found in two places:

  • The CSS variable names that core added very recently
  • Gutenberg block editor components

In those cases, knowing the patterns used is only useful if you intend to modify core itself, or override one of those variables. Gutenberg uses a BEM style class naming scheme internally, but you are under no obligation to follow it, and the rest of core doesn’t either.

On the frontend, style the classes WP provides, otherwise use whatever class naming system you prefer.

If you’re asking because you’re writing a plugin that exposes frontend items, then it doesn’t matter. Be internally consistent with whatever you choose, but keep in mind it is your choice.