L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Permettre aux développeurs de créer une interface utilisateur personnalisée
Créer une interface utilisateur personnalisée avec des bibliothèques d'interface utilisateur peut être intimidant, mais CSS n'a pas besoin d'être effrayant! Venez apprendre à vous aider, vous et votre équipe de développement, à vaincre les craintes liées à l'interface utilisateur.
Bonjour! Mon nom est Alyssa. Je suis l'avocat des développeurs angulaires pour Kendo UI chez Progress. J'adore le développement angulaire et frontal. Je suis très passionné par la création et l’aide aux autres dans la création d’interfaces utilisateur «FABULEUSES». Je travaille à la maison et partage un bureau avec mon mari qui est aussi un geek amateur de CSS comme moi.
C'est un problème mental
Récemment, lors d'une réunion d'équipe, j'ai entendu un collègue de travail de mon mari déclarer:
«Nous ne pouvons pas créer cette fonctionnalité , notre bibliothèque d'interface utilisateur n'a pas ce composant. »
Bien sûr, ma première pensée a été «cette personne est des bananes coo-coo». ? Cependant, après avoir discuté avec de plus en plus de développeurs, il semble qu'ils ne soient pas les seuls dans cet état d'esprit. Que la tâche de créer quelque chose de personnalisé soit trop intimidante ou qu'ils ne croient pas avoir le temps pour quelque chose qui, selon eux, prendra une éternité, cette mentalité de «ce n'est pas pré-construit donc je ne peux pas le faire» n'est pas quelque chose de nouveau.
<img width = "1600" height = "900" src = "https://www.telerik.com/sfimages/default-source/blogs/2020/2020-05/empowering-devs-to-create-custom-ui -post / 3.png? sfvrsn = a87657e2_2 "alt =" Le pire que nous puissions faire, en tant que dépositaires actuels du Web, est de permettre à quoi que ce soit de limiter ce qui est possible – Hardboiled Web Design
J'ai vu cette mentalité dans de nombreux développeurs sous-pris en charge, débordés ou même épuisés. Avant de pouvoir résoudre ce problème crucial, nous devons avoir des connaissances de base en CSS afin de vraiment comprendre les points faibles. Il semble y avoir deux problèmes. L'un est de pouvoir créer le JavaScript et le HTML qui refléteraient la fonctionnalité de la fonctionnalité, et l'autre est la création du CSS qui est responsable de l'aspect général / UX de l'ensemble de l'application.
Après avoir discuté avec de nombreux développeurs différents, le le deuxième problème semble être le nœud de cette retenue mentale. Je veux commencer par quelques connaissances spécifiques CSS pour essayer de niveler et montrer que CSS n'est pas aussi effrayant que nous le pensons tous. Cette compréhension jettera les bases pour permettre à vous-même et aux autres développeurs de vraiment créer l'impossible sur le Web.
Comprendre le CSS en cascade et la spécificité
première lettre embêtante et belle en "CSS" qui le rend différent de tout autre langage avec lequel les développeurs travaillent. CASCADING! CSS est un moyen de lister les styles d'éléments sur la page.
button {
arrière-plan: rebeccapurple;
}
Que se passe-t-il quand il y a des règles concurrentes pour styliser différemment les mêmes éléments?
button {
arrière-plan: rebeccapurple;
Couleur blanche;
}
bouton {
arrière-plan: deeppink;
}
Deux choses de même valeur déclarées? Le dernier l'emportera. (En cascade)
Eh bien, dans le cas ci-dessus, le bouton aurait d'abord la couleur d'arrière-plan rebeccapurple appliquée, puis lorsque les navigateurs descendaient la feuille de style, il appliquerait la 8ème ligne de styles et changerait l'arrière-plan du bouton doit avoir une couleur de deeppink . Tout cela se produit avant que l'utilisateur ne le voie, donc la page se chargerait simplement comme deeppink .
La partie en cascade ne vous emmène que si loin avec votre CSS, l'autre (et principal) gotcha est ✨SPECIFICITY ! ✨ Dans notre exemple précédent, la deuxième règle de style pour l'arrière-plan du bouton a remplacé la première. Cependant, en étant plus précis sur notre premier sélecteur, nous pouvons avoir rebeccapurple comme couleur d'arrière-plan, sans avoir à déplacer l'ordre de notre CSS.
button.submit {
arrière-plan: rebeccapurple;
Couleur blanche;
}
bouton {
arrière-plan: deeppink;
}
Voir le stylo
CSS Cascading & Specificity par Alyssa Nicoll ( @alyssamichelle )
sur CodePen .
En ajoutant la classe de submit au premier sélecteur de bouton, il remplacera le dernier deeppink. Les sélecteurs CSS ne valent rien ou pas beaucoup (*, h1, bouton, bouton: avant) et progressent jusqu'à presque impossible à remplacer (en ligne,! Important). Una Kravets a fait un court et merveilleux épisode de podcast pour expliquer la spécificité CSS . Elle va dans beaucoup plus de détails que moi et énumère même des exemples pour vous guider. Cela vaut vraiment la peine d’être écouté si vous n’avez pas encore pleinement compris ce concept. J'ai également créé ce tableau pratique pour nous aider à garder les choses au clair:
Notes importantes avec spécificité CSS
J'ai également trouvé ces définitions très utiles: [19659002] Pseudo élément vs classe?
Pseudo élément: représente quelque chose de physique: avant
Pseudo-classe: représente quelque chose avec état: actif
Autres choses à noter sur la spécificité CSS:
- La pseudo-classe: not () n'ajoute aucune spécificité en elle-même, seulement ce qui est à l'intérieur de ses parenthèses. .list.list s'additionne en fait!
- La seule façon de remplacer une valeur! importante est d'utiliser une autre règle! importante déclarée plus tard dans le CSS.
Cette ressource est un merveilleux guide de spécificité CSS . Ce sont de bons outils à ajouter et à partager avec les développeurs qui savent peut-être aussi que la lutte CSS est réelle. (Consultez ma liste organisée ci-dessous pour toutes les ? ressources puissantes rassemblées en un seul endroit!)
J'ai dû dupliquer du code à différents endroits afin de remplacer les styles de bootstraps. C'est à cause de quelque chose que j'aime appeler des guerres de spécificité.
Specificity Wars
Lorsque les styles (qu'ils soient les vôtres ou ceux d'une bibliothèque / structure que vous avez inclus) sont soit trop génériques, soit trop spécifiques, ils deviennent très difficiles à travailler
Trop générique de styles
Sur le projet sur lequel je travaillais auparavant, celui que j'ai mentionné auparavant, j'ai été chargé de créer un panneau contextuel pour que les clients puissent personnaliser un design qui serait imprimé sur du tissu. J'ai commencé à créer et à styliser mon panneau et quand je pensais avoir terminé, j'ai chargé le navigateur et j'ai vu ceci:
Tout était comme je m'y attendais jusqu'à présent, sauf ce grand écart se produisant en bas:
Ceci, bien sûr, se produisait parce que Bootstrap avait déjà stylisé quoi que ce soit avec une classe de .panel pour avoir une marge inférieure de 20px (avec d'autres styles).
Le vrai problème ici est que Bootstrap a ajouté leurs styles au très classe générique de .panel . Une manière meilleure et plus conviviale serait de placer leurs styles dans une classe d'espacement de noms comme .bootstrap-panel . Cela peut sembler très difficile, sauf que .panel n'est pas la seule classe ou espace de noms générique que Bootstrap revendique, mais il y en a beaucoup, comme .label et . légende qu'ils revendiquent également:
Cela vous oblige à être de plus en plus précis et à isoler vos styles de ceux de l'application. Je ne crois pas que nous devrions nous éloigner de la cascade employée par CSS, je pense plutôt que nous devrions l'utiliser à bon escient en étant toujours aussi précis que nécessaire.
Trop spécifique des styles
L'autre aspect des guerres de spécificité est d'avoir des styles trop spécifiques. spécificité ci-dessus? Le drapeau ! Important est
En termes simples, ceci signifie que si vous utilisez quelque chose comme Bootstrap qui est très spécifique avec leurs styles, il sera très difficile de créer des styles personnalisés à côté du leur. En aucun cas impossible, juste douloureux.
L'interface utilisateur de Kendo essaie d'être gentille avec spécificité
Cela n'a pas toujours besoin d'être aussi douloureux, avoir une bibliothèque d'interface utilisateur ne signifie pas vous devez être aussi précis que possible. Kendo UI, par exemple, est une énorme bibliothèque de composants avec plus de 70 composants. Lors de la recherche dans les dépôts pour l'interface utilisateur de Kendo, composant par composant, la chose la plus proche de ! Important que j'ai pu trouver était des commentaires sur des choses importantes. 😉 Il a été tellement plus facile, en travaillant avec Kendo UI pour Angular, de créer une interface utilisateur personnalisée, que mes expériences avec Bootstrap. Je sais qu'ils Kendo UI ont quelques balises importantes, mais ils essaient d'être très conscients de quand et où ils les utilisent. Vous pouvez avoir une bibliothèque d'interface utilisateur bien structurée et robuste sans devenir trop spécifique et rendre les personnalisations impossibles.
Un équilibre est nécessaire
Cela ne nous laisse pas beaucoup de marge de manœuvre, je m'en rends compte. D'une part, lorsque vous créez vos propres styles, vous ne voulez pas être trop générique, ce qui pourrait vous laisser avec des styles conflictuels et des résultats inattendus. Vous voulez bien sûr avoir
D'un autre côté, vous ne voulez pas être si précis que vous avez besoin de drapeaux ! Important partout pour obtenir quoi que ce soit à appliquer. Comme pour beaucoup de choses dans la vie, l'équilibre est nécessaire ici.
Que pouvons-nous faire?
Conscience de ce qui est possible
Souvent, quand je regarde pourquoi mes collègues développeurs sont craignant une affectation CSS, c'est parce qu'ils ne sont pas conscients de la puissance et de la nature vraiment illimitée du CSS. Je crois qu'en étant simplement conscient de ce qui est possible avec CSS et en se tenant au courant de ce que les gens créent avec, peut ouvrir des voies dans votre cerveau qui étaient auparavant fermées.
Un bon exemple est quelque chose que les gens atteignent souvent les bibliothèques d'interface utilisateur pour, le très effrayant
See the Pen
CSS Grid Layout par Alyssa Nicoll ( @alyssamichelle )
sur CodePen .
Le gros de la résolution de quelque chose d'effrayant comme celui-ci consiste à comprendre comment créer une disposition Grille en utilisant Grid ou Flexbox. Consultez ce Codepen pour me voir utiliser Flexbox et CSS Grid côte à côte à des fins de comparaison. Une ressource merveilleuse que je préfère pour apprendre et me souvenir de CSS Grid est learncssgrid.com .
Donc, au lieu de tirer dans une bibliothèque avec des milliers et des milliers de lignes de CSS, si tout ce dont vous avez besoin est un Grid, il serait peut-être préférable de créer la vôtre:
.row {
affichage: grille; ?
grid-auto-flow: colonne; ?
}
Guide des systèmes de conception
Une autre étape que votre équipe peut prendre pour contribuer à la durabilité et à la longévité de vos styles consiste à créer un système de conception pour guider toute nouvelle interface utilisateur. Lors du FOWA 2013 à Londres, Mark Otto a décrit un système de conception comme suit:
Système de conception: tout ce qui compose votre produit
Les systèmes de conception sont censés inclure TOUT ce qui concerne votre marque. Cela inclut des choses comme la typographie et la mise en page jusqu'à des choses comme les conventions de codage et les guides de style complets. Les systèmes de conception sont un endroit pour conserver toutes ces informations afin que l'équipe puisse les référencer, en tirer des leçons et faire en sorte que la marque continue de grandir et de prospérer.
Un système de conception vraiment soigné à vérifier est de Salesforce: https: / /www.lightningdesignsystem.com/[19459006[19659078)unecaptured'écrandelapaged'ouverturedusystèmedeconceptionsalesforce] Thèmes!
Le thème par défaut est techniquement notre propre système de conception, Bootstrap est celui avec lequel nous intégrons, et le matériau est bien sûr lié à la conception matérielle. Je pense qu'avoir un système de conception en place peut vraiment vous aider à élever vos composants et votre interface utilisateur à un niveau professionnel.
La création de votre propre système de conception, cependant, peut être un peu intimidante. C'est une tâche de grande envergure qui, tout en étant incroyablement utile, demandera une quantité incroyable d'énergie pour bien faire les choses. Alors pourquoi ne pas commencer petit et créer une pièce très utile et relativement facile à utiliser: un guide de style.
Voici un exemple de guide de style créé par mon mari pour une application interne. C'était sur leur site interne où d'autres développeurs pouvaient aller et obtenir une référence rapide pour créer des éléments tels que des boutons et des formulaires, pour s'assurer que toute nouvelle interface utilisateur restait cohérente.
Ressources pour aider
Enfin, je recommande de créer une liste organisée de ressources CSS et de conception pour votre équipe. Cela comprendra non seulement votre propre guide de style ou système de conception, mais également des cours, des articles de blog et des codes de codepens que vos développeurs peuvent référencer en période de grand péril CSS. Voici ma propre liste pour vous aider à démarrer: La puissante liste de ressources CSS d'Alyssa
tl; dr
Pour résumer, il peut être très difficile et intimidant de créer une interface utilisateur personnalisée. Il existe de nombreux problèmes auxquels les développeurs sont confrontés, des bibliothèques trop spécifiques déjà incluses dans le projet aux éléments compliqués et inconnus du CSS lui-même. Le meilleur conseil que je puisse donner à tout responsable d'une équipe de développement ou à un développeur individuel est le suivant:
Ne réécrivez pas la roue, ne vous appuyez pas sur le travail des autres. Mais nous ne devons jamais laisser la tâche difficile de créer une interface utilisateur personnalisée aux côtés de styles ou de bibliothèques existants limiter ce que nous créons pour nos clients. Créez un système, un guide de style et une liste de ressources auxquelles votre équipe peut accéder. Encouragez toujours ceux qui vous entourent à rechercher la véritable créativité, en gardant les besoins de vos utilisateurs en premier, au-dessus de nos propres peurs et inconvénients.
Alyssa est l'avocat du développeur angulaire pour l'interface utilisateur de Kendo. Si vous aimez Angular, React, Vue ou jQuery et que vous aimez également les composants magnifiques et très détaillés, consultez Kendo UI – et vous pouvez trouver l'interface Kendo pour la bibliothèque Angular ici ] Ou passez simplement à un essai gratuit de 30 jours dès aujourd'hui. Bon codage!
Source link