En tant que développeurs JavaScript, la quantité considérable de truc nous sommes censés connaître est énorme, et il grandit chaque jour.
Avec autant de langages, d’outils et de technologies différents qui se disputent notre temps et notre attention, il peut être difficile de déterminer ce qu’il faut prioriser. Devrions-nous nous améliorer à TypeScript ? Peut-être prendre Svelte ? Écrirons-nous même JS à l’avenir, ou est-ce que ce truc de “WebAssembly” est réel ?
A mon avis, si nous vraiment voulons maximiser le retour sur investissement, l’une des meilleures choses sur lesquelles nous pouvons nous concentrer est CSS.
Cela peut sembler un choix étrange, mais honnêtement, m’améliorer en CSS a eu un impact énorme sur ma vie et ma carrière de développeur. Dans cet article, je vais partager quelques-unes des raisons pour lesquelles je pense que c’est une si bonne idée.
J’ai parlé à tant de développeurs au cours des derniers mois qui viennent de trouver CSS misérable. J’ai une hypothèse à ce sujet.
CSS est un très implicite langue; il s’appuie fortement sur des mécanismes profondément enfouis dans la spécification CSS. Lorsque ces mécanismes fonctionnent d’une manière à laquelle nous ne nous attendions pas, nous sommes laissés dans le noir, sans savoir ce qui se passe. Nous ne savons pas ce que nous ne savons pas.
Comparez cela à un langage comme TypeScript : lorsque nous commettons une erreur, une info-bulle utile apparaît pour nous faire savoir ce que nous avons fait de mal. Même en JavaScript lâche, les exceptions nous orientent dans la bonne direction (et en plus, nous avons des peluches, des points d’arrêt, des journaux…).
Lorsque nous écrivons du code, dans n’importe quel langage, nous nous appuyons sur notre modèle mental du fonctionnement de ce langage. Si notre modèle mental est incomplet ou incorrect, il y a de fortes chances que nous n’obtenions pas le résultat que nous attendions. En CSS, ces désalignements sont super communen raison de la façon dont le CSS est implicite.
Prenons un exemple rapide.
En CSS, le z-index La propriété peut être utilisée pour déplacer un élément au-dessus ou au-dessous d’un autre élément. Dans cet extrait, la boîte rose se trouve devant la grise car sa valeur d’index z est plus grande :
Aire de jeux codée
Résultat
Actualiser le volet des résultats
Cependant : Dans d’autres situations, même celles qui semble vraiment assez similaire, cette règle semble enfreindre. Les valeurs du z-index n’ont pas changé, mais maintenant la boîte rose se trouve derrière la grise :
Aire de jeux codée
Résultat
Actualiser le volet des résultats
Comme c’est si souvent le cas avec CSS, il y a plus à z-index propriété qu’il n’y paraît.
Si nous voulons comprendre comment le navigateur utilise les valeurs z-index, nous devons en savoir plus sur contextes d’empilement, un mécanisme implicite qui contrôle la façon dont ces valeurs sont utilisées. Si vous êtes curieux de connaître cette énigme particulière, j’ai écrit un article qui explique ce qui se passe ici.
C’est frustrant car cela semble aléatoire et imprévisible. Il y a un élément de « roulette russe » : chaque fois que nous utilisons z-index, nous espérons qu’il fera ce que nous attendons.
Il est important de souligner : ce n’est pas ta faute ! La plupart des ressources qui enseignent le CSS se concentrent sur les propriétés superficielles et les “astuces”, au lieu d’aller plus loin et d’apprendre des choses comme les contextes d’empilement.
(Je suis totalement coupable de cela aussi 😅 plz ne soyez pas en colère !)
Des propriétés comme z-index ou position sont utilisés comme entrées dans divers algorithmes de mise en page. Au lieu d’apprendre les propriétés individuelles, nous devrions apprendre comment fonctionnent ces algorithmes !
Lorsque nous adoptons ce type d’approche, cela a un effet transformateur sur notre capacité à créer des interfaces avec CSS. Nous développons une intuition beaucoup plus robuste et prévisible, et notre confiance avec la langue augmente. Nous pouvons passer des heures dans l’état de flux, transformant une conception en une mise en page réactive et fonctionnelle, sachant que nous pouvons résoudre tous les problèmes qui surgissent.
Au cours de l’année écoulée, j’ai parlé avec des centaines de développeurs JavaScript à propos de CSS. J’ai remarqué un thème commun : de nombreux développeurs JS ont l’impression que leur cerveau n’est tout simplement pas câblé pour comprendre le CSS. Ils supposent que CSS vient naturellement aux autres, et ils ne sont tout simplement pas faits pour cela.
Je vous promets que ce n’est pas le cas. Personne n’est né avec des compétences CSS. Tu peux absolument maîtriser CSS.
Et vous devriez ! Il est difficile d’exagérer à quel point il est stimulant de développer de solides compétences CSS lorsque vous maîtrisez déjà HTML et JS. Il complète la trinité : vous avez rassemblé tous les outils, et maintenant vous pouvez construire n’importe quoi. ✨
Dans certaines poches de la communauté du développement Web, il existe une idée répandue selon laquelle les compétences CSS ne sont pas appréciées par les employeurs. Si vous voulez un de ces emplois bien rémunérés, vos compétences JS sont tout ce qui compte, n’est-ce pas ?
Il est vrai que les employeurs ont tendance à donner la priorité aux compétences JS, en particulier pour les rôles plus élevés. Mais il y a une dynamique intéressante en jeu ici.
Employeurs vraiment besoin développeurs qui maîtrisent JS, CSS et HTML. Il faut les 3 technologies pour construire un frontal ! Et parce que tant de développeurs JS ont un “trou CSS” dans leurs compétences, les compétences CSS ont tendance à être rares.
J’ai récemment écouté un merveilleux épisode du podcast Indie Hackers avec Dave Geddes. Dave a créé Flexbox Zombies, un jeu qui enseigne les principes fondamentaux de CSS Flexbox. De l’épisode :
J’ai eu un gars qui m’a dit, il m’a écrit et m’a dit qu’il était un ingénieur junior, qu’il venait juste d’obtenir son premier emploi. Il travaillait avec un ingénieur senior, qui était du genre “Comment en sais-tu autant sur Flexbox?”… Il était tellement impressionné par ce gamin qu’il lui a demandé “Comment as-tu fait ça?”
L’un des meilleurs moyens de se démarquer et de progresser dans votre carrière est de se faire connaître comme étant au-dessus de la moyenne dans un domaine pertinent. Le niveau de compétence moyen en matière de JavaScript est assez haut, car de nombreux développeurs se concentrent exclusivement sur elle. Le niveau de compétence CSS moyen, quant à lui, est un peu inférieur. C’est un fruit à portée de main.
Le processus de recherche d’emploi est nul. Mais je pense que ça va peut-être un peu mieux.
Il y a quelques années, je suis passé par un processus exténuant de 8 entretiens. 4 de ces entretiens étaient techniques, bien qu’on ne m’ait posé aucune question sur React, ou Javascript, ou CSS, ou quoi que ce soit lié au développement Web. C’était des trucs de type “Cracking the Coding Interview”. Algorithmes et structures de données. Des choses qui n’ont aucune pertinence en ce qui concerne le travail frontal.
Heureusement, le vent semble tourner; de plus en plus, les entreprises voient la lumière et essaient d’imiter le travail quotidien typique dans les entretiens d’embauche et les processus d’embauche. Lorsque j’ai passé un entretien chez Gatsby Inc, la société à l’origine du framework Gatsby.js, on m’a demandé de créer un composant Modal/Dialog.
Les modaux sont des éléments d’interface utilisateur notoirement délicats, surtout si vous êtes soucieux de la convivialité et de l’accessibilité. Mais une chose est sûre : une solide compréhension des mécanismes CSS aide beaucoup.
Au début de cet article, nous avons examiné quelques extraits de code et avons vu comment z-index peut sembler imprévisible. Parce que je connaissais les contextes d’empilement, j’ai pu intégrer ces connaissances dans ma solution et produire un meilleur modal.
Pour être clair, je ne dis pas que le CSS seul est votre billet pour un concert bien rémunéré. Dans cette interview, j’étais également testé sur un tas d’autres compétences, y compris React et JavaScript. Mais si vous lisez ceci, je suppose que vous maîtrisez déjà JS et son écosystème moderne de frameworks et d’outils. L’ajout de CSS à cet ensemble de compétences peut constituer un avantage concurrentiel assez puissant.
Depuis mi-2020, je développe un cours appelé CSS pour les développeurs JavaScript. Il s’agit d’un cours en ligne complet à votre rythme qui vous aide à développer votre intuition sur le fonctionnement de CSS à un niveau plus profond.
J’ai été motivé pour enseigner ce genre de choses pendant des années, parce que j’ai moi-même traversé cette transformation. J’ai commencé à écrire du CSS en 2007 et, honnêtement, j’ai trébuché pendant une décennie, en sachant assez pour m’en sortir, mais pas assez pour me sentir à l’aise ou en confiance.
Dans mon cas, je me suis amélioré en CSS en dépensant beaucoup plus temps sur les docs MDN, et plonger occasionnellement dans les spécifications CSSWG. Chaque fois que quelque chose n’avait pas de sens pour moi, j’en profitais pour en apprendre davantage sur les systèmes impliqués. Fini le copier/coller depuis StackOverflow et passer à autre chose sans vraiment comprendre ! Ce processus a pris des années, mais c’était un investissement qui en valait vraiment la peine.
En mars 2020, j’ai développé une importante blessure due au stress répétitif qui m’a empêché d’utiliser un clavier ou une souris pendant une bonne partie de l’année. J’ai eu beaucoup de temps pour réfléchir et j’ai réalisé que plus que tout, je voulais me concentrer sur l’enseignement.
Mon objectif de carrière ultime est maintenant de devenir un guide, d’aider les autres à acquérir les compétences dont ils ont besoin pour atteindre leurs propres objectifs. Depuis son lancement, plus de 11 000 développeurs sont passés par CSS pour les développeurs JavaScript, et les retours ont été extrêmement positifs.
Vous pouvez en savoir plus sur le cours ici: