Get best of the week

Développeurs CSS - pourquoi le monde en a-t-il besoin?

La version audio en russe (Yandex.Music) / iTunes

Au cours des dix dernières années, CSS a connu une croissance exponentielle en ajoutant de plus en plus de fonctionnalités, devenant ainsi progressivement assez compliqué et déroutant. Le CSS de notre époque est très différent du CSS de la décennie 2001-2010.

Avant de commencer à expliquer pourquoi le monde a besoin de développeurs CSS, nous devons revenir en arrière et regarder l'historique CSS.

Cache poteau canard jaune

Disclaimer:
.
 .
 , , .


CSS


Au cours de la décennie 2001-2010, lorsque Internet a conquis le monde, CSS est resté immobile. Internet Explorer 6-7-8 était le principal navigateur. Microsoft à cette époque n'a pas prêté beaucoup d'attention aux spécifications CSS, n'a montré aucun intérêt à y ajouter de nouvelles fonctionnalités. CSS est resté à la version 2.1 pendant toutes ces années.

Depuis 2007, les navigateurs modernes Firefox et Chrome ont commencé à apparaître. Même à cette époque, nous devions toujours prendre en charge Internet Explorer. Cela a freiné notre développement. En tant que navigateur principal à l'époque, IE a installé une vitesse de développement CSS presque inexistante, presque nulle. C'était «l'âge sombre» d'Internet.

Illustration CSS Dark Times

Événements fondamentaux de la nouvelle ère du CSS


J'étais développeur à l'époque, et j'ai donc vu deux événements importants qui ont changé le monde du CSS et du Web dans son ensemble:

  1. Le début de l'ère des smartphones (29 juin 2007) - tout a commencé avec la sortie du premier iPhone. Cette version nécessitait la prise en charge de nouvelles fonctionnalités CSS adaptées à la nouvelle catégorie d'appareils Web.
  2. Version du navigateur Chrome (2 septembre 2008) - Chrome était un nouveau navigateur qui a commencé comme une application de bureau. Jusque-là, Internet Explorer était le principal dirigeant d'Internet et dictait son développement.

Navigateur Chrome et Steve Jobs avec iPhone à la conférence 2007, collage

Pourquoi les développeurs Frontend traitent à la fois CSS et JavaScript


À cette époque, l'idée que les développeurs Frontend devraient gérer toutes les capacités du client était assez courante. Ensuite, il n'y avait que quelques règles CSS. Le CSS s'est maintenant étendu et une telle vision n'est plus pertinente.

CSS 3, HTML 5 et JavaScript: une nouvelle ère


Il est difficile de dire exactement quand CSS 3 est né, car il a été développé depuis 1999. Un véritable support sur Internet a commencé en 2011. Chrome et Firefox augmentaient alors leur part de marché. Les smartphones sont devenus très populaires. Avec leurs propres navigateurs, ils ont tous commencé à prendre en charge les premières nouvelles fonctionnalités CSS 3.

Ces changements ont réduit la popularité d'Internet Explorer. À cette époque, il s'agissait toujours d'un navigateur important, mais Microsoft s'est rendu compte qu'il devait commencer à prêter attention aux spécifications et au développement CSS. Ils ont sorti Internet Explorer 9.

Nouveau CSS


CSS 3 a maintenant 10 ans, pourquoi pas CSS 4? CSS 3, contrairement à CSS 2.1, est un standard ouvert. Grâce à cela, il est constamment mis à jour. Il n'est pas nécessaire de nommer la nouvelle version «CSS 4», car CSS 3 est un développement continu, une version pour toujours.
image

Depuis 2011, chaque mise à jour du navigateur inclut de nouvelles fonctionnalités CSS. Au cours des dernières années, la plupart des navigateurs - Chrome, Firefox, Opera, Edge - sont mis à jour presque tous les mois (Safari est mis à jour principalement une fois par an). Cette fréquence signifie que nous obtenons de nouvelles fonctionnalités CSS presque dès qu'elles apparaissent.

Quoi de neuf en CSS au cours des 10 dernières années


Au cours des dix dernières années, de nombreuses nouvelles spécifications sont apparues pour différents types
de modules CSS, par exemple:

  1. Layout — , Flexbox, CSS-, , writing mode ;
  2. Typography — , font-variant, line-breaking;
  3. Shapes & Graphics — , , blend-mode, clip-path, shapes ..
  4. Animations & Transforms — CSS/SVG , transitions, transforms, will-change.
  5. Units — viewport vw/vh/vmin/vmax, rem, calc(), contain, fit-content, min-content, max-content;
  6. CSS preprocessor — sass, less, stylus, postCSS
  7. — SVG, @support, CSS .

