Should I specify such a class in the markup for readability?

Question

BEM

I created a button, it is an element of the main header block. next, I create a shortened title, after which I create a modifier that is more for the readability of the markup itself than I will use it in styling. The question is, does it make sense to indicate that the button is hidden on desktops, but appears when it is reduced to tablets or phones? Just write that btn-burger--hiddenit is not quite correct because it is hidden only for large screens.

<button type="button" class="main-header__btn-hamburger btn-hamburger btn-hamburger--desktop-hidden">

Answer 1

Simply saying that btn-burger--hidden is not entirely correct as it is only hidden on large screens.

If I understand the question correctly, then in mind hidden is a block modifier, and not its element like you have. Because it describes the state and behavior of the block, and is not an integral part of it.
Therefore, it would be correct to write like this: btn-burger _ hidden. There is a main btn-burger block whose behavior at various resolutions is described by the _hidden modifier. Therefore, we write the .btn-burger class to the styled block, and where it needs to be hidden, let's add the _hidden modifier class in the media query for wide screens. For example :
In general, of course, you can write and name classes as you like, but BEM is an agreement to improve mutual understanding between developers, so btn-burger--hidden personally tells me that this is some kind of hidden block. But writing btn-burger _ hidden will tell me that these properties make the block hide under these circumstances.