Formation Architecture CSS

Dernière mise à jour le 31 juillet 2024 à 18:51

Architecturer correctement le code CSS pour qu’il soit cohérent, performant et qu’il puisse être facilement pris en main par les différents intervenants n’est pas chose aisée. La formation Architecture CSS comble ce besoin en faisant découvrir aux apprenant·e·s une méthode d’architecture permettant d’organiser le code CSS afin qu’il soit fonctionnel, maintenable et évolutif.

Développée en 2015 par Harry Roberts, cette méthode (ITCSS pour Inverted Triangle CSS) est parfaitement éprouvée et applicable à tous les projets : elle peut être employée sur tous les types de site, et ce quels que soient leur trafic, leur historique ou la taille de leur équipe de développement. Cerise sur le gâteau, elle est utilisable avec n’importe quelle convention de nommage (et s’accorde particulièrement bien avec BEM).

  • Bonnes pratiques d’intégration
  • Gestion intelligente de la spécificité
  • Réutilisabilité des composants
  • Utilisation d’espaces de nom
  • Simplification du travail en équipe
  • Cas d’exemples concrets

Objectifs

La formation Architecture CSS vise à permettre aux apprenant·e·s de :

  • Organiser leur code CSS de façon logique et prévisible pour améliorer leur productivité ;
  • tirer le meilleur parti de la cascade afin de limiter les surcharges et éviter les guerres de spécificité ;
  • développer de façon modulaire pour favoriser la réutilisabilité et l’évolutivité du code ;
  • utiliser des espaces de nom pour prévenir les fuites de styles ;
  • regrouper les styles par couches fonctionnelles pour faciliter le travail en équipe et la maintenance ;
  • encourager la mise en œuvre de méthodologies et de conventions de nommage communes dans l’entreprise.

Programme

Pourquoi cette méthode ?

Rappel sur le fonctionnement de CSS

  • Anatomie d’une règle
  • Les origines de la règle : les styles de l’agent utilisateur, de l’utilisateur et de l’auteur
  • Comprendre le calcul de la spécificité des sélecteurs
  • La notion d’importance et le cas particulier des propriétés raccourcies
  • Le principe de l’héritage
  • La portée des styles

Problèmes d’une organisation CSS « traditionnelle »

  • Hiérarchie des styles imprévisible
  • Gestion chaotique de la spécificité
  • Abus de sélecteurs trop spécifiques

ITCSS (Inverted Triangle CSS)

Objectifs

  • Ordonner les déclarations en s’appuyant sur le mode d’analyse du navigateur
  • Avoir un niveau de spécificité qui évolue de façon logique et rationnelle
  • Éviter les guerres de spécificité

Principes fondamentaux (a.k.a. les 3 côtés du triangle)

  • Spécificité : quel poids le sélecteur doit-il avoir ?
  • Précision : à quel point le sélecteur doit-il être détaillé ?
  • Portée : combien d’éléments le sélecteur doit-il concerner ?

Bénéfices

  • Simplifier la (re)prise en main du code
  • Limiter le nombre de règles en exploitant au maximum le principe de la cascade
  • Faciliter la maintenance en groupant les styles par couches fonctionnelles
  • Savoir où placer les styles au sein du code CSS
  • Privilégier une approche modulaire en s’appuyant sur OOCSS (Object Oriented CSS)
  • Donner aux règles le niveau de priorité adéquate
  • Prévenir les surcharges accidentelles non souhaitées

En pratique

  • Comment est structuré le projet ?
  • Quelle dénomination est utilisée pour les fichiers ?
  • Dans quel ordre sont déclarés les styles ?

BEM + ITCSS = BEMIT

Convention de nommage BEM

  • Syntaxe Block Element Modifier
  • Auto-documentation du code (HTML et CSS)
  • Indépendance entre le code CSS et la structure du DOM
  • Savoir distinguer un bloc d’un élément

Extensions ITCSS

  • Préfixes et espaces de nom : renseigner la couche à laquelle le style appartient
  • Suffixes responsive : indiquer le palier sur lequel le style est appliqué
  • Organisation des attributs HTML : respecter un ordre d’apparition