Vous remarquerez peut-être que de nombreuses nouvelles fonctionnalités relèvent de la responsabilité du développeur frontend. Cela signifie qu'il doit acquérir de l'expérience dans chacun d'eux. Mais ce n'est même pas une liste complète.

Dans la vraie vie, un développeur Web est presque impossible d'avoir même un niveau de compréhension de base de toutes ces nouvelles fonctionnalités. De plus, JavaScript s'est développé en parallèle. Et il a développé, peut-être même plus que CSS. Cela rend encore plus difficile pour une personne de suivre tous les développements.

L'industrie du Web Big Error


Cette situation, dans laquelle les développeurs frontaux ne pouvaient pas faire face à la nouvelle complexité de CSS, a créé un nouveau mouvement appelé "Comment ne pas apprendre CSS".
Un nouveau mouvement appelé "Don't Learn CSS"

Les premiers frameworks CSS


Cette erreur a commencé avec des frameworks tels que Bootstrap et Foundation. La première sortie de chacun d'eux a eu lieu en 2011. Cette date particulière n'est pas accidentelle - ce sont les premières années de CSS3, du responsive design, des sites Web mobiles et de la composition multi-navigateur.

Je n'ai jamais essayé de plonger profondément dans Bootstrap, car je n'ai jamais aimé sa convention de nommage CSS non sémantique. En aidant d'autres développeurs Web de la communauté , j'ai rapidement réalisé que Bootstrap ne convient que pour ces cas lorsque vous l'utilisez tel quel, sans essayer de le personnaliser pour vous-même.

Capture d'écran du balisage Bootstrap
Bootstrap HTML - la plupart des classes ne sont pas sémantiques.

Angular 2: le premier framework compatible JavaScript


Le nouvel Angular a été le premier à introduire des styles encapsulés. C'était un moyen de débarrasser le développeur Web inexpérimenté de la nécessité de comprendre la cascade CSS. En utilisant cette méthode, vous pouvez créer des styles globaux et avoir toujours des styles locaux pour chaque composant.

De toutes les différentes idées de développement, l'idée de styles encapsulés est, à mon avis, bonne car vous pouvez toujours créer à la fois des styles globaux et des styles encapsulés pour les composants. De plus, nous avons toujours une séparation des préoccupations pour CSS / SASS, pour HTML et pour JavaScript. Nous pouvons profiter d'un moyen simple de télécharger uniquement les styles nécessaires.

Capture d'écran de la structure des fichiers dans un projet avec Angular

React - la mort de la sémantique!


React va plus loin dans cette idée et écrit tout le HTML et CSS dans JavaSscript. L'objectif de créer des styles réutilisables est mort avec React. Il génère automatiquement des noms de classe CSS; ainsi, le code devient illisible et impossible à comprendre, à la fois à cause des noms de classe CSS et à cause du HTML non sémantique. De mon point de vue, cela ressemble à la façon dont CSS et HTML étaient écrits au début d'Internet, peu importe à quoi ressemblaient CSS ou HTML pendant leur fonctionnement.

Capture d'écran du balisage de code React
React - noms de classe CSS illisibles

Pourquoi est-ce si mauvais? Lorsque vous avez un vrai problème CSS et qu'un développeur frontal normal ne peut pas le résoudre et a besoin d'un développeur CSS expérimenté, le code React déroutant se met en travers. Oui, les deux développeurs Web peuvent le résoudre ensemble, mais cela prend du temps à deux développeurs Web expérimentés.

Réveillez-vous!


Les développeurs frontaux ne glissent pas en CSS! Quelqu'un doit le dire à haute voix! Oui, je sais que c'est une généralisation grossière et donc pas 100% correcte, mais je n'essaye pas d'être 100% correcte.
Avant de continuer, vous devriez en savoir un peu plus sur moi.

Coq sur le fond du soleil levant, photographie
Réveillez-vous - les développeurs frontend ne traînent pas en CSS!

Qui suis je


J'ai commencé en tant que développeur front-end début 2007.
Au début de 2012, j'ai presque complètement arrêté d'écrire JavaScript, la principale raison était que j'aimais beaucoup CSS, et JavaScript était beaucoup moins.

De 2012 à aujourd'hui, puisque je ne me suis concentré que sur le CSS, j'ai développé un avantage dans ce domaine. Au fil des ans, j'ai écrit de nombreux articles sur CSS , fondé la communauté CSS locale avec 5 000 membres et eu d' innombrables conversations lors de réunions, séminaires et conférences.

Je suis avec un microphone lors d'une conférence, photographie
Je parle à ConFrontJS 2019 à Varsovie, en Pologne,

