Présentation - Intégration web et bonnes pratiques avec les CSS

layout: true
            <nav>
                <span>Intégration web et bonnes pratiques avec les CSS par <strong>Manon Carbonnel</strong></span>
                <span style="float: right">2020</span>
            </nav>

---
            class: cover

.highlight[]
            # Intégration web
            .subtitle[Les bonnes pratiques en CSS : organiser proprement l'association HTML 5 et CSS 3]
            .line[]

.image-center[
            ![CSS HTML](https://pixees.fr/wp-content/uploads/2015/11/david_roche_dr_12-300x300.png)
            ]

---

class: content
            .highlight[]
            ## Quelques rappels
            .line[]

Le langage HTML permet de construire la **structure** d'un template.

Le langage CSS *Cascading Style Sheets* permet de **styliser** ces éléments.

.line[]

.image-center[
            ![BEFORE AFTER CSS](https://docs.railsbridge.org/frontend/img/css_bundler.png)
            ]

---

class: content
            .highlight[]
            ## Priorités
            .subtitle[Notion de cascade]
            .line[]

.col[
            Plus le code css est près de la balise HTML, plus il est prioritaire.

1. Directive style
            ```html
            <p style=""></p>
            ```

2. Balise style
            ```html
            <style>
                    /* code */
            </style>
            ```

3. Dans un fichier .css chargé via la balise link dans le head
            ```html
            <head>
                    <link rel="stylesheet" href="style.css" />
            </head>
            ```
            ]

---

class: content
            .highlight[]
            ## Priorités
            .subtitle[Notion de cascade]
            .line[]

.col[
            Plus le code css est près de la balise HTML, plus il est prioritaire.

1. Directive style
            ```html
            <p style=""></p>
            ```

2. Balise style
            ```html
            <style>
                    /* code */
            </style>
            ```

.col[
            Le code chargé en dernier prend la priorité.

L'id a le niveau de priorité le plus fort, ensuite c'est la classe puis la balise.

.col[
            ```css
            p {
                color: red;
            }

p {
                color: blue;
            }

p.text-muted {
                color: grey;
            }

p#id {
                color: black;
            }
            ```
            ]

.col[
            ```css
            p {
                color: red;
            }

p {
                color: blue;
            }

.text-muted {
                color: grey;
            }

#id {
                color: black;
            }
            ```
            ]

]

---

class: content
            .highlight[]
            ## Sélecteurs simples
            .subtitle[Naviguer dans le DOM]
            .line[]

.col[
            Un élément contenant deux classes
            ```css
            .class1.class2 { }
            .class1&.class2 { }
            ```

Un élément contenu dans un autre
            ```css
            .elem1 .elem2 { }
            ```

Enfants directs (uniquement) d'un élément
            ```css
            .class1 > .class2 { }
            ```
            ]

.col[
            Élément selon statut
            ```css
            a:hover { }
            input[type=radio]:checked { }
            ```
            ]

---

class: content
            .highlight[]
            ## Sélecteurs avancés
            .subtitle[Naviguer dans le DOM]
            .line[]

Le sélecteur adjacent pour agir sur l'élément suivant
            ```css
            .class1 + .class2 { }
            .class1 ~ .class2 { }
            ```

Éléments n'ayant pas une classe
            ```css
            .class1:not(class2) { }
            ```

Cibler un élement par son index
            ```css
            li:first-child { }

li:nth-child(3) { }
            li:nth-child(3n) { }

li:nth-last-of-type(3n) { }
            ```

---

class: content
            .highlight[]
            ## Positionnements simples
            .subtitle[Position et flottement]
            .line[]

.col[
            Il y a 3 types de positionnement :

* relative
            * absolute
            * fixed

.line[]

```css
            .parent {
                position: relative;
            }

.child {
                position: absolute;
                top: 10px;
                left: 50px;
            }
            ```
            ]

.col[
            Une balise en **position : absolute** se rapporte au **premier parent** ayant une position : **relative**

Si aucun parent n'est précisé, la balise en position : absolute se rapportera à la balise *html*

Elle se place toujours, par défaut, à 0 pixel en haut et à gauche
            ]

---

class: content
            .highlight[]
            ## Positionnements avancés avec Flex
            .subtitle[Propriétés pour le parent]
            .line[]

.col[
            ```css
            .container {
                display: flex; /* ou inline-flex */
                flex-direction: row;
                flex-wrap: nowrap; /* ou wrap | wrap-reverse */
            }
            ```

.line[]

Flex directions :
            * **row** (default) : gauche à droite
            * **column** : haut vers bas

Existent aussi en sens inverse : **row-reverse** & **column-reverse**

Flex wrap :
            par défaut tous les éléments passent sur une ligne
            ]

.col[
            .text-center[
            justify-content
            ]

.image-max-height[
            ![justify-content](https://css-tricks.com/wp-content/uploads/2018/10/justify-content.svg)
            ]
            ]

---

class: content
            .highlight[]
            ## Positionnements avancés avec Flex
            .subtitle[Propriétés pour le parent]
            .line[]

.col[
            .text-center[
            align-items
            ]

.image-max-height[
            ![align-items](https://css-tricks.com/wp-content/uploads/2018/10/align-items.svg)
            ]
            ]

.col[
            .text-center[
            align-content
            ]

.image-max-height[
            ![align-content](https://css-tricks.com/wp-content/uploads/2018/10/align-content.svg)
            ]
            ]

---

class: content
            .highlight[]
            ## Positionnements avancés avec Flex
            .subtitle[Propriétés pour les enfants]
            .line[]

.col[
            ```css
            .item {
                flex-grow: <number>; /* default 0 */
                flex-shrink: <number>; /* default 1 */
                flex-basis: <length> | auto; /* default auto */
                flex: 0 1 auto; /* tout combiné */
            }
            ```

.image-resize[
            ![flex-grow](https://css-tricks.com/wp-content/uploads/2018/10/flex-grow.svg)
            ]
            ]

---

class: content
            .highlight[]
            ## Positionnements avancés avec Flex
            .subtitle[Propriétés pour les enfants]
            .line[]

.image-resize[
            ![flex-grow](https://css-tricks.com/wp-content/uploads/2018/10/flex-grow.svg)
            ]
            ]

.col[
            ```css
            .item {
                align-self: flex-start;
            }
            ```

.image-resize[
            ![align-self](https://css-tricks.com/wp-content/uploads/2018/10/align-self.svg)
            ]
            ]

---

class: content
            .highlight[]
            ## Tailles
            .subtitle[px, rem, vh, % ???]
            .line[]

* **px** : Pixel
            * **%** : Pourcentage

* **vh** : "Viewport height" - 1vh = 1% de la hauteur de la fenêtre
            * **vw** : "Viewport width" - 1vw = 1% de la largeur de la fenêtre

* **em** : Taille proportionnelle à celle du parent de l'élément courant
            * **rem** : "Root em" taille proportionnelle à celle de l'élément racine du document (balise *html*)

.line[]
            *Contrairement aux valeurs en em, la valeur en rem est constante tout au long du document.*

---

class: content
            .highlight[]
            ## Marges
            .subtitle[Intérieures, extérieures]
            .line[]

* Margin : marges extérieures

* Padding : marges intérieures

.image-right[
            ![Computed box](https://tutorial.techaltum.com/images/css-boxmodel.png)
            ]

---

class: content
            .highlight[]
            ## Pseudo
            .subtitle[Classes & éléments]
            .line[]

.col[

```css
            elem:hover,
            elem:active {
              color: grey;
            }

ui li:first-child {
              background-color: grey;
            }
            ```

```css
            p::first-line {
              color: blue;
            }
            ```

.image-resize[
            ![Pseudo éléments ex 1](https://rjdesignz.com/wp-content/uploads/2017/08/2.png)
            ]
            ]

.col[
            .image-max-height[
            ![Pseudo éléments](https://i0.wp.com/css-tricks.com/wp-content/uploads/2011/06/multiplecanvases.jpg)
            ]
            ]

---

class: content
            .highlight[]
            ## Niveaux de titres
            .line[]

.image-right[
            ![SEO Titles](https://qph.fs.quoracdn.net/main-qimg-d9389403ab1cc626cf27ed3b966dff38)
            ]

Les balises de type titre sont là pour déclarer le type d'un élément.

Elles favorisent le référencement naturel.

Organisation :
            * 1 seul h1
            * 2 ou 3 h2
            * n h3
            * n h4
            * ...

---

class: content
            .highlight[]
            ## Transitions / animations
            .line[]

Les transitions CSS vous permettent de modifier les valeurs de propriétés en douceur, sur une durée donnée.

.col[
            Voici les règles disponibles pour les transitions CSS:
            - transition
            - transition-delay
            - transition-duration
            - transition-property
            - transition-timing-function
            ]

.col[

.col[
            Exemple :

```html
            <div></div>
            ```

```css
            div {
              width: 100px;
              height: 100px;

transition-property: width;
              transition-duration: 2s;
              transition-timing-function: linear;
              transition-delay: 1s;
              /* or */
              transition: width 2s linear 1s;
            }

div:hover {
              width: 300px;
            }
            ```
            ]
            ]

---

class: content
            .highlight[]
            ## Animations
            .line[]

CSS permet l'animation d'éléments HTML qui changent progressivement d'un style à un autre, sans utiliser JavaScript.

Vous pouvez modifier autant de propriétés CSS que vous le souhaitez, autant de fois que vous le souhaitez.

Pour utiliser une animation CSS, vous devez d'abord spécifier des **keyframes** pour l'animation.

Les keyframes contiennent les styles que l'élément aura à certains moments.

.col[
            Voici les règles disponibles pour les animations CSS :
            - @keyframes
            - animation
            - animation-name
            - animation-duration
            - animation-delay
            - animation-iteration-count
            - animation-direction
            - animation-timing-function
            - animation-fill-mode
            ]

.col[

.col[
            Example:

```html
            <div></div>
            ```
            ]

.col[
            ```css
            div {
              background-color: red;
              animation-name: example;
              animation-duration: 4s;
            }

@keyframes example {
              from  { background-color: red; }
              to    { background-color: yellow; }

/* or */
              0%   { background-color: red; }
              25%  { background-color: yellow; }
              50%  { background-color: blue; }
              100% { background-color: green; }
            }
            ```
            ]
            ]

---

class: content
            .highlight[]
            ## Animations
            .line[]

CSS permet l'animation d'éléments HTML qui changent progressivement d'un style à un autre, sans utiliser JavaScript.

Vous pouvez modifier autant de propriétés CSS que vous le souhaitez, autant de fois que vous le souhaitez.

Pour utiliser une animation CSS, vous devez d'abord spécifier des **keyframes** pour l'animation.

Les keyframes contiennent les styles que l'élément aura à certains moments.

.col[
            Autre exemple:

```html
            <div></div>
            ```

```css
            div {
                animation-name: example;
                animation-duration: 5s;
                animation-timing-function: linear;
                animation-delay: 2s;
                animation-iteration-count: infinite;
                animation-direction: alternate;

/* or */
                animation: example 5s linear 2s infinite alternate;
            }

```
            ]

---

class: content
            .highlight[]
            ## Parallax
            .line[]

Le défilement **parallaxe** est un effet où le contenu d'arrière-plan (c'est-à-dire une image) est déplacé à une vitesse différente de celle du contenu de premier plan lors du défilement.

L'effet peut être vertical et/ou horizontal, mais concentrons-nous sur le vertical (le plus utilisé), qui ne nécessite que du CSS.

Voir une [démo avec défilement parallaxe](https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm) et une [démo sans](https://www.w3schools.com/howto/tryhow_css_parallax_demo_none.htm).

Vous pouvez créer des effets de parallaxe époustouflants en utilisant des librairies JavaScript supplémentaires.

.col[
            ```html
            <body>
                <div class="block"></div>
                <div class="parallax"></div>
                <div class="block"></div>
            </body>
            ```
            ]

.col[
            ```css
            p {
              height:500px;
            }

.parallax {
              /* The image used */
              background-image: url("my_image.jpg");

/* Set a specific height */
              min-height: 500px;

/* Create the parallax scrolling effect */
              background-attachment: fixed;
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
            }
            ```
            ]

---

class: content
            .highlight[]
            ## Responsive design
            .line[]

Le responsive design donne à votre page Web une belle apparence sur tous types d'appareils, que ce soit à partir d'un ordinateur, d'une tablette ou d'un smartphone.

Le responsive design utilise uniquement HTML et CSS à l'aide de **media queries**.

La plupart des frameworks frontend utilisent maintenant un système de grille avec des largeurs standard appelées **breakpoints** pour vous permettre de spécifier des règles CSS par appareil.

.col[
            ```html
            <head>
                
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
            </head>
            ```
            ]

.col[
            ```css
            /* Bootstrap frontend framework breakpoints */

/* Extra small devices (portrait phones) */
            /* code */

/* Small devices (landscape phones) */
            @media screen and (min-width: 768px) { /* code */ }

/* Medium devices (tablets) */
            @media screen and (min-width: 992px) { /* code */ }

/* Large devices (desktops) */
            @media screen and (min-width: 1200px) { /* code */ }

/* Extra large devices (large desktops) */
            @media screen and (min-width: 1200px) { /* code */ }
            ```
            ]

---

class: content
            .highlight[]
            ## Bonnes pratiques
            .line[]

.image-center[
            ![Thank you](https://media0.giphy.com/media/JaWcEIF1RpsVq/giphy.gif)
            ]

---

class: content
            .highlight[]
            ## Structure
            .subtitle[Respecter la hiérarchie HTML]
            .line[]

.image-right[
            ![Structure HTML5](http://ftsanjuan.com/projects/html5/images/tags_preview.png)
            ]

.small[Notamment lors de l'utilisation d'un framework frontend.]

.line[]

Une *div* est un conteneur, **élément de bloc** *display: block;*

Un paragraphe *p* est un **élément de bloc** destiné a du texte *display: block;*

Un *span* est un **conteneur en ligne** *display: inline;*

---

class: content
            .highlight[]
            ## Eviter la soupe de div
            .line[]

.image-center[
            ![HTML 5 Flow chart](http://html5doctor.com/downloads/h5d-sectioning-flowchart.png)
            ]

---

class: content
            .highlight[]
            ## Nommage
            .subtitle[Utiliser une convention explicite]
            .line[]

.image-right[
            ![BEM](../images/bem.png)
            ]

Par exemple, la méthodologie *BEM* :

```css
            .block__element--modifier {
                /* code */
            }
            ```

.line[]

**Pourquoi ?**

* Modularité
            * Réutilisabilité
            * Structure

---

class: content
            .highlight[]
            ## Penser mobile d'abord
            .subtitle[Optimiser votre responsive design]
            .line[]

Parce que la plupart des utilisateurs consultent les sites Web via leur smartphone.

Commencez votre conception avec le modèle et le style du smartphone, et progressez vers les grands appareils.

---

class: content
            .highlight[]
            ## Mauvaises pratiques
            .subtitle[]
            .line[]

.image-center[
            ![Please don't](https://media2.giphy.com/media/11ykUODgXjAXZu/giphy.gif?cid=3640f6095c068f0963757359517050a4)
            ]

---

class: content
            .highlight[]
            ## Mélanger les rôles
            .subtitle[Utiliser les balises html pour styliser]
            .line[]

Par exemple, pour faire ressortir un élément :
            ```html
            <h2>Mon texte</h2>
            ```

au lieu de
            ```html
            <strong>Mon texte</strong>
            ou
            <span class="text-strong">Mon texte</span>
            ```

.line[]
            **Pourquoi ?**

Le HTML est un langage déclaratif qui doit être structuré et cohérent.

Il n'est pas fait pour mettre en forme.

Une structure HTML cohérente est indispensable pour un bon référencement.

---

class: content
            .highlight[]
            ## Nommage
            .subtitle[Multiplier les classes css]
            .line[]

Par exemple :

```html
            <p class="text-blue text-center padding-15">Mon texte</p>
            ```

parce que ça revient quasiment à mettre le css dans le fichier html :

```html
            <p style="color: blue; text-align: center; padding: 15px;">Mon texte</p>
            ```

.line[]
            **Pourquoi ?**

Ce que l'on veut c'est gagner du temps et ne pas chercher partout où faire nos modifiations.

Donc il faut que toute la mise en forme soit située au même endroit : fichiers CSS séparés.

---

class: content
            .highlight[]
            ## Surcharge forcée
            .subtitle[Mettre des !important partout]
            .line[]

Par exemple :
            ```css
            .link {
                color: black !important;
            }
            ```

au lieu de
            ```css
            .navbar .link {
                color: black;
            }
            ```

.line[]
            **Pourquoi ?**

Préciser l'architecture parente du composant offre des possibilités de surcharge.

Le mot clé !important doit être utilisé de manière exceptionnelle.

---

class: content
            .highlight[]
            ## Mauvais découpage
            .subtitle[Mettre des balises de type bloc dans des balises de type inline]
            .line[]

Par exemple :
            ```html
            <span>
                <img src="#"/>
                <div>Mon texte</div>
            </span>
            ```

au lieu de :
            ```html
            <div>
                <img src="#"/>
                <p>Mon texte</p>
            </div>
            ```

.line[]
            **Pourquoi ?**

Il faut respecter la hiérarchie du DOM (référencement).

Evite les comportements innatendus en CSS.

---

class: content
            .highlight[]
            ## Conseils
            .line[]

.image-center[
            ![Conseils](https://media0.giphy.com/media/AFTWK5Qo22V2g/giphy.gif)
            ]

---

class: content
            .highlight[]
            ## Organisation
            .subtitle[S'organiser autour d'une maquette]
            .line[]

.col[
            * Identifier ce qui est commun à tous les écrans

* Découper visuellement chaque écran en blocs / grilles

* Travailler le style de façon modulaire

* Penser *mobile first* pour les sites publics

* Ajouter des sommaires dans vos feuilles de style
            ]

.col[

```css
            /*
             * CONTENTS
             *
             * SETTINGS
             * Global...............Variables and config.
             *
             * BASE
             * Headings.............H1–H6 styles.
             *
             * OBJECTS
             * Wrappers.............Wrapping & constraining elements.
             *
             * COMPONENTS
             * Illustration.........The main illustration.
             * Form.................The main page form.
             *
             * MISC
             * Buttons..............Button elements.
             * Icons................Icon elements.
             */

/*------------------------------------*\
              # SETTINGS Global
            \*------------------------------------*/
            ...
            ```
            ]

---

class: content
            .highlight[]
            ## Découper le code CSS
            .subtitle[Partir du global vers du spécifique]
            .line[]

1. Identifier les **principales variables** de la charte graphique (couleurs, polices, tailles)

2. Créer un fichier dédié pour les **éléments récurrents** (formulaires, menus, boutons)

3. Créer un fichier css global pour le **layout** (composants communs) de l'application (variables, header, nav, footer, etc)

4. Créer un fichier dédié par **composant**, qui comporteras ajouts et surcharges de style sur les éléments.

---

class: content
            .highlight[]
            ## Utiliser un Framework
            .subtitle[et un langage dynamique avec un task runner]
            .line[]

.col[
            * Utiliser un framework comme **Bootstrap**, **Angular Material**, **Vuetify** ou encore **Bulma**...

.line[]
            .line[]
            .line[]
            .image-mini[
            ![Bootstrap](https://getbootstrap.com/docs/4.1/assets/img/bootstrap-stack.png)
            ]
            .image-mini[
            ![Angular Material](https://repository-images.githubusercontent.com/220078160/9353b600-0e54-11ea-9712-b79b66b93c00)
            ]
            .image-mini[
            ![Vuetify](https://iconape.com/wp-content/png_logo_vector/vuetify.png)
            ]
            .image-mini[
            ![Bulma](https://seeklogo.com/images/B/bulma-logo-45B5145BF4-seeklogo.com.png)
            ]
            ]

.col[
            * Utiliser un langage dynamique comme **SASS** ou **LESS**

* Utiliser un task runner comme **Webpack** ou **ViteJS** pour *minifier* et *uglifier* les sorties

.line[]

.image-mini[
            ![SASS](https://la-cascade.io/content/images/2015/05/sass-logo.svg)
            ]
            .image-mini[
            ![LESS](http://lesscss.org/public/img/less_logo.png)
            ]
            .image-mini[
            ![Webpack](https://raw.githubusercontent.com/webpack/media/master/logo/icon-square-big.png)
            ]
            .image-mini[
            ![ViteJS](https://camo.githubusercontent.com/61e102d7c605ff91efedb9d7e47c1c4a07cef59d3e1da202fd74f4772122ca4e/68747470733a2f2f766974656a732e6465762f6c6f676f2e737667)
            ]
            ]

---

class: content
            .highlight[]
            ## Penser à la qualité de code
            .subtitle[avec un formatter et un linter]
            .line[]

.col[
            * Utiliser un formatter comme **Prettier**, **PostCSS**...

.line[]

.image-mini[
            ![Prettier](https://cdn.worldvectorlogo.com/logos/prettier-1.svg)
            ]
            .image-mini[
            ![Postcss](https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/PostCSS_Logo.svg/1200px-PostCSS_Logo.svg.png)
            ]
            ]

.col[
            * Utiliser un linter comme **Stylelint**

.line[]

.image-mini[
            ![Stylelint](https://cdn.worldvectorlogo.com/logos/stylelint.svg)
            ]
            ]

---

class: content
            .highlight[]
            ## Ressources supplémentaires
            .subtitle[pour la soif de savoir !]
            .line[]

.col[
            **FR**

* **La Cascade** [https://la-cascade.io/](https://la-cascade.io/)

* **Alsa créations** [https://www.alsacreations.com/](https://www.alsacreations.com/tuto/liste/2-css.html)

.line[]

.image-mini[
            ![La Cascade](https://la-cascade.io/content/images/2015/03/optimised.svg)
            ]
            .image-mini[
            ![Alsa créations](https://pbs.twimg.com/profile_images/507471438584885248/OK8krv99_400x400.png)
            ]

]

.col[
            **EN**

* **CSS-Tricks** [https://css-tricks.com/](https://css-tricks.com/)

.line[]

.image-mini[
            ![CSS-Tricks](https://i0.wp.com/css-tricks.com/wp-content/uploads/2019/06/akqRGyta_400x400.jpg)
            ]

]

---

class: content

.highlight[]
            # Et voilà !
            .subtitle[Maintenant vous avez toutes les clés pour travailler o/]
            .line[]

.image-center[
            ![](https://media0.giphy.com/media/L0aWDywDu1ziw/giphy.gif?cid=3640f6095c068f6c626f6a6355328a9e)
            ]

---
            class: cover

.highlight[]
            # Merci !
            .line[]
            .line[]

.image-center[
            ![](https://media2.giphy.com/media/Gf3fU0qPtI6uk/giphy.gif?cid=3640f6095bfff1227977333345721c64)
            ]