Un p’tit document ?

Imprimer ou télécharger en PDF le programme et les infos

Formatrice

Corinne Schillinger

Corinne Schillinger

Titulaire d’une maîtrise de « Concepteur-Designer graphique et multimédia » obtenue en 2005, Corinne a fait ses armes dans le domaine du développement web avant de devenir intégratrice indépendante en 2009.

Particulièrement sensible aux problématiques d’accessibilité, elle devient Experte AccessiWeb et commence à enseigner les bonnes pratiques de développement en formation post-Bac.

Depuis 2010, elle anime des conférences et des ateliers sur le thème du développement web partout en France et publie fin 2012 l’ouvrage web de référence « Intégration web - les bonnes pratiques » aux éditions Eyrolles.

Corinne est consultante front-end chez Inseo.

Une formation rien que pour vous ?

Pour tous vos besoins intra-entreprise, selon le programme catalogue ou carrément sur-mesure, ne vous en faites pas : on sait faire ! 😊

Toutes nos formations sont disponibles en intra-entreprise et peuvent être personnalisées si vous le souhaitez, en accord avec la personne intervenante. Les tarifs indicatifs figurant sur cette page pour de l’intra-entreprise s’entendent pour un programme catalogue.

Lors d’une personnalisation, un surcoût est à prévoir qui dépendra naturellement de l’ampleur du travail de création sur-mesure qu’il nous faudra effectuer pour répondre à votre besoin. Après avoir échangé à ce sujet, nos intervenants estimeront la charge et nous pourrons vous proposer un devis ajusté.

Une offre très flexible

  • En présentiel dans vos locaux ou des locaux tiers, en France ou partout dans le Monde
  • En distanciel via Zoom ou Teams
  • En hybride, selon les besoins et envies de présentiel / distanciel des apprenant·e·s
  • En français ou en anglais, à quelques exceptions près :
    • Les formations Performances Web et Architecture CSS ne sont données qu’en français
    • Les formations SwiftUI et Swift Concurrency + Combine de John Sundell ne sont données qu’en anglais

De nombreux avantages

  • Les questions lors de la formation se concentre sur vos problématiques maison.
  • La personne intervenante a souvent l’occasion de distiller au fil de la session un peu de consulting gratuit, du coup.
  • En présentiel, vos équipes sont dans leur environnement de travail et ont accès à leurs projets, etc. (nous pouvons signer un NDA si besoin pour répondre à des questions relatives au code source de vos projets internes)
  • Pour une intra présentielle et si vous n’êtes pas en Région Parisienne, aucun frais de déplacement, d’hébergement et de repas pour vos équipes (seulement ceux de la personne intervenante).
  • Lorsque votre nombre d’apprenant·e·s approche de nos plafonds de capacité (typiquement 5 ou 10 personnes), le coût pédagogique est souvent inférieur à son équivalent en inter-entreprises.
  • Selon vos modes de financement, recourir à une intra-entreprise peut permettre de bénéficier de fonds plus importants (notamment en Plan chez votre OPCO, et souvent pour le FSE ou les fonds alloués par les Régions).

Alors, ça vous intéresse ?

Nous aussi ! 😊 Utilisez le lien ci-dessous afin de nous faire une demande qualifiée pour cette formation, on vous recontactera très vite.

Habituellement, le coût pédagogique d’une intra pour cette formation, forfaitaire jusqu’à 10 apprenant·e·s, est de 6 000 € HT.

Demander ma formation intra / sur mesure

Public visé

La formation Architecture CSS s’adresse à toutes les personnes amenées à écrire du code CSS (occasionnellement ou régulièrement), et ce quel que soit leur profil.

Elle vise aussi bien les profils front-end ou full stack qui manient les feuilles de styles au quotidien (et qui souhaitent améliorer la qualité et la maintenabilité de leur code), que les profils back-end qui mettent en place des règles CSS pour répondre à un besoin ponctuel.

Seule une connaissance « standard » de la couche client est attendue (HTML et CSS donc). Spécifiquement, les apprenant·e·s doivent avoir déjà eu à intégrer au moins 10 pages web, en prenant en charge les volets HTML et CSS (mais pas nécessairement JS).