pourquoi je vous raconte tout cela?Parce que je suis toujours une sorte de licorne dans mon pays et dans l'industrie du web. Oui, je reçois beaucoup de remerciements, mais il y en a un gros mais! Bien que cela fonctionne pour moi parce que je suis bien connu dans l'industrie Web de mon pays, il est difficile pour les autres de devenir le même parce que l'industrie Web essaie toujours de conserver «l'ancien nom du développeur Frontend» (ce qui signifie essayer d'écrire du JavaScript et du CSS de première classe) .

Dans mon pays, je connais les meilleurs développeurs Frontend. Comme je suis intéressé à comprendre l'industrie du Web, je demande toujours à ces meilleurs talents Frontend s'ils pensent qu'ils sont bons en CSS. Leur réponse continue de m'étonner - la plupart d'entre eux ne se sentent pas en sécurité avec CSS, et ils sont toujours surpris par les développeurs comme moi qui aiment CSS.

L'industrie du Web doit changer


Bien que cela ait fonctionné jusqu'en 2010, cela ne peut pas continuer en 2020. L'industrie du Web a changé, et il est temps de mûrir et d'abandonner les premiers titres d'emploi dans l'industrie du Web et de passer à un nouveau positionnement.
Un positionnement qui répondra aux besoins de notre temps. Au début, les grandes entreprises. Puis à tout le monde.

Chiffres 2020 belle police, illustration

Quel est l'intérêt des entreprises?


En 2020, CSS est une compétence importante. Alors que les entreprises tentent d'économiser de l'argent, elles peuvent finir par dépenser plus d'argent. Au fil des années de travail en tant que développeur Web, j'ai vu comment les développeurs passaient trop de temps sur ce qu'un développeur CSS spécialisé pouvait résoudre en 10 minutes et avec un code plus productif.
En 2020, CSS est une compétence importante.

Quels peuvent être les nouveaux titres d'emploi?


Au cours des huit dernières années, j'ai changé de poste à plusieurs reprises. J'ai fait cela pour expliquer mes capacités aux personnes qui voient mon profil LinkedIn .

Au début, je m'appelais CSS Master (du nom de la communauté que j'ai fondée - CSS Masters Israel ). C'était amusant de voir peu de temps après cette annonce de travail avec un tel titre. J'ai réalisé qu'il y a des entreprises qui ont besoin d'un développeur CSS, mais ne savent pas comment le nommer correctement.

Une photographie d'une partie d'un formulaire de demande d'emploi, une image dénuée de sens

Plus tard, j'ai changé plusieurs fois le nom de mon poste (UI / CSS - Développeur / Développeur d'interface / Ingénieur / Architecte / Expert), essayant d'adapter mes capacités au nom du travail.

Ne soyez pas juste un développeur CSS


De nos jours, nous avons plusieurs types de développeurs spécialisés dans la partie visuelle, tels que CSS et, par exemple, SVG. Je vais essayer de définir ces types ici :

Développeur CSS - Ce nom est destiné aux professionnels de niveau intermédiaire CSS. Ce sont des développeurs qui peuvent prendre la conception et la convertir facilement en CSS.

Architecte CSS- Cette catégorie est destinée aux développeurs, comme moi, qui, en plus de construire CSS efficacement, sont des experts dans la planification de la séparation CSS et la construction en une structure de bâtiment complexe. Contrairement aux développeurs CSS, les architectes CSS sont plus expérimentés et savent comment dimensionner intelligemment de grands projets, avec des développeurs CSS supplémentaires travaillant dans leur équipe. De plus, ils communiquent avec d'autres développeurs Web, chefs de projet et concepteurs Web.

De nombreux canards en caoutchouc jaune différents présentant une variété de professions, illustration
La variété est magnifique!

Développeur d'animations CSS - De nos jours, nous pouvons améliorer l'expérience utilisateur presque sans effort en utilisant des animations CSS ou des animations SVG, transformant ainsi un bon projet en un fantastique. Ce travail peut convenir aux grandes entreprises.

Ce sont les besoins les plus courants pour 2020, mais il existe d'autres types de développeurs spécialisés, tels que:


Il peut y en avoir plus - les possibilités sont infinies!

finalement


Dans cet article, j'ai cherché à faire prendre conscience d'un sujet qui, il me semble, n'a pas encore été abordé. Mon objectif est de mettre l'industrie du Web sur la bonne voie.

En plus de mon article, il y a aussi des articles sur ce sujet d'autres points de vue:


À la fin


Si vous avez aimé cet article, je vous serais reconnaissant de le partager avec d'autres afin que cette idée puisse sensibiliser davantage l'industrie du Web.

Qui suis je?


Je m'appelle Elad Shechter, je suis un développeur Web spécialisé dans l'architecture CSS et HTML. Je travaille pour investment.com .

Mon twitter et mon site web .

Je suis à l'arrière-plan du projecteur, je parle du projet, de la photographie

More articles:


All Articles