Ce que font les développeurs CSS et pourquoi vous en avez besoin

Les développeurs CSS sont des professionnels du Web dont la principale responsabilité est de fournir un produit soigné et stylé au navigateur du visiteur. Pratiquement tous les sites Web utilisent CSS, mais CSS n'est souvent pas considéré comme un "égal" dans la pile de développement Web moderne. Malheureusement, cette perception erronée peut conduire à considérer CSS comme allant de soi, voire à le négliger dans une certaine mesure.

Permettre aux développeurs non-CSS de gérer le CSS entraîne souvent l'introduction de hacks et de bogues CSS dans votre code, et peut provoquer une frustration inutile pour les développeurs. Dans cet article, j'aimerais familiariser tout le monde avec ce que le travail englobe afin que vous puissiez mieux comprendre pourquoi chaque site a besoin d'un développeur CSS fiable et professionnel.

Que font les développeurs CSS ?

Commençons par les bases. Pourquoi le CSS est-il si important et que sont exactement censés faire les développeurs CSS ?

CSS est un langage spécifique, et en tant que tel, il ne peut pas exister seul. Il nécessite HTML pour avoir un sens. Ainsi, la première chose que font les développeurs CSS est d'écrire du code HTML.

Écrire du HTML bien rangé compte toujours

Écrire du code HTML simple, propre et bien organisé est une grande responsabilité, car l'humble document HTML est la première chose que vous livrez à vos utilisateurs finaux.

Si vous écrivez un document HTML prêt pour la production, vous devez essayer de vous assurer d'inclure toutes les balises obligatoires et facultatives dans l'en-tête du document pour tirer le meilleur parti de votre site Web. Je parle de définir le bon doctype, la langue, les balises méta, les favicons, les techniques de chargement et le référencement.

Tout ce qui pourrait contribuer à rendre votre site Web plus performant, plus accessible et à offrir une plus grande exposition à votre public et aux moteurs de recherche, ainsi qu'à d'autres services et outils. Le corps du document HTML ne doit pas non plus être gonflé. Savoir quand utiliser les balises HTML sémantiques, comment ajouter les attributs HTML requis et comment éviter l'imbrication profonde ou les divitis ne doit pas être ignoré, mais plutôt mis en œuvre dès le début du projet. Aucun développeur professionnel ne commence à suivre les meilleures pratiques à mi-parcours du projet, mais même des choses apparemment basiques telles que HTML sont souvent mal faites.

La conception globale détermine souvent la façon dont nous organisons divers composants HTML. Les développeurs CSS travaillent en étroite collaboration avec les concepteurs, et tous les concepteurs n'utilisent pas le même outil pour fournir la conception. Connaître Sketch, Photoshop, InVision ou Figma et être capable de « découper » le design sont des compétences indispensables pour les développeurs CSS. Il faut toujours garder à l'esprit comment structurer un composant pour permettre d'appliquer la conception en même temps. L'utilisation d'une bonne convention de dénomination, comme BEM ou OOCSS, devrait empêcher l'écriture de code HTML gonflé ou de code CSS non maintenable.

JavaScript est partout

Certains composants doivent être interactifs, comme les modaux ou les info-bulles. Cela nécessite souvent une bonne maîtrise de JavaScript, pas de JavaScript "profond", mais des événements JavaScript et de la gestion du DOM. La gestion du DOM peut être difficile car vous ne voulez pas épuiser les ressources de votre utilisateur et rendre votre site Web lent ou, pire encore, le planter et le rendre complètement insensible.

Le monde JavaScript évolue rapidement et il semble parfois que de nouveaux frameworks et outils apparaissent quotidiennement. En raison de l'immense popularité de JavaScript, il est essentiel de rester informé si vous souhaitez utiliser les dernières meilleures pratiques et offrir l'expérience la plus agréable aux utilisateurs finaux.

CSS

C'est également vrai pour CSS, bien que beaucoup diraient qu'il n'évolue pas à peu près au même rythme que JavaScript. Cependant, de nouvelles fonctionnalités telles que les variables CSS, la grille CSS ou même Flexbox nécessitent un certain temps pour être maîtrisées.

Ensuite, il y a le support du navigateur, qui peut encore poser problème aujourd'hui. Votre site peut ressembler à un million de dollars dans un navigateur moderne, mais pas autant dans les anciens navigateurs. Flexbox peut être pris en charge dans IE11, mais encore une fois, cela peut ne pas fonctionner comme prévu. Savoir comment éviter ces problèmes fait partie du travail d'un développeur CSS.