Pré-requis

Cette formation n’a pas de pré-requis (acquis exigés contrôlables par tests, diplômes, certifications…).

Moyens pédagogiques & techniques

  • Toutes nos formations sont synchrones, y compris les sessions distancielles : on est « en direct », pas sur la base de vidéos pré-enregistrées.
  • Nous n’envisageons pas pour le moment de proposer à nouveau des sessions inter-entreprises présentielles avant, au plus tôt, le 1er avril 2022.
  • Un riche support de cours est fourni, qui sert de fil conducteur. Il contient généralement une présentation (diapos) détaillée et des supports de départ dédiés pour chaque partie pratique.
  • Les apprenant·e·s peuvent poser leurs questions à tout moment.
  • Les sessions alternent théorie et pratique par intervalles courts (de 5 minutes à 1 heure)
  • Les parties pratiques reposent sur des mises en situation concrètes (ex. code source de départ, dépôt Git de départ, exercice en ligne avec énoncé et documentation, etc.)
  • Les parties pratiques sont réalisées soit en individuel, soit en sous-groupes susceptibles de varier d’un exercice à l’autre, afin de tirer parti du pair programming et mettre en avant la collaboration.
  • Les sessions distancielles utilisent une réunion périodique Zoom accessible via le client installable ou le client pur web (sans installation ni privilèges spécifiques). Elles tirent parti notamment des fonctionnalités de vignettes vidéo, partage d’écran, de discussions, de la découpe en sous-salles et potentiellement des quizzes et annotations / tableaux blancs.

Moyens d’évaluation et de suivi

  • Chaque demi-journée de formation fait l’objet d’un émargement (numérique ou papier). Pour les sessions distancielles, si un·e apprenant·e ne fournit pas son émargement complet dans les temps, les journaux de connexion Zoom feront foi.
  • Chaque première période dans la journée commence par le « debrief » : pendant environ une demi-heure, on fait collectivement ré-émerger les connaissances abordées pour la première fois lors de la journée précédente, afin de remettre tout le monde « dans le bain », de consolider la compréhension et de renforcer l’entente de groupe.
  • Tout au long de la formation, la validation des acquis se fait par la réalisation réussie des parties pratiques (exercices, mini-projets, labos, mises en situation diverses, etc.). Des quiz interactifs complètent parfois la mise en pratique. Le formateur / la formatrice reste disponible pour toute question ou tout point de blocage durant les parties pratiques.
  • Si un·e apprenant·e manifeste une difficulté, le formateur ou la formatrice peut choisir de l’accompagner spécifiquement sur son poste de travail le temps nécessaire, y compris lors de sessions distancielles grâce aux fonctionnalités dédiées de Zoom (assistance individuelle / one-to-one).
  • À l’issue de la session, chaque apprenant·e peut recevoir son attestation de fin de formation (sur demande), et pour les sessions distancielles, nous émettons un certificat de réalisation proforma, utile notamment pour la prise en charge par un financeur tiers (ex. OPCO).
  • Une fois la formation terminée, chaque apprenant·e reçoit un lien vers un questionnaire d’évaluation à chaud, qui lui permet notamment d’exprimer son ressenti sur l’atteinte (effective ou à court terme) des objectifs de la formation.

Les apprenant·e·s reçoivent, à chaque début de période, un accès aux diapositives du support de cours au format web, afin de pouvoir faciliter leur suivi.

Après la session, ils reçoivent par ailleurs :

  • un e-mail de debrief très fourni et riche en ressources,
  • une archive de référence, contenant les éléments de code finalisés, les slides de toute la formation et diverses ressources complémentaires.

L’évaluation des acquis se fait en cours de formation, au moyen de la réussite des exercices interactifs.

Besoins matériels et logiciels

  • Disposer d’un ordinateur de performance suffisante, correctement configuré (notamment selon l’éventuel guide d’installation associé à la formation et indiqué au plus tard en convocation)
  • Cet ordinateur doit être équipé d’une webcam, d’un micro et d’une sortie audio
  • Disposer d’une connexion internet avec un débit minimal descendant/montant de 1Mbps, et idéalement au moins 5Mbps (tester ici)
  • Pouvoir exécuter Zoom, soit en tant que logiciel installé, soit via le client 100% web. Le bon fonctionnement du client installé peut être testé ici.
    Il est nécessaire de disposer de Git et d’un éditeur de code (ex. VS Code) sur la machine afin de pouvoir suivre les ateliers et exercices.

