Comme je préfère la méthodologie BEM, quand j'ai commencé à travailler avec opencart, j'ai immédiatement rencontré des choses terribles pour moi, ce sont des sélecteurs imbriqués. Ils sont partout! À partir du modèle par défaut, se terminant par presque tous les modules et modèles de droits d'auteur. Pourquoi Je pense qu'il y a plusieurs raisons:
- Opencart est construit par défaut sur des sélecteurs imbriqués, à la fois un modèle et un panneau d'administration.
- La plupart des développeurs qui travaillent avec opencart sont des développeurs back-end, ils ont juste repris cette approche
- Il existe un certain nombre de classes nécessaires et un identifiant auxquels sont liées à la fois la fonctionnalité standard d'opencart et les modules de l'auteur, et tous les mêmes développeurs back-end et leurs followers, pour diverses raisons, ne veulent tout simplement rien changer et suivre le flux.
Je ne veux en aucun cas dire quoi que ce soit de mauvais envers les développeurs back-end, mais beaucoup d'entre eux sont vraiment faibles dans le front-end et même dans la mise en page. Cette opinion s'est formée sur la base de la communication avec eux, de la collaboration et, en général, de leur activité sur les forums thématiques de l'opencart. J'insiste sur le fait que je parle du créneau des développeurs d'opencart.
Je crée des modèles à partir de zéro selon la méthodologie BEM (autant que possible dans le cadre d'opencart) et je peux dire avec confiance que tout module commence par un demi-coup de pied indépendamment du balisage. Le module qui sera discuté ci-dessous ne nécessite aucune correction, il suffit de simplifier son utilisation et de réaliser la possibilité de le réutiliser dans d'autres projets. J'ai pris ce module comme exemple, car il est très simple et il n'est pas nécessaire d'être distrait par un tas de code supplémentaire, mais en même temps, il contient tous les problèmes que BEM résout. C'est un vrai module existant et il y a beaucoup de tels modules, et il n'y a que des modèles. Je crois qu'un exemple de combat est meilleur que des centaines d'abstraits.
Pour commencer, je décrirai l'
essence du problème . Dans l'un des assemblages de cartouches domestiques, un module autocollant est intégré. Il affiche l'autocollant sélectionné dans l'angle spécifié:
En haut à gauche / en haut à droite / en bas à gauche / en bas à droiteIl n'y a pas d'options pour les autocollants, mais il y a un maximum de 4 positions:
Voyons maintenant le balisage et les styles:
Que voyons-nous:
- Tous les autocollants sont intégrés dans le bloc d' image .
- Malgré le fait que le bloc d' image est logiquement conçu pour stocker l'image du produit, tous les styles d'autocollants y sont liés, et regardent maintenant l'ensemble du CSS et en particulier l'imbrication dans les dernières lignes:
.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%; }
Si
.image .corner_2 semblait encore moins acceptable, alors
.box .box-product .image .corner_2 img ne semble déjà pas aussi optimiste ... En général, nous pouvons deviner que quelque part nous aurons
.box-product sans parent
.box et certains styles sont utilisés, mais quelque part avec les parents, d'autres, mais ici, nous sommes confrontés à un certain nombre de problèmes:
- Si les autocollants sont déplacés en dehors du .image , tous les styles tomberont, et si nous prenons le .image avec nous et les plaçons dans un autre endroit, appliquons ensuite les styles du .image là où ils ne sont pas nécessaires.
- Si vous renommez soudainement une image, qui n'est logiquement pas un référentiel d'autocollants ou de produit .box ou .box, qui sont encore plus élevés et ne dit certainement pas que les autocollants y sont attachés, dans aucun de ces cas, nous n'obtiendrons pas le résultat attendu .
- Et si nous voulons mettre .image au même niveau que .box-product ? Encore une fois, quelque chose va mal se passer ...
- Il existe de nombreux sélecteurs répétitifs dans lesquels seul .corner_ # change et si nous modifions soudainement cette imbrication ou si nous voulons transférer le code dans un autre modèle, nous devrons le changer partout, et il peut y avoir des requêtes multimédias, ce n'est qu'une perte de temps.
- Spécificité accrue. Ce problème devient toujours perceptible après un certain temps et repose souvent sur les épaules de ceux qui ne l'ont pas créé ...
Ceux qui connaissent la méthodologie BEM le savent depuis longtemps et ceux qui ne le sont pas, je pense l'avoir rencontré plus d'une fois. Essayons de résoudre ces problèmes.
Étant donné que l'une des tâches principales est la possibilité de réutiliser le code, nous ne pouvons pas nommer notre coin autocollants, comme auparavant, car peut-être que dans un autre projet, nous voulons qu'ils ne soient pas dans les coins, mais au milieu de chaque côté ou même alignés, donc il serait logique de nommer, respectivement, simplement un autocollant, mais afin de ne pas dépendre de blocs externes, mettez nos bâtons dans le conteneur d'
autocollants , qui peut être soit un bloc indépendant, soit un mélange pour n'importe quel bloc de la carte du produit. Résultat:
Extérieurement, nous avons obtenu le même résultat, mais le balisage et les styles sont désormais différents:
.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; }
Comme je l'ai dit plus tôt, le conteneur
.stickers peut être soit une unité indépendante, soit un mélange pour n'importe quelle unité de la fiche produit. Dans ce cas, nous l'avons mélangé au bloc
.image en divisant leurs affectations.
Chaque autocollant a un
.sticker de classe, qui contient des styles communs à tous les bâtons, par exemple, la taille. Mais nous supprimons les styles responsables du positionnement dans le
modificateur avec la touche de position :
Remarque:.sticker peut être un élément
.stickers :
<div class="stickers"> <div class="stickers__sticker sticker sticker_position_2"> <img class="sticker__img " src="#"> </div> </div>
ainsi qu'un bloc indépendant pour le placement des points sans
autocollants de contexte.
Maintenant, d'un simple mouvement du poignet, vous pouvez mettre des autocollants n'importe où. Par exemple, vous pouvez retirer les bâtons de l'image et appliquer à la carte de produit entière dans le conteneur de produit:
Le point principal est que les manipulations ultérieures seront beaucoup plus faciles, et ce code, juste en le copiant dans un autre projet, commencera immédiatement à fonctionner, il ne reste plus qu'à le modifier avec les propriétés nécessaires.
Il y a toujours un problème non résolu avec ces sélecteurs, qui callaient les yeux plus tôt:
.box-product .image .corner_3 img {....} .box .box-product .image .corner_2 img {....}
En général, je n'ai pas trouvé de boîte-produit pour voir le contexte du problème, donc je ne peux pas dire avec certitude si un tel sélecteur est nécessaire ou non, mais la méthodologie BEM n'interdit pas l'imbrication, si vous ne pouvez pas vous en passer. Avec le balisage résultant, vous pouvez au moins réduire le sélecteur à 2 classes, ce qui permettra une interaction plus précise avec les éléments et sans augmenter la spécificité, vous pouvez soit redéfinir ou ajouter des styles simplement en les organisant dans le bon ordre:
.box-product .sticker__img {...} .box .sticker__img {...}
Conclusion
Il s'agit d'un très petit morceau de code qui a beaucoup de sens.
Il suffit de ranger un bloc pour le rendre plus facile à travailler. Il est possible d'obtenir un travail pièce par pièce plus stable, même sur un projet entièrement lancé, et encore plus pour pouvoir réécrire un module une fois et faciliter la vie de chacun.
Merci à tous ceux qui ont lu jusqu'à la fin et j'espère que mon article a été utile.