Heureusement, la communauté est très utile et des sites comme Flexbugs ou Gridbugs peuvent faire gagner beaucoup de temps.

Outils, techniques et principes CSS

Parfois, nous pouvions compter sur des outils tels que des exécuteurs de tâches ou des bundlers tels que Grunt, Gulp et Webpack pour nous aider à fournir un code fiable. Vous pouvez suralimenter votre code avec des linters, des minificateurs, babel ou PostCSS pour transpiler le code.

Ensuite, nous devons prendre en compte diverses polices, typographies, images, icônes, polices d'icônes, animations, transitions et autres aspects abstraits qui font partie des tâches quotidiennes des développeurs CSS. Chaque fonctionnalité a sa spécificité, ses limites, ses problèmes et ses solutions. Plus vous maîtrisez de fonctionnalités et de techniques, plus il est facile de styliser et d'implémenter des composants dans votre projet.

Il existe un nombre important de propriétés et de valeurs CSS, et on ne peut pas tout savoir. Heureusement, nos outils nous y aident, notamment les éditeurs de code et les outils de développement. Cependant, même les outils ne peuvent pas aider à résoudre les maux de tête lorsque vous devez résoudre un problème d'index z. L'échec est la meilleure façon d'apprendre.

Je dirais que cela est particulièrement vrai lorsque vous travaillez avec CSS, et c'est pourquoi :

Si vous n'avez jamais essayé de résoudre le problème du z-index, vous n'apprendrez jamais le contexte d'empilement. Si vous n'avez jamais essayé de remplacer la classe Bootstrap, vous n'apprendrez jamais la spécificité. Si vous n'avez jamais essayé de résoudre le problème du flotteur, vous ne découvrirez jamais le modèle de boîte.

Parfois, la solution est simple, mais il est difficile de poser une question. Par rapport à d'autres langages, vous ne pouvez pas demander pourquoi ma boucle ne fonctionne pas. Vous avez besoin du contexte complet pour résoudre le problème en CSS, et c'est souvent quelque chose que beaucoup ne comprennent pas : le cascade .

Cascade est la meilleure fonctionnalité de CSS, et elle devrait fonctionner pour vous, pas contre vous. Certains développeurs le contournent en inventant des approches personnalisées comme CSS-in-JS. Si vous emballez votre CSS dans l'environnement encapsulé comme React, vous ne pouvez pas l'utiliser ailleurs. Je doute que ce soit l'approche que vous souhaitiez dans votre plate-forme évolutive. Si vous avez des problèmes avec la cascade, apprenez à l'embrasser, puis apprenez à l'apprivoiser.

Pendant que je préparais cet article, Max Bock a écrit sur l'état d'esprit CSS, et c'est précisément ce que les développeurs CSS doivent faire. Les développeurs CSS réfléchissent à l'intérieur de la boîte, prédisent les modifications de contenu et évitent les nombres fixes dans la mesure du possible tout en essayant d'écrire le moins de code possible sans remplacer les valeurs par défaut et le contexte.

Pourquoi avez-vous besoin d'un développeur CSS ?

La plupart des développeurs frontend ou même full-stack pourraient écrire le code CSS. Mais tous ne pourraient pas corriger tous les bogues CSS ou implémenter la conception sans embrouiller le code HTML ou s'appuyer sur JavaScript là où ce n'est pas nécessaire.

Un développeur CSS professionnel se soucie du code jusque dans les moindres détails, aime créer des mises en page et des composants, même les plus compliqués, et sait comment résoudre chaque problème ou bug.

Normes de codage CSS

Avant d'écrire du code, c'est généralement une bonne idée d'avoir quelques règles de base sur l'écriture de code. Les développeurs CSS doivent respecter la norme de codage - c'est essentiel pour la maintenabilité et l'évolutivité du projet.

Choisissez la convention de dénomination à utiliser tout au long du projet. L'établissement précoce d'une convention de dénomination peut aider les développeurs à produire un code meilleur et plus organisé. Cela peut également aider toutes les personnes impliquées dans le projet à comprendre la structure des composants et les relations entre les composants et les éléments en lisant uniquement le code HTML.

Décidez comment gérer l'indentation, les types de sélecteurs, les propriétés abrégées, les unités en CSS. Par exemple, évitez d'utiliser des unités de pixel si la norme de codage propose l'utilisation d'unités rem. Tout le monde a un style d'écriture/de codage distinct, mais en tant que professionnel, vous devez être capable d'adopter et, plus important encore, de comprendre chaque concept.