Notre guide d’installation vous aide à installer ces logiciels sur votre système d’exploitation favori.

Modalités d’inscription et délais d’accès

Quel que soit le type de session que vous visez (intra- ou inter-entreprises, distanciel ou présentiel), la demande initiale (de devis, de convention…) se fait en ligne sur la page de la formation souhaitée. Vous trouverez ci-avant des liens de demande de convention pour chaque session inter-entreprises ayant de la disponibilité, un bouton de demande de proposition pour une session intra-entreprise, et pour toute autre question, un bouton de contact plus bas sur cette page. Les formulaires en ligne sont à privilégier car ils accélèrent le traitement en évitant la multiplication des échanges e-mails afin d’obtenir l’ensemble des informations nécessaires.

Pour une session inter-entreprise déjà planifiée, nous répondons aux demandes de devis et conventions de formation (qui valent devis) dans un délai maximum de 48h ouvrées (et le plus souvent, en quelques minutes). Pour des sessions intra-entreprise, nous vous recontactons en général sous 72h ouvrées pour affiner votre besoin et vous préparer une proposition adaptée au mieux.

Les e-mails fournissant les devis et conventions de formation, ainsi que les pages de nos formations, fournissent un lien vers un questionnaire en ligne de positionnement des apprenant·e·s : ces informations doivent nous parvenir au plus tôt, idéalement avant signature, afin que nous puissions valider la bonne adéquation de la prestation à son public.

Les convocations partent par e-mail au plus tard 7 jours avant le début de la session, date à laquelle la décision éventuelle d’annulation (typiquement en raison d’un quorum de participants non-atteint pour de l’inter-entreprises) est prononcée. Si la session est confirmée avant ce délai, et à votre demande, nous pouvons vous envoyer les convocations plus tôt.

Pour une session inter-entreprise, il est possible de s’inscrire en ligne (demande de convention et renvoi par e-mail de la convention signée) jusqu’à la veille du début de la session, sous réserve que la disponibilité demeure. Si le délai nominal d’envoi de convocation est déjà passé, celle-ci est envoyée immédiatement à réception de la convention signée.

Toutefois, dans le cas d’un client particulier (personne physique), les délais légaux de rétractation peuvent exiger une contractualisation suffisamment en amont de la session. Ces délais sont de 10 jours calendaires pour une session présentielle, et 14 jours calendaires pour une distancielle. Afin de permettre une inscription de dernière minute aux clients personnes physiques, celles-ci ont la possibilité de renoncer explicitement à leur droit de rétractation lors d’une demande de convention en ligne tardive.

En cas de subrogation de paiement (OPCO, Pôle Emploi, Région, UE, etc.) il est impératif que nous recevions l’accord de financement avant le dernier jour de la formation. En cas de financement refusé ou partiel, le client est redevable de plein droit du reliquat de prise en charge.

Vous pourrez retrouver toutes les informations sur les modalités d’inscription et de paiement, l’annulation et le remboursement dans nos Conditions Générales de Vente.

Accueil PSH / PBS

La loi du 5 septembre 2018 pour la « liberté de choisir son avenir professionnel » a pour objectif de faciliter l’accès à l’emploi des personnes en situation de handicap.

Notre organisme a à cœur de donner à tou·te·s les mêmes chances d’accéder à (ou de se maintenir dans) l’emploi.

Nous pouvons adapter certaines de nos modalités de formation : pour cela, étudions ensemble vos besoins.

N’hésitez pas à contacter notre Référent Handicap, Christophe Porteneuve, par e-mail ou téléphone.

N’hésitez pas à contacter notre Référent Handicap, Christophe Porteneuve, par e-mail à handicap@delicious-insights.com ou téléphone au 06 62 05 96 56.

Comment financer votre formation ?

