I am studying the BEM methodology (well in the beginning, I assume), and I was in doubt about one aspect of it. I see that it aims to standardize the means of declaring the CSS of your page through the concepts of blocks, elements and modifiers, but a question arose.
Let's say I have a page with a simple structure (for example) divided into four sections: Header , sidebar , content , and footer . Imagine that for some reason all sections have Input fields with different goals (number, text, password), but they will receive the same CSS pattern (font, font color, . example , the following statement:
.header__inputLogin {}
.header__inputPassword {}
.sidebar_inputSearch {}
.content__inputNumber {}
.footer__inputContato {}
(Incidentally, using this pattern, writing the classes as a hyphen-separated name instead of capital letter could cause confusion with a modifier ? . Example: .header__input-login )
But if all elements will have exactly the same CSS properties, you could declare only input {} or .input-someName