Implémentation de la conception CSS

Avant de convertir la conception en code, vous devez prendre le temps de comprendre chaque page, mise en page et composant. Si possible, disséquez chaque page, créez une liste de pages et de composants et essayez de trouver un modèle.

Si vous remarquez qu'un composant est présent sur plusieurs pages, vous devez reconnaître l'environnement qui l'entoure et essayer de le considérer comme un composant autonome. S'il existe des composants similaires, tels que des cartes ou des listes, vous pouvez avoir une variante du même composant. De cette façon, vous pouvez réutiliser le code HTML et n'écrire qu'un peu de code CSS pour le faire apparaître modifié.

C'est aussi une bonne idée d'essayer de trouver des modèles dans d'autres domaines, comme la typographie et l'espacement. Parfois, cela conduit à avoir des classes d'assistance qui pourraient être utilisées dans l'ensemble du projet plutôt que sur des pages individuelles.

Organisez votre code CSS

Les développeurs CSS doivent organiser leur code et créer une structure significative pour tout le monde. Lors de l'utilisation d'outils tels que les processeurs CSS, les développeurs CSS doivent documenter le processus de génération du code compilé.

Si nécessaire, les développeurs CSS peuvent créer des guides de style. Les guides de style peuvent être une référence lors de la création de nouvelles pages ou pour décider comment aborder les pages existantes. Mon conseil est de rendre le guide de style globalement disponible pour toute l'équipe car il est souvent beaucoup plus facile de prendre une décision lorsqu'on a un contexte visuel. Les guides de style peuvent contenir des palettes de couleurs, des règles de typographie, des normes de codage et même des pages statiques. Il n'y a pas de limites, sauf le budget et votre imagination.

Code CSS en production

L'écriture de code CSS implique de gérer les problèmes de navigateurs croisés, les bogues, les animations, les transitions, la réactivité et les styles d'impression. Beaucoup de ces fonctionnalités ne sont pas facilement gérables par des développeurs polyvalents. J'irais jusque là et je dirais que ce sont les tâches CSS les moins appréciées dans l'ensemble, et que tous les développeurs ne savent pas comment les gérer. D'un autre côté, les développeurs CSS spécialisés savent (ou du moins devraient savoir) comment produire du code en tenant compte de chaque bogue, navigateur et environnement.

L'utilisation d'approches modernes est une voie à suivre, mais la prise en charge des navigateurs plus anciens et le respect des paramètres de l'utilisateur, tels que les mouvements réduits, ne doivent pas non plus être ignorés.

Les développeurs CSS écrivent également du code HTML et JavaScript. Cela signifie que la livraison des actifs relève de la responsabilité du développeur CSS. Les développeurs CSS doivent être responsables du chargement des polices, de l'extraction du CSS critique, de l'utilisation du chargement JavaScript différé et asynchrone et de la fourniture d'images réactives.

Aucune de ces techniques n'est facile à mettre en œuvre et il n'y a pas de solution miracle.

Ce que les développeurs CSS peuvent faire pour vous

Tout ce qui précède explique pourquoi vous avez besoin d'un développeur CSS dédié. Voici quelques-unes des choses cruciales qu'ils gèrent :

• Assurez-vous que chaque membre du projet respecte la norme de codage
• Conception de l'outil
• Organiser le code
• Écrivez le code
• Corriger les bugs
• Découvrir de nouvelles techniques
• Améliorer le code

Emballer

Pendant trop longtemps, la question de l'existence et de l'importance du rôle des développeurs CSS a encouragé des discussions pas particulièrement constructives et bien intentionnées. Essayons d'être d'accord et de reconnaître le développeur CSS comme un rôle approprié une fois pour toutes.

Dans son article, The Great Divide , Chris Coyier cite certains des leaders technologiques, et la plupart d'entre eux conviennent qu'il devrait y avoir un fossé, il devrait y avoir un rôle basé sur CSS qui ne nécessite pas la connaissance des frameworks JavaScript modernes. Cela pourrait aider si vous en savez plus que "juste CSS", mais le rôle devrait exister et il devrait être accepté comme égal aux rôles basés sur JavaScript.

Après tout, voulez-vous laisser votre produit entre les mains d'un professionnel spécialisé qui pourra le peaufiner à la perfection, ou vous contenterez-vous d'en avoir assez ?

Lectures complémentaires sur le blog Toptal Engineering :

• Comment aborder les animations SVG en CSS