Vous trouverez tous les détails sur notre page Financement, mais voici déjà quelques éléments pour vous repérer.

Le plus basique, naturellement, consiste à traiter la formation comme une prestation classique : vous recevez une facture et vous la payez directement. Ce mode est évidemment possible pour tout type de client.

Il y a souvent des aides

En revanche, en France, il existe un large écosystème de financement de la formation professionnelle continue (FPC), avec pas mal de leviers que vous pouvez mobiliser selon votre situation propre. On trouve notamment (liste non exhaustive) :

  • Votre entreprise, qui au-delà d’une certaine taille gère en interne son « plan formation » (dont le vrai nom est Plan de Développement des Compétences), ce qui est souvent le cas à partir de 500 salarié·e·s.
  • L’OPCO (voire les OPCO ; ex. Atlas, Afdas, Akto, Opco2i, Opco EP) auquel est rattachée votre entreprise, si vous êtes salarié·e
  • Le FAF (ex. FIFPL, FAFCEA, AGEFICE) auquel vous êtes rattaché·e, si vous êtes indépendant·e / non salarié·e
  • Pôle Emploi, si vous êtes demandeur d’emploi
  • Le Fond Social Européen (FSE), si votre entreprise est éligible
  • Les Régions, qui proposent souvent des aides spécifiques pour les entreprises voire particuliers
  • Votre Compte Personnel de Formation (CPF), que vous pouvez utiliser librement, en solo ou en co-construction avec votre employeur.

Alors déjà, pour le CPF…

TL;PL : pas pour le moment, ni chez nous ni ailleurs 😢

Même si le dispositif évolue fortement depuis son entrée en vigueur (le 1er janvier 2015, en remplacement du DIF), il conserve une exigence forte : les formations financées doivent être certifiantes au regard de l’État, c’est-à-dire contribuer formellement à une Certification enregistrée au Répertoire National des Certifications Professionnelles (RNCP) ou au Répertoire Spécifique (RS), à titre intégral ou pour une partie des Blocs de Compétences de ces Certifications.

Cette exigence, qui visait à évincer du marché les innombrables formations fantaisistes, sans substance, de faible qualité ou simplement sans bénéfice concret pour l’employabilité, a toutefois exclu de facto le champ du développement informatique, champ qui était pourtant annoncé comme une priorité du CPF.

En effet, ce champ est traité presque exclusivement par des formations courtes, ciblées, sur des technologies et savoir-faire en perpétuel renouvellement. En face, la lourdeur pharaonique du processus de conception, de dépôt et d’enregistrement (un an en moyenne pour l’ensemble) des certifications reconnues par l’État (dont la nature-même est plus en phase avec les parcours de formation longs, sur 3 à 24 mois) crée une dissonance systématique entre la réalité du marché et les certifications disponibles. La charge administrative pour faire « vivre » sa certification par la suite (qui doit être renouvelée très régulièrement) constitue également une imposante barrière d’entrée pour les Organismes.

Ainsi, au 1er février 2023, les seuls aspects du développement informatique effectivement couverts par des certifications enregistrées sur lesquels un Organisme de Formation pourrait tenter de s’appuyer sont Python et Wordpress. Il existe bien sûr d’autres aspects, mais dans des certifications utilisées exclusivement par leurs certificateurs, donc non accessibles à des Organismes tiers comme le nôtre.

Nous travaillons donc en 2023 à créer de toutes pièces notre propre certification, qui permettrait de rendre éligible l’essentiel de nos formations. Mais c’est très long, ça n’aboutira pas avant 2024. Dans l’intervalle, nous cherchons à nous adosser à des Blocs de Compétences pertinents de Certifications sérieuses, mais ils sont bien difficiles à trouver, et les partenariats sont ensuite délicats à négocier.

Bref, pour le moment, chez nous comme ailleurs, oublie ton CPF pour tes formations courtes.

Et mon OPCO alors ?

