Estou estudando sobre a metodologia BEM (bem no começo, assumo), e fiquei em dúvida sobre um aspecto da mesma. Vejo que ela visa padronizar os meios de declaração do CSS de sua página através dos conceitos de blocos, elementos e modificadores, mas uma dúvida me surgiu.
Digamos que possuo uma página com estrutura simples (para efeito de exemplo), dividida em quatro seções: Header, sidebar, content e footer. Imagine que, por algum motivo, todas as seções possuam campos Input com objetivos diferentes (number, text, password), mas que receberão o mesmo padrão CSS (fonte, cor da fonte, texto centralizado, etc). Pelo que entendi, a declaração seria, por exemplo, a seguinte:
.header__inputLogin {}
.header__inputPassword {}
.sidebar_inputSearch {}
.content__inputNumber {}
.footer__inputContato {}
(Aliás, utilizando esse padrão, escrever as classes como o nome separado por um hífen ao invés de letra maíuscula poderia gerar confusão com um modificador? Exemplo: .header__input-login)
Mas se todos os elementos vão possuir exatamente as mesmas propriedades CSS, poderia declarar somente input {} ou, então, .input-algumNome {} , a fim de reduzir a redundância de código e melhorar a manutenabilidade? Além disso, é recomendado utilizar os @extends do SASS em modificadores com o mesmo objetivo (reduzir redundância do código)?
Obrigado!