Share
Vous êtes-vous déjà demandé comment un grand site comme Tuts + maintient ses CSS, HTML et JavaScript dans un développement et une itération continus? Je vais vous montrer le processus que nous avons mis en place pour tout garder propre et maintenable.
La première étape de ce processus a été de trouver un moyen de construire la grande quantité de CSS dont nous avons besoin et qui ne finira pas inévitablement par le chaos..
Traditionnellement, avec CSS, vous construisez des styles selon vos besoins et vous efforcez de rendre vos sélecteurs largement applicables afin qu'ils puissent être réutilisés sur tout le site. Par exemple, voici quelques règles CSS simples qui ne seraient pas déplacées dans la plupart des feuilles de style:
h1 taille de la police: 22px; .soustitle taille de la police: 18px;
Si vous devez remplacer ces sélecteurs dans une partie spécifique d'une page, vous pouvez utiliser des règles imbriquées pour construire des sélecteurs qui ciblent des éléments plus spécifiques:
.en-tête de site h1 taille de la police: 40px; .site-header .subtitle taille de la police: 28px; .site-header a.navigation color: # 136FD2…
Cette approche semble intuitivement correcte, mais elle peut poser des problèmes importants une fois que vous accédez à un site de plusieurs pages et sur lequel plusieurs développeurs travaillent actuellement..
Qu'est-ce qui se passe quand on change le style de h1 ou .Sous-titre au niveau mondial? taille de police est déjà remplacé par un style plus spécifique, mais si nous ajoutons un poids de la police ou hauteur de la ligne ce ne sera pas. Toute modification apportée aux styles globaux peut se répercuter et affecter des styles plus spécifiques d'une manière imprévisible, sans une connaissance intime de tous les styles du site..
Plus le nombre de styles construits de cette manière est élevé, plus les «effets secondaires» des styles CSS en interaction sont prononcés, ce qui nécessite des essais fastidieux, et il en résulte une perte de productivité et un plus grand nombre de bugs se propageant jusqu'à la production..
Pour éviter ce problème, nous avons adopté une approche de CSS basée sur la méthodologie BEM. Au lieu de définir des styles qui s'appliquent globalement, tous les styles sont regroupés en "blocs" autonomes au moyen d'une convention de dénomination. Un «bloc» est défini plus ou moins comme une unité de contenu autonome potentiellement réutilisable (bien qu'il ne soit pas obligatoire de le réutiliser)..
Par exemple, jetons un coup d’œil au bloc «Featured-sections»:
Selon notre convention de nommage, ce bloc a une racine div élément avec le nom de la classe sections en vedette. Il contient des éléments avec des noms de classe tels que vedette-sections__title et sélectionnée-sections__section-lien.
Nous utilisons une convention de dénomination correspondante pour notre code source, de sorte que tous les styles de cette section sélectionnée bloc sont stockés dans modules / Featured_section.sass:
.section des marges en vedette: 0 0 $ gutter-width 0 padding-top: 8px border-top: 4px solid # dae1e5 .featured-sections__title couleur: # 8fa6b3 police: bold 14px / 1.2em $ font
Cette convention de nommage garantit que les styles ne sont plus en conflit et ne se mêlent pas. Tant que notre convention de dénomination est respectée, avec le nom de bloc au début de chaque nom de classe, il est impossible pour un style d'affecter quelque chose en dehors de son propre bloc..
Il est également très facile de savoir où chercher dans la base de code les styles correspondant à un élément. Vous pouvez simplement regarder le nom de la classe de l'élément et connaître le nom de la feuille de style à ouvrir.
Nous avons choisi d'aller plus loin et d'appliquer cette convention de nommage à nos points de vue également. Chaque bloc a une vue partielle avec le même nom, stockée sous vues / modules. Par exemple, la vue HTML pour notre sections en vedette bloquer des vies dans views / modules / _featured_sections.html.slim:
De la même manière qu'avoir une convention de dénomination pour nos fichiers CSS facilite la recherche d'un style CSS, cette convention de dénomination pour nos vues facilite la recherche du code de vue. Cela s'avère pratique lorsque vous visualisez une page dans un navigateur et remarquez une partie spécifique nécessitant des modifications. Vous pouvez simplement faire un «élément d'inspection» et utiliser le nom du bloc clairement visible dans la classe CSS d'un élément pour vous aider à passer directement au fichier de vue correspondant..
Nous avons également adopté les mêmes conventions de nommage pour notre code JavaScript, avec l'aide de Backbone.js..
Chaque bloc nécessitant un comportement JavaScript obtient un objet de vue Backbone en utilisant le même nom de bloc:
Accentsconagua
La classe window.AccountHeader étend les événements Backbone.View: 'change .account-header__mobile-menu-select': 'mobileMenuChange' mobileMenuChange: -> document.location = @_selectedOption (). data ('url') _selectedOption: -> @ $ 'option: sélectionné'Nous avons écrit du code de chargement de vue qui est appliqué lors du chargement de page, de sorte que la vue Backbone appropriée est automatiquement chargée pour chaque élément avec une classe CSS correspondant à une liste de noms de blocs avec JS associé..
Nous utilisons également la même convention de dénomination de fichier pour notre code JavaScript, ce qui donne la structure d'un bloc complet ressemblant à ceci:
Je recommande fortement cette approche pour tout projet. Je pense que cela est inestimable lorsque vous travaillez sur un projet volumineux, et même si vous travaillez sur un site beaucoup plus petit, il n'y a vraiment aucun inconvénient à structurer votre code frontal de manière modulaire..
Cela dit, vous pouvez avoir des difficultés à utiliser cette stratégie si vous avez déjà une quantité importante de styles CSS globaux ou si vous utilisez des bibliothèques CSS telles que Twitter Bootstrap. Étant donné que les styles BEM utilisent un seul nom de classe comme sélecteur, ils ont une très faible valeur de «spécificité» CSS et ont tendance à être piétinés par les styles CSS globaux qui comportent souvent plusieurs niveaux de sélecteurs imbriqués, ainsi que les noms et ID de balises..
Il est certainement encore possible de passer d'un style CSS global à un style BEM plus modulaire, et je dirais que cela en vaut vraiment la peine à long terme. Cependant, attendez-vous à avoir un peu plus de difficulté à créer vos styles BEM pendant un certain temps et soyez prêt à vivre avec l'ajout d'au moins quelques projets temporaires. !important déclarations tout au long de votre CSS, jusqu'à ce que vous puissiez vous débarrasser complètement de vos styles globaux.
