0

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!

2
  • 1
    Esse post ajuda? Commented 19/01/2018 às 14:14
  • Hmm, achei a metodologia consideravelmente mais limpa e prática. Obrigado pela dica! Commented 19/01/2018 às 14:57

1 Resposta 1

-1

Como a resposta do Luiz Felipe, que sugeriu RSCSS, você pode considerar seu Input como um componente individual, um "bloco". Desta forma, você administra esses componentes com uma organização mais clara.

Nesse barco, talvez caiba falar de metodologias como o Atomic Design, que versa a respeito dessa divisão "celular", organizando seu sistema a partir de partes menores reutilizáveis.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .