# Formation CSS ### Les bases pour styler vos applications ![FOCUS](./images/logo-focus.png)
# Sommaire * Les bases du css * L'utilisation du CSS à Klee : SASS, CSS modules, etc. * "Separation of concerns" et bonnes pratiques
# Le CSS ### Le CSS, ce n'est pas simple > "It’s almost a challenge to find a development team that’s working on a codebase that’s more than a couple of years old where the CSS isn’t the most frightening and hated part of that system." > — Andy Hume
* CSS3 a plus de 300 propriétés et s'enrichit régulièrement * une infinité de déclaration par sélecteurs * une infinité de sélecteurs par élément html * une infinité d'éléments html par sélecteur css
* 5545 règles pour 9789 sélecteurs sur lemonde.fr * 4525 règles pour 7443 sélecteurs sur figaro.fr à Klee: * 5236 règles pour 5268 sélecteurs sur Linkit * 6141 règles pour 14429 sélecteurs sur Trackit

Le CSS, ça ressemble à ça

						
	.quality-box {
	  width: calc(20% - 20px);
	  margin: 10px;
	  display: inline-block;
	}

Et ça s'ajoute comme ça

						
	

		{...}
(Sauf si vous utilisez des CSS modules ou d'autres façons dont on parlera plus tard)

les styles CSS s'appliquent à des éléments du DOM

Balises sémantiques

						
	
Lorem ipsum <strong>dolor</strong> sit amet, consectetur adipiscing <b>elit</b>. Vestibulum at molestie risus.
	Etiam nec est congue, <em>accumsan</em> sapien quis, viverra justo. Class <u>aptent</u>
	taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
	Aliquam in malesuada felis. Sed <i>laoreet</i> velit velit, eget dictum nibh suscipit vel.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at molestie risus. Etiam nec est congue, accumsan sapien quis, viverra justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam in malesuada felis. Sed laoreet velit velit, eget dictum nibh suscipit vel.

En passant

Les <div> sont faits pour afficher des blocs de contenus.

Les <span> sont faits pour afficher du texte de façon linéaire.

On ne met pas de <div> dans des <span>.

Importez vos styles

  • au sein des pages HTML
  • dans des feuilles de style
  • de manière conditionnelle

Au sein des pages

  • Import de feuille de style
  • Embedded style error_outline
  • Inline style error_outline
                        
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Application de démo</title>
    <link rel="icon" type="image/png" href="focus.png" />
    <link rel="stylesheet" href="./styles/mes-styles.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
    <style>
        body {
            padding:0;
            margin:0;
        }
    </style>
    <!--[if IE 7]><link rel="stylesheet" type="text/css" href="screen-ie7.css" /><![endif]-->
</head>
<body style="border:1px solid red;">
    // le contenu de la page
</body>
</html>

Au sein des feuilles de style

                        
@import url('/Content/header.css');

footer {
    background-color:green;
}

Styles conditionnels

// Conditional-CSS syntax examples
[if IE] - Used if the browser is IE
[if ! Opera] - Used if the browser is not Opera
[if IE 5] - Used if browser is IE 5
[if lte IE 6] - Used if the browser is IE 6 or less (IE 5, IE 4 etc)
[if ! gt IE 6] - Same effect as the previous statement, if not greater than IE 6
                            
                                
[if IE].container {
	height: 100%;
	width: 100%;
	text-align: center;
	line-height: 2em;

	[if gte IE 7]background: url('ie7.png') no-repeat center center;
	[if lte IE 6]background: url('ie.jpg') no-repeat center center;
}
http://www.conditional-css.com/usage

Sélecteur CSS

                        

Les carottes sont cuites.


Les carottes sont cuites.

                        
                    
                        
p .carotte {
    color: orange;
    text-decoration: underline;
    font-style: italic;
}

Les carottes sont cuites.

Les carottes sont cuites.

Elémentaires

Pattern Meaning CSS level
warning * Any element 2
E An element of type E 1
E.warning An E element whose class attribute is "warning" 1
E#myId An E element with ID equal to "myId" 1 
                        

Paragraphe


Paragraphe bleu

                        
                    
                        
p {
    color: green;
}
p#bleu {
    color: blue;
}

Combinaisons

Pattern Meaning CSS level
E F An F element descendant of an E element 1
E > F An F element child of an E element 2
E + F An F element immediately preceded by an E element 2
E ~ F An F element preceded by an E element 3 
                        


    Hey !
    
Les carottes sont cuites



                        
                    
                        
div > span {
    color: red;
}

Sur attributs

Pattern Meaning CSS level
E[foo] an E element with a "foo" attribute 2
E[foo="bar"] an E element whose "foo" attribute value is exactly equal to "bar" 2
E[foo~="bar"] an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar" 2
E[foo^="bar"] an E element whose "foo" attribute value begins exactly with the string "bar" 3
E[foo$="bar"] an E element whose "foo" attribute value ends exactly with the string "bar" 3
E[foo*="bar"] an E element whose "foo" attribute value contains the substring "bar" 3
E[foo|="en"] an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en" 2 
                        
table tbody tr td[align="center"] {
    text-align:center;
}

Pseudo-classes (1/3)

Expressions permettant classifier les éléments sur des caractéristiques qui ne peuvent pas être déduites du DOM
Pattern Meaning CSS level
E:root an E element, root of the document 3
E:nth-child(n) an E element, the n-th child of its parent 3
E:nth-last-child(n) an E element, the n-th child of its parent, counting from the last one 3
E:nth-of-type(n) an E element, the n-th sibling of its type 3
E:nth-last-of-type(n) an E element, the n-th sibling of its type, counting from the last one 3

Pseudo-classes (2/3)

Pattern Meaning CSS level
E:first-child an E element, first child of its parent 2
E:last-child an E element, last child of its parent 3
E:first-of-type an E element, first sibling of its type 3
E:last-of-type an E element, last sibling of its type 3
E:only-child an E element, only child of its parent 3
E:only-of-type an E element, only sibling of its type 3
E:empty an E element that has no children (including text nodes) 3

Pseudo-classes (3/3)

Pattern Meaning CSS level
E:link an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited) 1
E:visited an E element during certain user actions 1
E:active an E element during certain user actions 1 and 2
E:hover an E element during certain user actions 1 and 2
E:focus an E element during certain user actions 1 and 2
E:target an E element being the target of the referring URI 3
E:lang(fr) an element of type E in language "fr" (the document language specifies how language is determined) 2
E:enabled a user interface element E which is enabled or disabled 3
E:disabled a user interface element E which is enabled or disabled 3
E:checked a user interface element E which is checked (for instance a radio-button or checkbox) 3
E:not(s) an E element that does not match simple selector s 3
Exemples d'utilisation des pseudo-classes https://codepen.io/sgoretti/pen/aVJNeZ

Pseudo-éléments

Pseudo-éléments : expressions offrant l’accès à de l’information, du contenu, qui n’est pas directement accessible via le DOM
Pattern Meaning CSS level
E::first-line the first formatted line of an E element 1
E::first-letter the first formatted letter of an E element 1
E::before generated content before an E element 2
E::after generated content after an E element 2
Exemples d'utilisation des pseudo-éléments https://codepen.io/sgoretti/pen/jaBVav

Priorité des sélecteurs

Précédence

A égal à 1 si l'attribut "style" est défini, 0 sinon
B nombre d'ID utilisés dans le sélecteur
C nombre de classes, de pseudo-classes et d'attributs dans le sélecteur
D nombre de nom d'éléments et pseudo-éléments dans le sélecteur
Sélecteur A B C D
* {} 0 0 0 0
li {} 0 0 0 1
li::first-line {} 0 0 0 2
ul li {} 0 0 0 2
ul ol+li {} 0 0 0 3
h1 + *[rel="up"] {} 0 0 1 1
ul ol li.red {} 0 0 1 3
ul ol li:not(.red) {} 0 0 1 3
li.red.level {} 0 0 2 1
#x34y {} 0 1 0 0
style="color:red" {} 1 0 0 0
Attention: ":not" n'entre pas en compte dans le calcul de la spécificité, mais son contenu oui.

Priorité

En cas de conflit dans les styles :
  1. !important
  2. Priorité / Précédence
  3. Ordre textuel
# Priorité Les feuilles de style sont interprétées dans l'ordre suivant : 1. Feuille de style du navigateur 2. Feuille de style de l’utilisateur 3. Feuille de style du site internet
# Ordre d'évaluation 1. Feuille de style du navigateur 2. Feuille de style de l’utilisateur 3. Feuille de style du site internet 4. `!important` du site internet 5. `!important` de l’utilisateur
# Focus sur des notions importantes du CSS

position dans le flux

Définir le positionnement d'un élément par rapport :
  • aux limites de la zone d'affichage
  • aux limites de son conteneur
  • au flux HTML
                        
E {
    position: static | relative | absolute | fixed;
}

{position: static}

C'est la valeur par défaut affectée à chaque éléments du flux HTML.
L’élément est affiché selon l’ordre du flux et de conteneur.
http://codepen.io/anon/pen/PPyXeG

{position: relative}

Affiche l’élément par rapport à son conteneur parent.
L’élément est affiché selon l’ordre du flux et de conteneur.
http://codepen.io/Tommass/pen/PPyVEQ

{position: absolute}

L'élement est retiré du flux.
Il se positionne :
  • Au niveau du conteneur parent ayant une position relative ou absolute
  • A defaut, par rapport au conteneur principal : le navigateur
Exemple d'utilisation :
  • footer
  • template de pages avec colonnes
http://codepen.io/Tommass/pen/QjZopW

{position: fixed}

  • Le contenu est retiré du flux
  • Il se positionne toujours par rapport à la partie visible du navigateur
  • Sa position est fixe à l'écran, le scroll n’agit pas sur l’élément qui reste toujours au même endroit
Exemple d'utilisation
  • Header fixe (comme sur facebook, twitter, focus, ...)
  • Footer fixe
http://codepen.io/Tommass/pen/GpYeZX

z-index et les contextes d'empilement

La propriété z-index permet de définir la "profondeur" d'un élément.
Un élément avec un z-index élevé sera placé devant un élément avec un z-index inférieur.
 
Cependant, il faut savoir que z-index ne s'applique :
  • qu'aux éléments positionnés (relative, absolute ou fixed)
  • relativement à son contexte d'empilement

qu'est-ce qu'un contexte d'empilement

Il s'agit de l'ensemble des éléments qui ont un parent commun et qui sont placés d'arrière en avant.
un élément, quel que soit son z-index, situé dans un contexte d'empilement situé plus bas dans l'ordre d'empilement qu'un second contexte, ne sera jamais affiché devant un élément de ce second contexte.
Ici, l'élément 2 est affiché devant l'élément 1.
Un contexte d'empilement est créé :
  • à la racine du document (élément html)
  • quand la propriété position est différente de static et que le z-index est différent de auto
  • lorsque l'opacité est inférieure à 1
  • lorsqu'une des propriétés transform ou filter est différente de none
  • quand le z-index est différent de auto pour un élément enfant de Flexbox (même s'il est static)
  • et d'autres...
Test des contextes d'empilement : https://codepen.io/sgoretti/pen/EbWWwp

Ordre d'affichage

Au sein de chaque contexte d'empilement, les règles qui définissent lordre d'affichage des éléments sont les suivantes :
  1. Les bordures et background de l'élément racine du contexte d'empilement
  2. les éléments positionnés avec un z-index négatif
  3. les éléments block non-positionnés
  4. les flottants
  5. les éléments inline non-positionnés
  6. les éléments positionnés avec un z-index: auto ou z-index: 0
  7. les éléments positionnés avec un z-index positif
Exemple d'empilement tordu sans z-index : https://codepen.io/iamvdo/pen/pDABx

Floating




  • Empile les éléments de droite à gauche ou de gauche à droite
  • Permet aux éléments proches de venir s’empiler autour
  • Ne prend pas de place dans son conteneur parent
  • Influence le contenu
    • http://codepen.io/Tommass/pen/EVdJdr
    warning
    • N’est pas considéré par le conteneur
    • Est considéré par ses frangins...
    • float: right inverse l'ordre d'affichage des éléments, le premier dans le html étant logiquement affiché le plus à droite..
    https://codepen.io/sgoretti/pen/OOpmrv



  • Peut-être utilisé pour le template d'une page

    • http://codepen.io/Tommass/pen/ZbqZNq

    error_outline  Nouvelle propriété display:flex introduite par CSS3.
    error_outline  Plutôt utiliser position:absolute.

    Petit exercice de positionnement

    https://codepen.io/sgoretti/pen/vWmpYz

    Dans l'exemple, veuillez :
    • faire en sorte que le menu de gauche y reste, quelque soit le scroll sur la page
    • que le menu de gauche soit devant l'entête
    • que l'entête reste en haut, puis soit fixe en haut quel que soit le scroll
    • que l'icône soit à droite dans l'entête

    en ne modifiant que les styles header, nav et .header-icon à l'aide de position, z-index et float.
    # Box model ![Box model](./images/box-model.png)

    La propriété display

    La propriété display définit le type de boîte utilisée pour le rendu d'un élément.
    Elle peut avoir un impact sur la relation de la boite avec ses frères ou sur l'affichage de ses enfants.
    Les valeurs les plus utilisées pour la propriété display :
    • block : l'affichage par défaut. Un élément display: block s'affichera sous son précédent frère non-flottant ou positionné
    • inline : l'élément s'affiche à la suite (de façon linéaire) de son précédent frère. Les objets inline n'ont pas de width ni de height (qui sont calculées par rapport au contenu)
    • inline-block : affiché à la suite, mais garde les propriétés du block
    https://codepen.io/sgoretti/pen/bYqrWp
    Les valeurs les plus utilisées pour la propriété display :
    • table et toute la liste des table-* : permet de simuler le fonctionnement d'un tableau avec des divs (un div table contient des divs table-row qui contiennent des divs table-cell, par exemple)
    • flex : sera vu plus tard
    • grid : sera vu plus tard
    • none : l'élément n'est pas affiché et ne prend pas de place sur la page
    display: none illustré dans l'exemple :focus dans : https://codepen.io/sgoretti/pen/aVJNeZ

    CSS3 Flexbox

                            
E {
    display:flex;
}

    CSS3 Flexbox

    Permet dans de jouer plus facilement avec
    • le positionnement
    • l’orientation
    • l’ordre d’affichage
    Sans avoir à toucher au code HTML
    Remplace la combinaison des propriétés
    • position
    • display
    • float

    principales propriétés


    Un lien bien sympa !
    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Responsive plus simple !

    https://developer.mozilla.org/fr/docs/Web/Guide/CSS/Flexible_boxes

    Can i use it ?

    YES ! YES ! YES !
    Utilisez cette propriété dans vos style CSS
    Surchargez les propriétés pour les vieux navigateurs si vous avez cette contrainte.
    Can i use flexbox ? http://caniuse.com/#feat=flexbox

    Quand l'utiliser ?

    • Structure d'une page
    • Onglets
    • Menus
    • Centrer un élément verticalement dans son container

    Exercices

    http://flexboxfroggy.com/

    CSS3 Grid Layout

    Les CSS3 Flexbox permettent de positionner plus facilement les élements par rapport à leur conteneur.

    Les CSS3 Grid Layout vont nous offrir tous les outils pour faciliter la construction des layout de page, et simplifier la mise en place de comportement responsive.

    Si Flexbox est parfait pour gérer des lignes (ou des colonnes), Grid est l'outil permettant de travailler sur les deux dimensions en gérant les alignement de contenu comme on le souhaite.

    principales propriétés


    Un lien bien sympa !
    https://css-tricks.com/snippets/css/complete-guide-grid/

    Can i use it ?

    Si vous comprenez son utilisation et si les navigateurs cibles sont compatibles,
    Utilisez cette propriété dans vos style CSS.
    Au pire, surchargez les propriétés pour les vieux navigateurs si vous avez cette contrainte.
    Can i use Grid Layout ? https://caniuse.com/#feat=css-grid https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/

    Quand l'utiliser ?

    • Structure d'une page
    • Listes (lignes ou cartes)
    • En association avec flexbox

    Exercices

    http://cssgridgarden.com/

    Et pour montrer la puissance de grid (et du css) http://www.hi.agency/deck/#p1

    Font

                            
@font-face {
    font-family: 'OpenSansRegular';
    src: url('../font/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
    	url('../font/OpenSans-Regular-webfont.woff') format('woff'),
        url('../font/OpenSans-Regular-webfont.ttf') format('truetype'),
        url('../font/OpenSans-Regular-webfont.svg#OpenSansLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

html {
    font-family: 'OpenSansRegular', verdana, arial;
}
    Est-ce que mon navigateur le supporte ? http://caniuse.com/#feat=fontface
    De la doc : https://developer.mozilla.org/fr/docs/Web/CSS/@font-face
    Merci Google !
    https://www.google.com/fonts
    Import de librairie d'icons https://www.google.com/design/icons/
    Veillez à toujours livrer votre projet avec les fonts "embedded" dans votre application.

    Media query

    L’attribut média permet de préciser le media sur lequel s’applique la CSS


    HTML

    Feuille de style

                            
@import url('/Content/header.css') screen;

@media screen {
	p.test {
		font-family: verdana,sans-serif;
		font-size: 14px;
	}
}
    Media type Description
    AllUsed for all media type devices (default)
    auralUsed for speech and sound synthesizers
    brailleUsed for braille tactile feedback devices
    embossedUsed for paged braille printers
    handheldUsed for small or handheld devices
    printUsed for printers
    projectionUsed for projected presentations, like slides
    screenUsed for computer screens
    ttyUsed for media using a fixed-pitch character grid, like teletypes and terminals
    tvUsed for television-type devices

    Exemple

    Media screen

    Media print



    La balise media est utilisée pour définir des conditions

    media="screen, 3d-glasses, print and resolution > 90dpi“

    Dans la balise HEAD


    Dans la feuille de style

    @import url('/css/print-color.css') print and (color);

@media screen and (orientation: portrait) { … }

    Plus concrètement de vos projets

    @media screen and (min-width: 400px) and (max-width: 700px) {

    /* le header est plus petit */
    header {
        height: 50px;
    }

    /* le footer disparait */
    footer {
        display:none;
    }

}

    Plus d'infos ?

    https://developer.mozilla.org/fr/docs/Web/CSS/Media_queries
    ## Améliorations CSS3

    Text wrapping

                            
div {
    text-overflow: ellipsis;
}

    Opacité

                            
footer {
    opacity: 0.3
}

header {
    rgba(255, 0, 0, 0.75)
}

    Saturation & luminosité

                            
header {
    hsla(95, 98%, 68%, 0, 19)
}

    bordure arrondies

                            
div {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

    Dégradé de couleur

                            
div {
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

    Ombres

                            
div {
    text-shadow: 2px 2px #ff0000;
    box-shadow: inset 0px 3px 3px 0px #dcdfe1
}
    Generateur http://www.cssmatic.com/box-shadow

    Arrières plans

                            
div {
    background: url('https://i.chzbgr.com/full/8359208704/h660F24F2/');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0% 50%;
}
    http://codepen.io/Tommass/pen/BoGaba

    Colonnes

                            
.newspaper {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}
    http://codepen.io/Tommass/pen/GpwRYL

    Traitement des images

                            
div {
    background: /* top, transparent red, faked with gradient */
    linear-gradient(
    to bottom,
    rgba(53, 58, 97, 0.64),
    rgba(0,0,0, 0.64)
    ),
    url('https://i.chzbgr.com/full/8359208704/h660F24F2/');
}
    http://codepen.io/Tommass/pen/epQYrg

    calc

    La fonction CSS calc() peut être utilisée à n'importe quel endroit ou une longueur, frequency, angle, time, number, ou integer est nécessaire. Grâce à calc(), il est possible de réaliser des calculs pour déterminer la valeur d'une propriété CSS. 
                            
.banniere {
    position: absolute;
    left: 40px;
    width: 90%; /* valeur pour les navigateurs ne supportant pas calc() */
    width: calc(100% - 80px);
    border: solid black 1px;
}
    https://developer.mozilla.org/fr/docs/Web/CSS/calc

    Filtres

    La propriété filter permet de réaliser des effets de flou, modifier la teinte, ... 
                            
.mon-image {
    filter: blur(3px) grayscale(0.7);
}
    http://html5-demos.appspot.com/static/css/filters/index.html

    Unités

    Unit Description
    %percentage
    ininch
    cmcentimeter
    mmmillimeter
    em1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses
    remsame as em but taking the root element font size. Allows more consistency for the value of the unit
    exone ex is the x-height of a font (x-height is usually about half the font-size)
    ptpoint (1 pt is the same as 1/72 inch)
    pcpica (1 pc is the same as 12 points)
    pxpixels (a dot on the computer screen)
    vw% of screen width
    vh% of screen height

    Animations



                            
header {
    animation:animation-de-tom 5s;
    -webkit-animation:animation-de-tom 5s;
}

@keyframes animation-de-tom {
    0% 	{ background:red; }
    10% { background:yellow; }
    20% { background:blue; }
    30% { background:green; }
    40% { background:violet; }
    50% { background:cyan; }
    60% { background:magenta; }
    70% { background:purple; }
    80% { background:orange; }
    90% { background:white; }
    100% { background:red; }
}
    http://codepen.io/Tommass/pen/epQmpe

    Exemple complet avec flexbox, media query et animations : http://codepen.io/Tommass/pen/ZbmYWa

    Les animations doivent servir à jouer des transitions entre les états de votre SPA.

    FOCUS va produire une bonne partie des transitions induites par les composants. Certaines IHM métiers nécessiteront des transitions personnalisées

    Des librairies existent pour vous faciliter la vie : https://daneden.github.io/animate.css/

    Transformation




                                
.bouton {
    /* définit l'origine de la transformation: ici le centre du bouton */
	transform-origin:0% 0%;
	-ms-transform-origin:0% 0%;
	-webkit-transform-origin:0% 0%;
	-moz-transform-origin:0% 0%;
	-o-transform-origin:0% 0%;

    /* la transformation : une rotation de 90 degrés */
    transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
}


    Dans le cadre des projets FOCUS, les transformations seront peu utilisées.
    Combinées aux animations, elles peuvent être utilisées pour générer des éléments graphiques dynamiques.

    Par exemple, les spinners : http://tobiasahlin.com/spinkit/.

    Ne pas réinventer la roue : utilisez des librairies CSS du marché.

    Transition




                                
.bouton {
    transition: width 0.2s;
	width: 90px;
}

.bouton:hover {
	width: 110px;
}
    La propriété transition permet de créer une animation automatiquement au changement d'une propriété.
    # Comment on utilise le CSS dans nos applications

    SASS

    Syntactically Awesome Style Sheets

    A quoi ca sert ? / Comment ça marche ?

    • Problème de maintenabilité avec le CSS
    • Structure le style d'une application
    • Pas de variables en CSS ?
    • Industrialisation du style / réutilisation
    • On peut écrire du CSS directement
    • Transpile vers le CSS

    Quelques fonctionnalités sympas

    Les variables $

    SASS

                                    
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

    CSS

                                        
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

    Le nesting

    SASS

                                    
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

    CSS

                                        
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

    Les mixins

    SASS

                                    
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

    CSS

                                        
.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

    Possibilité de split en plusieurs fichiers

    On importe un fichier avec @import 'monFichier';

    • Meilleure séparation
    • Réutilisation de certains éléments (variables, mixins, ...)
    • Utilisation de librairies externes
    • Industrialisation dans les projets
    • Code CSS orienté COMPOSANT

    Ce qu'il faut retenir

    On travaille avec une logique variables + composants et on ne se prive pas du nesting et des variables. On écrit pas de fichiers CSS.
    La doc

    CSS Modules

    Un des problèmes du CSS, c'est que toutes les classes ont un scope global, sans forcément être stockées dans un même fichier.
    CSS modules permet d'écrire du CSS scopé localement.

    Comment ça marche ?

    Un fichier de style

                                    
.red {
  font-size: 25px;
  background-color: red;
  color: white;
}

    La source JS du composant

                                        
import React from 'react'
import btn from './styles.css'

export default class CoolButton extends React.Component {
  render() {
    return (
      
    )
  }
}

    Le code généré

    • CSS modules est compatible avec sass
    • CSS modules fonctionne idéalement avec React
    • CSS modules dispose de fonctionnalités proches de celles de sass (composes agit comme @extend, etc.)


    Petite présentation des CSS modules

    Les plugins postCSS

    Il s'agit de traitements appliqués au code CSS/SASS afin de générer le ou les fichiers CSS utilisés par l'application.

    Auto-prefixer

    Fichier source

                                    
.rotate90 {
  transform: rotate(90 deg);
}

    Fichier généré

                                        
.rotate90 {
  transform: rotate(90 deg);
  -moz-transform: rotate(90 deg);
  -webkit-transform: rotate(90 deg);
  -ms-transform: rotate(90 deg);
}

    CSS-next

    Il s'agit d'un ensemble d'adaptations au CSS permettant d'utiliser des fonctionnalités avancées que le CSS n'offre pas (nesting, variables, etc.)
    Plus d'infos ici

    Separation of concerns ?

    C'est quoi ?

    La séparation des préocccupations, c'est le fait que chaque couche, chaque langage, ne doit s'occuper que de ce pour quoi il est prévu.

    Ca veut dire quoi ?

    • html est fait pour organiser du contenu sur une page.
    • CSS est fait pour controller l'apparence de la page.
    • Javascript est fait pour gérer les interactions avec l'utilisateur.

    Donc, si j'ai des informations touchant à l'apparence de la page dans mon html, je ne respecte pas la séparation !

    Euh, un exemple ?

                                    

    
    Hello there!
    Une classe .text-center ? Le nom reflète directement la façon dont est affiché l'élément, il s'agit de style.
    Ce type de classe utilisaite ne respecte pas la séparation.

    Une solution"

                                    
.greeting {
    text-align: center;
}
                                
                            
                                    

    
    Hello there!

    L'approche BEM

    Block Element Modifier

    Il s'agit de structurer le CSS avec des noms de classes reflétant :
    • le Block auquel s'applique la classe : input, button, header, etc. ou le nom du composant, par exemple
    • l'Element de ce Block qui est concerné : il s'agit d'une indication plus détaillée. Par exemple, pour le Block header, on pourrait avoir les éléments : title, icons, searchbar, etc.
    • le Modifier : il s'agit de l'état dans lequel se trouve l'élément qu'on souhaite représenter. On aura un Modifier différent par état. Pour le Block header, et l'Element searchbar, on pourra avoir : selected, disabled ou hidden

    Le tout créant la classe CSS .Block-Element--Modifier

    Le problème

    Parce qu'il en faut un

    Ce n'est pas très réutilisable.
    Pour y palier :
    • soit utiliser des noms d'éléments plus génériques
    • soit utiliser les propriétés d'héritage des traitements postcss (type @extend de sass ou composes de css-modules)

    Et donc ?

    Il n'y a pas de solution miracle.
    On conseille de :
    • utiliser une base de nommage de classe type BEM (convention à définir avec le responable technique du projet)
    • pour vos composants, avoir un fichier par composant
    • pour les vues, avoir un fichier par module
    • avoir un fichier contenant des classes utilitaires

    Le but est d'avoir un code lisible et maintenable.

    Best practices

    on se fait un fichier _variables.scss

    Avec ses couleurs, des polices et autres paramètres globaux...

    On a une logique composant

    • On a un fichier par composant (dans le même dossier que le composant), que ce soit en CSS moduless ou en SASS
    • En SASS, on utlise des selecteurs data-project, ou une nomenclature type BEM
    • On utilise le nesting (avec parcimonie : 2 ou 3 niveaux de profondeur au plus) et le &
                                
[data-focus='select'] {
    select {
        border-top:0;
        border-left:0;
        border-right: 0;
        border-bottom: 1px solid $select-border-color;
        padding: 3px 3px 3px 0;
        color: $select-text-color;
    }
    ...
}

    On utilise au maximum les propriétés CSS récentes

    On gère au cas par cas les problèmes spécifiques avec des styles conditionnels, on présente au client un mode dégradé graphiquement pour les vieux browsers...

                                
.quality-title {
	background: $colorGradient1;
	background: linear-gradient(0deg, $colorGradient1, $colorGradient2);
}

    On ne surcharge jamais directement les librairies

    • On rend le code moins lisible, moins robuste aux changements de versions , ...
    • On utilise un sélecteur un précis relatif au data-project='my-component'.

    on affiche une page pour les navigateurs non supportés

    On utilise au maximum les flexbox

    Et si on peut, on ne s'interdit pas d'utiliser grid

    Can i use ?

    http://caniuse.com
    # Besoin de doc ? ## La doc de Mozilla Developer Network https://developer.mozilla.org/fr/docs/Web/CSS ## sur Google `mdn` + `[mots clés]`

    Pour aller plus loin

    Une des meilleures "formations" en ligne

    http://iamvdo.me/blog/ce-que-vous-avez-toujours-voulu-savoir-sur-css

    CSS comparé à d'autres façon de styler

    https://developer.telerik.com/topics/web-development/love-letter-css/

    Sur la façon de faire du CSS

    https://www.youtube.com/watch?v=ZpFdyfs03Ug https://adamwathan.me/css-utility-classes-and-separation-of-concerns/

    CSS et JS

    https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660

    Slack aime grid

    https://slack.engineering/rebuilding-slack-com-b124c405c193

    Quelques articles sur des choses qui semblent simples, mais en fait, non.

    https://iamvdo.me/blog/css-avance-metriques-des-fontes-line-height-et-vertical-align https://www.smashingmagazine.com/2017/05/fluid-responsive-typography-css-poly-fluid-sizing/

    Et un sur les contextes d'empilement

    https://iamvdo.me/blog/comprendre-z-index-et-les-contextes-dempilement

    Un problème ? Une question ?