Formation Bonnes Pratiques CSS 3

• Unités, valeurs et fonctions

• Unités em et rem
• Unités de Viewport : vw, vh, vmin et vmax
• La valeur-fonction calc()
• La propriété box-sizin

• Sélecteurs CSS modernes
• :first-child, les premiers enfants
• + et ~, les sélecteurs d’adjacence
• [attr^= »… »], [attr$= »… »], [attr*= »… »], les sélecteurs d’attribut avancés
• Les sélecteurs d’enfants : :nth-child(), :last-child, :nth-of-type(), :only-child, etc.
• :root, :empty, :not()>
• :enabled, :disabled, :valid, :invalid, :checked, les états de formulaires
• Transformations CSS
• rotate(), la rotation d’éléments/li>
• scale(), le zoom / dézoom
• translate(), la translation
• skewX(), skewY(), la déformation
• matrix(), la combinaison de transformations
• transform-origin, le point d’origine
• Le CSS de demain (CSS4 ?)
• Les « variables » en CSS : custom properties/li>
• Positionner en adhérence avec position: sticky
• Le contour de texte avec text-stroke
• Le support de fonctionnalités avec @supports
• Cibler un parent avec :focus-within
• Ce que le CSS du futur nous réserve et comment le mettre en oeuvre
• Produire des CSS maintenables
• Méthodologies : BEM, OOCSS, SMACSS, Atomic CSS
• Outils : StyleLint, CSS comb, Editorconfig, Autoprefixer
• Bonnes pratiques générales : conventions de nommage, performance, réutilisabilité

Bonnes pratiques générales : conventions de nommage, performance, réutilisabilité

• Flexbox partie 1 : les bases
• distribution avec flex-direction et flex-wraps
• ordonnancement avec order
• alignements et centrages (justify-content, align-items)
• flexibilité (flex-grow, flex-shrink, flex-basis)

• Flexbox partie 2 : la maîtrises
• les bugs connus des navigateurs
• être un flex-container et un flex-item
• quelques valeurs méconnues
• les priorités dans Flexbox
• flex-grow, flex-shrink et flex-basis en détail
• comportements inattendus décortiqués
• Grid Layout (initiation)
• Compatibilité et différences avec Flexbox
• Glossaire : grid container, grid item, grid line, grid track, grid cell, grid area
• Construction de grilles : initialisation, colonnes, grilles/li>
• Positionnement dans la grille : classique, par « area », automatique
• Conception d’un template responsive en Grid Layout
• Grid en production : Bugs et adaptations navigateurs
• Ressources et exercices
• Sass et les préprocesseurs
• introduction aux Préprocesseurs (LESS, Sass, Stylus)
• les outils de compilation Sass
• les variables (locales, globales)
• la notation imbriquée
• les opérations et fonctions simples
• les fonctions personnalisées (mixin, extend, placeholder)
• les boucles et conditions
• Travaux Pratiques
• Les transitions et animations
• Propriétés : property, duration, delay, timing-function
• Accélération
• Propriétés supportées
• Animer avec keyframes
• Éviter les animations trop gourmandes en ressources ?