Peu de gens conçoivent maintenant un site Web à partir de zéro - pourquoi, s'il existe un tas d'excellents cadres CSS? Le plus populaire d'entre eux est le bootstrap. Néanmoins, tout le monde veut que le site soit unique, pas comme les autres - par conséquent, ils collent souvent (au mieux de leurs capacités) un modèle gratuit ou payant, ou leur propre kit d'interface utilisateur.
Je veux parler de certains problèmes qui se produisent (malheureusement) même dans les modèles payants, sans parler de mes solutions. Le texte ci-dessous ne prétend pas être unique et ne devrait pas intéresser les développeurs expérimentés, mais il peut être utile pour les développeurs front-end débutants, les concepteurs de mise en page et les développeurs Web à large base. Donc, si vous êtes toujours intéressé, bienvenue!
Nous avons donc historiquement ...
En règle générale, si un site est développé depuis longtemps, les exigences d'apparence changent régulièrement. Si, en plus de cela, les programmeurs changent régulièrement, le code (dans notre cas, css) se transforme en désordre. Quelque part des classes bootstrap, parfois des classes de modèles, tout cela est dilué avec des béquilles de plusieurs générations de concepteurs de mise en page et assaisonné de styles en ligne. Les tentatives de changer quelque chose ou d'en ajouter un nouveau mènent à de longs jeux magiques dans "devinez quelles classes vous devez mettre dans ce bloc html!". Je veux tout jeter et le réécrire à partir de zéro. Mais ici, en fait, j'ai cherché juste à ajouter rapidement de nouveaux champs au formulaire, j'ai assez de tâches par le backend ... En fait, nous allons considérer la raison qui m'a poussé à écrire cet article, dans le premier exemple.
Taille d'entrée
Nous avons donc une vue standard des éléments de formulaire, que nous voulons modifier un peu, par exemple, réduire la hauteur. Comment procéder pour que les entrées correspondent à la baleine de l'interface utilisateur?
Vous pouvez insérer des styles en ligne! Ce sera tellement amusant - alors copiez tous ces chaussons dans chaque entrée!Quelqu'un va rire, mais je vois régulièrement de telles décisions. Heureusement pas dans ce cas, mais c'est le cas. Que se passe-t-il si nous faisons cela? Vous devrez copier de longues descriptions de style dans chaque entrée, gonfler le modèle et le rendre moins lisible.
Écrivons notre propre classe, dans laquelle nous décrirons les paramètres de hauteur nécessaires, et en même temps changeons la taille de la police!Oui C'est lui. "H40_px-16." D'après le nom de la classe, il est immédiatement clair ce qu'il fait J'ai rencontré quelque chose comme ça quand j'essayais de comprendre pourquoi les nouvelles entrées sont un peu plus épaisses que nécessaire. J'ai regardé le code dans le même modèle et je l'ai trouvé. Quelles conséquences nous attendent dans ce cas? En principe, rien de critique. Dans chaque classe d'éléments de formulaire, en plus de «form-control», nous ajouterons «h40_px-16». Besoin de se souvenir ou de documenter. Et s'il faut faire tous les éléments du formulaire avec un fond vert? Ajoutez simplement une autre classe, «b_g». Et puis un de plus ...
Étendre les classes existantes pour les éléments de formulaire?Il est extrêmement rare de voir cette solution, bien qu'il me semble qu'elle soit en surface. Et à mon avis - le plus correct. Cela nous permet d'économiser sur le nombre de classes qui doivent être spécifiées dans l'élément, mais surtout, cela réduit la quantité de perplexité parmi les développeurs qui essaient de travailler avec ce code. Si la modification requise affecte tous les éléments de ce type, nous ajoutons simplement notre propre ensemble de règles pour le "contrôle de formulaire", et toutes les entrées changent leur hauteur, leur police, leur arrière-plan, etc.
Solution personnalisée
Conformément au kit d'interface utilisateur, vous devez ajouter une solution innovante qui n'a jamais été vue auparavant sur le site! Et c'est écrit à partir de zéro. Vraiment? Non, je peux autoriser cela si vous utilisez pureCSS - un cadre bon mais minimaliste - et que vous devez implémenter quelque chose qui n'y est pas inclus. Mais si vous utilisez le bootstrap - avec une probabilité extrêmement élevée, il vous suffit de relire la documentation.
Regardons une situation extrêmement négligée dans laquelle le site a sa propre implémentation de badges. Avec bootstrap connecté. Et donc, l'un des développeurs qui n'a pas participé à la création de ces badges devait les ajouter quelque part sur le site.
- Tout d'abord, il regarde la documentation de bootstrap et copie la solution à partir de là.
- Voyant que visuellement cela ne correspond pas à la baleine de l'interface utilisateur, il cherche de la documentation sur la solution innovante utilisée.
- Si cette documentation ne l'est pas (et ce n'est probablement pas le cas), il recherche dans le code des exemples de mise en œuvre.
- Après avoir copié la classe beijik souhaitée, il voit que le badge est maintenant correct, mais bleu, et il a besoin de rouge.
- Après avoir trouvé le fichier css qui décrit les classes pour l'interface utilisateur de la baleine, il détecte que la couleur rouge n'a pas été posée, et en soupirant ajoute la classe "beijik-red"
Maintenant, comparons cela avec la situation où la classe de badge a été redéfinie pour sa propre implémentation de badge, et l'implémentation de couleur a été décrite dans la documentation:
- Tout d'abord, il regarde la documentation de bootstrap et copie la solution à partir de là.
- La documentation trouve comment ajouter du rouge: badge-rouge
Ici, nous avons examiné un exemple où il est nécessaire non seulement de changer la solution prête à l'emploi, mais aussi de l'étendre, car nous ne sommes pas satisfaits de la fonctionnalité prête à l'emploi (les badges dans bootstrap3 n'ont pas de couleur personnalisée). Dans ce cas, tout de même, la meilleure solution reste de remplacer la classe existante, et seulement après cela - ajoutez la vôtre.
Bien sûr, les exemples que j'ai donnés sont assez raffinés, mais je suis vraiment tombé sur une situation où j'ai d'abord cherché une solution dans la documentation de bootstrap, puis dans la documentation du modèle utilisé sur le site (heureusement, il y avait de la documentation), puis j'ai cherché des fichiers css où et comment le comportement standard a été redéfini et comment l'analogue a été implémenté - mais à la fin j'ai écrit mes propres styles afin de rendre (!) les possibilités qui étaient à l'origine.
Si vous ne voulez pas blesser vos collègues et que vous souhaitez accélérer le travail de l'équipe dans son ensemble, respectez les règles suivantes lors de la création de vos propres styles pour le site:
- Vérifiez comment les fonctionnalités nécessaires sont implémentées dans le cadre utilisé (vous vous en souvenez - très probablement, elles sont là).
- Trouvez quelles classes doivent être redéfinies afin d'apporter le look souhaité.
- Si la fonctionnalité n'est pas implémentée, ou n'est pas entièrement implémentée - coordonnez avec vos collègues un moyen pratique d'étendre la fonctionnalité et essayez de la documenter pour l'avenir.
- Si la fonctionnalité n'est pas nécessaire partout, mais uniquement sur une page spécifique - placez-la dans un fichier séparé et connectez-la \ collectez-la (pas de styles en ligne, s'il vous plaît)
Postface
Tout ce qui précède est mon opinion personnelle. Je ne suis pas un développeur front-end professionnel, et je rencontre généralement du HTML et du CSS lorsque j'ajoute de nouvelles fonctionnalités - il est plus pratique pour moi de configurer immédiatement l'avant et l'arrière, puis de le donner pour peigner la conception. Si votre équipe a établi des processus, décrit les règles d'un bon code, compilé des directives pour tous les développeurs et tout passe par une révision du code - vous pouvez simplement rire de cet article, cela ne me dérange pas. Si l'article s'avère utile à quelqu'un, ce n'est pas en vain que j'expose mes pensées confuses.