Les OPCO sont l’interlocuteur frontal de ton entreprise pour plusieurs dispositifs de financement :

  • Le Plan de Développement des Compétences. C’est la voie royale, mais les OPCO ne cessent de restreindre chaque année davantage les critères de financement. En pratique, les TPE entre 11 et 49 salarié·e·s sont souvent les plus mal loties, avec des plafonds annuels très bas (mais souvent un peu plus élevés pour de l’intra que pour de l’inter).
  • Le FNE-Formation. Réactivé en 2023, il permet aux entreprises de financer entre 50 et 70% du coût de la formation, cumulables avec les autres dispositifs.
  • Les Actions Collectives. Ce sont des plans de formations uniformisés, co-construits par l’OPCO et leurs partenaires de la branche professionnelle de ton entreprise, et qui ont fait l’objet d’un appel d’offres pour recruter des Organismes de Formations (OF) acceptant de former sur ce programme (peu ou prou), à un tarif négocie, souvent nettement plus bas que le tarif « en direct » pour la même formation. En contrepartie, l’OPCO garantit le financement intégral du coût négocié, avec des plafonds annuels nettement plus généreux. Le souci, c’est que ça ne couvre qu’une partie du domaine, c’est très rarement mis à jour, et les programmes proposés sont souvent déjà pas top au moment de leur sortie. Par ailleurs, au-delà de la période de l’appel d’offres, un Organisme de Formation ne peut plus être ajouté. Nous ne sommes donc pas concernés pour le moment.
  • Le FSE est généralement co-instruit par l’OPCO ; il s’agit plutôt de parcours de formation, souvent pour plusieurs personnes, dans un contexte d’entreprise qui doit être stratégique (virage technologique pour retrouver de la compétitivité, etc.) mais ça peut prendre en charge 50% du coût avec de hauts plafonds, et le reste peut être financé par d’autres dispositifs.
  • Les Plans spécifiques de l’OPCO (par exemple les « Parcours stratégiques TPE/PME » d’Atlas)
  • Les PSE (Plans de Sauvegarde de l’Emploi) lors de licenciements économiques ou départs volontaires par exemple.
  • Le FNE Formation a beaucoup servi depuis le début du Covid-19 mais n’est plus mobilisable aujourd’hui.
  • Tout ce qui touche à l’alternance (mais nos formations ne sont pas concernées)

Je fais comment pour en savoir plus ?

Vous pouvez déjà consulter notre page Financement, qui rentre davantage dans le détail. Gardez à l’esprit que chaque dossier est unique, en pratique, et que les situations spécifiques de votre éventuel employeur et de vous conditionnent la liste des possibilités de financement.

Si votre entreprise passe systématiquement par son OPCO, nous vous recommandons tout particulièrement de faire que votre chargée de formation (RH, RF, etc.) échange au téléphone avec son interlocuteur chez l’OPCO pour déterminer précisément les aides mobilisables.

De manière contre-intuitive, parfois monter un dossier plus ambitieux (plus de personnes, plus d’heures, et un véritable parcours de formations) permet de déverouiller des financements beaucoup plus complets qu’une simple formation pour une seule personne ! (C’était notamment le cas pour le dispositif FNE Formation étendu, et pour des dispositifs type Plan TPE / PME chez certains OPCO).

Et si même comme ça c’est trop cher ?

Nos tarifs sont très ajustés, mais pour beaucoup de monde, ça reste hélas inaccessible. Si vous n’arrivez décidément pas à monter un financement acceptable pour nos formations classiques, nous avons pensé à vous : découvrez nos Workshops.

Besoin d’une intra-entreprise ou sur-mesure ?

Pour une formation personnalisée, en accord avec vos besoins, dans vos locaux, ailleurs ou à distance, décrivez-nous votre besoin en détail.

Habituellement, le coût pédagogique d’une intra pour cette formation, forfaitaire jusqu’à 10 apprenant·e·s, est de 6 000 € HT.

Avis & satisfaction

  • 49 apprenant·e·s
  • 9 avis
  • 89% de taux de satisfaction en Expertise
  • 83% de taux de satisfaction en Moyens
  • 86% de taux de satisfaction en Pédagogie

Demander un devis d’intra

Une question ? Une angoisse ?

Détendez-vous, on a sûrement des réponses pour vous rassurer et éclaircir les choses. Alors parlons-en !

Contactez-nous