Reusable elements in the CSS BEM Methodology

Question

I am studying about the BEM methodology (right at the beginning, I assume), and I was in doubt about one aspect of it. I see that it aims to standardize the CSS declaration means of your page through the concepts of blocks, elements and modifiers, but a doubt arose me.

Let’s say I have a simple page structure (for example), divided into four sections: Header, sidebar, content and footer. Imagine that, for some reason, all sections have fields Input with different goals (number, text, password), but which will receive the same CSS pattern (font, font color, centered text, etc.). From what I understand, the statement would be, for example, the following:

.header__inputLogin {}
.header__inputPassword {}
.sidebar_inputSearch {}
.content__inputNumber {}
.footer__inputContato {}

(By the way, using this pattern, writing the classes as the name separated by a hyphen instead of the maíuscula letter could generate 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 else, .input-some {} , in order to reduce code redundancy and improve maintainability? In addition, it is recommended to use SASS @extends in modifiers for the same purpose (reduce code redundancy)?

Thank you!

Answer 1

Like the reply of Luiz Felipe, who suggested RSCSS, You can consider your Input as an individual component, a "block". This way, you manage these components with a clearer organization.

On this boat, perhaps we should talk about methodologies such as Atomic Design, which deals with this "cellular" division, organizing its system from reusable smaller parts.