Como prefiro a metodologia BEM, quando comecei a trabalhar com o opencart, imediatamente encontrei coisas terríveis para mim, esses são seletores aninhados. Eles estão por toda parte! A partir do modelo padrão, terminando com quase todos os módulos e modelos de direitos autorais. Porque Eu acho que existem várias razões:
- O Opencart é criado por padrão em seletores aninhados, em um modelo e em um painel de administração.
- A maioria dos desenvolvedores que trabalham com opencart são desenvolvedores de back-end, eles apenas adotaram essa abordagem
- Há várias classes necessárias e um ID ao qual a funcionalidade padrão do opencart e os módulos do autor estão anexados, e todos os mesmos desenvolvedores de back-end e seus seguidores, por vários motivos, simplesmente não querem mudar nada e acompanhar o fluxo.
De maneira alguma eu quero dizer algo ruim para os desenvolvedores de back-end, mas muitos deles são realmente fracos no front-end e até no layout. Essa opinião foi formada com base na comunicação com eles, na colaboração e, em geral, na atividade deles em fóruns temáticos de opencart. Enfatizo que quero dizer o nicho dos desenvolvedores de opencart.
Crio modelos a partir do zero, de acordo com a metodologia BEM (o máximo possível dentro da estrutura do opencart) e posso afirmar com confiança que qualquer módulo começa com um meio chute, independentemente da marcação. O módulo que será discutido abaixo não precisa de nenhuma correção, tudo o que é necessário é simplificar o trabalho com ele e perceber a possibilidade de reutilizá-lo em outros projetos. Tomei este módulo como exemplo, pois é muito simples e não há necessidade de se distrair com um monte de código extra, mas ao mesmo tempo contém todos os problemas que o BEM resolve. Este é um módulo existente e existem muitos desses módulos e existem apenas modelos. Eu acredito que um exemplo de combate é melhor do que centenas de exemplos abstratos.
Para começar, descreverei a
essência do problema . Em uma das montagens domésticas de caixas abertas, um módulo de adesivo é integrado. Ele exibe o adesivo selecionado no ângulo especificado:
Superior esquerdo / superior direito / inferior esquerdo / inferior direitoNão há opções para adesivos, mas existem no máximo 4 posições:
Agora vamos ver a marcação e os estilos:
O que vemos:
- Todos os adesivos são incorporados no bloco de imagem .
- Apesar do fato de o bloco de imagem ter sido projetado logicamente para armazenar a imagem do produto, todos os estilos de adesivo estão vinculados a ele, e agora vemos todo o CSS e, especialmente, o aninhamento nas últimas linhas:
.image { position: relative; } .image .corner_0, .image .corner_1, .image .corner_2, .image .corner_3 { height: 57px; width: 58px; position: absolute; z-index: 998; } .image .corner_0 { left: 0px; top: 0px; } .image .corner_1 { right: 0px; top: 0px; } .image .corner_2 { left: 0px; bottom: 0px; } .image .corner_3 { right: 0px; bottom: 0px; } .box-product .image .corner_0 img, .box-product .image .corner_1 img, .box-product .image .corner_2 img, .box-product .image .corner_3 img { border: none; padding: 0px; } .box .box-product .image .corner_0 img, .box .box-product .image .corner_1 img, .box .box-product .image .corner_2 img, .box .box-product .image .corner_3 img { width: 60%; }
Se
.image .corner_2 parecia ainda menos aceitável, então
.box .box-product .image .corner_2 img já não parece tão otimista ... Em geral, podemos supor que em algum lugar teremos
.box-product sem um
.box pai e alguns estilos são usados, mas em algum lugar com os pais, mas aqui enfrentamos vários problemas:
- Se os adesivos forem movidos para fora da imagem .imagem , todos os estilos cairão e, se levarmos a imagem. Conosco e os colocarmos em outro lugar, aplique os estilos .image onde eles não forem necessários.
- Se você renomear repentinamente uma imagem, que logicamente não é um repositório de adesivos ou .box ou .box-product, que são ainda mais altos e certamente não diz que os adesivos estão anexados a eles, em nenhum desses casos, obteremos o resultado esperado .
- E se quisermos colocar .image em pé de igualdade com .box-product ? Mais uma vez, algo vai dar errado ...
- Existem muitos seletores repetidos nos quais apenas .corner_ # muda e se mudarmos repentinamente esse aninhamento ou quisermos transferir o código para outro modelo, teremos que alterá-lo em qualquer lugar, e ainda pode haver consultas de mídia, é apenas uma perda de tempo.
- Maior especificidade. Esse problema sempre se torna perceptível depois de um tempo e muitas vezes repousa sobre os ombros daqueles que não o criaram ...
Aqueles que estão familiarizados com a metodologia BEM há muito sabem disso, e aqueles que não estão familiarizados, acho que me deparei com mais de uma vez. Vamos tentar resolver esses problemas.
Como uma das principais tarefas é a capacidade de reutilizar o código, não podemos nomear nossos cantos de adesivos, como antes, porque talvez em outro projeto queremos que eles não estejam nos cantos, mas no meio de cada lado ou até alinhados, portanto seria lógico chamá-lo simplesmente de adesivo, respectivamente, mas para não depender de blocos externos, coloque nossos gravetos no recipiente de
adesivos , que pode ser um bloco independente ou uma mistura para qualquer bloco no cartão do produto. Resultado:
Externamente, obtivemos o mesmo resultado, mas a marcação e os estilos agora são diferentes:
.stickers { position: relative; } .sticker { } .sticker_position_0 { position: absolute; left: 0px; top: 0px; } .sticker_position_1 { position: absolute; right: 0px; top: 0px; } .sticker_position_2 { position: absolute; left: 0px; bottom: 0px; } .sticker_position_3 { position: absolute; right: 0px; bottom: 0px; } .sticker__img { border: none; padding: 0; }
Como eu disse anteriormente, o contêiner
.stickers pode ser uma unidade independente ou uma mistura para qualquer unidade no cartão do produto. Nesse caso, nós o misturamos ao bloco
.image dividindo suas atribuições.
Cada adesivo possui uma classe
.sticker , que contém estilos comuns a todas as varas, por exemplo, tamanho. Mas retiramos os estilos responsáveis pelo posicionamento no
modificador com a tecla position :
Nota:.sticker pode ser como um elemento
.stickers :
<div class="stickers"> <div class="stickers__sticker sticker sticker_position_2"> <img class="sticker__img " src="#"> </div> </div>
bem como um bloco independente para posicionamento de pontos sem
adesivos de contexto.
Agora, com um movimento do pulso, você pode colocar adesivos em qualquer lugar. Por exemplo, você pode tirar as varas da imagem e aplicar em todo o cartão do produto no recipiente do produto:
O ponto principal é que manipulações adicionais serão muito mais fáceis, e esse código, copiando-o para outro projeto, começará imediatamente a funcionar, resta apenas modificá-lo com as propriedades necessárias.
Ainda existe um problema não resolvido com esses seletores, que calaram os olhos anteriormente:
.box-product .image .corner_3 img {....} .box .box-product .image .corner_2 img {....}
Em geral, não encontrei o produto da caixa para ver o contexto do problema; portanto, não posso dizer com certeza se esse seletor é necessário ou não, mas a metodologia BEM não proíbe o aninhamento, se você não puder fazer isso sem ele. Com a marcação resultante, pelo menos você pode reduzir o seletor para 2 classes, o que permitirá uma interação mais precisa com os elementos e sem aumentar a especificidade, você pode redefinir ou adicionar estilos simplesmente organizando-os na ordem correta:
.box-product .sticker__img {...} .box .sticker__img {...}
Conclusão
Este é um pequeno pedaço de código que faz muito sentido.
Basta arrumar um bloco para facilitar o trabalho. É possível obter uma operação mais estável em partes, mesmo em um projeto totalmente lançado, e ainda mais para que você possa reescrever um módulo uma vez e facilitar a vida de todos.
Obrigado a todos que leram até o final e espero que meu artigo tenha sido útil.