Cours 11¶

Hygiène CSS¶

Lorsqu'on écrit des classes CSS, on peut écrire n'importe quoi et la fonctionnalité ne sera pas affectée. Par contre, à la lecture, il est intéressant de comprendre ce que fait le style, sinon c'est plus laborieux.

HTML

<div class="asdfasdf">
🤷
</div>

CSS

.asdfasdf {
    width: 100%;
    height: 30vh;
    position: relative;
    background: #ccc;
    padding: 15px;
    margin: 1rem auto;
}

HTML

<div class="slideshow">
👌
</div>

CSS

.slideshow {
    width: 100%;
    height: 30vh;
    position: relative;
    background: #ccc;
    padding: 15px;
    margin: 1rem auto;
}

BEM¶

BEM (Block Element Modifier), c’est une façon de nommer les classes CSS pour que le code reste clair et organisé.

Syntaxe

.block {

}

.block__element {

}

.block__element--modifier {

}

Bloc¶

Un block, c’est une composante.

Les composantes... vous vous souvenez ? Dans le cours 1

Exemple : une carte, un menu, un bouton, un formulaire.

Exemple

<div class="card">
    ...
</div>

Élément¶

Un element, c’est une partie du bloc qui n’a pas de sens tout seul.

Exemple : le titre, l’image ou le bouton d’une carte.

<div class="card">
  <h2 class="card__title">Titre</h2>
  <p class="card__text">Texte descriptif</p>
</div>

Modificateur¶

Un modifier, c’est une variante du block ou de l’élément.

Exemple : une carte “active”, un bouton “rouge”, un titre “grand”.

<div class="card card--shadow">
  <h2 class="card__title card__title--large">Titre</h2>
</div>

--shadow et --large indiquent des versions différentes, sans créer un nouveau composant.

utility-first¶

Pas facile de le franciser celui-là.

En « utility-first », au lieu de créer des classes pour des composantes, on utilise plein de petites classes "utilitaires" qui font une seule chose chacune.

Présentement, c'est ce qui est le plus utilisé en entreprise, mais ça prends son sens seulement quand on travaille avec des technologies un peu plus haut niveau que ce qu'on fait en Web 1. Voici tout de même le concept.

BEM

HTML

<button class="btn">
  Envoyer
</button>

CSS

.btn {
  background-color: #007bff;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}

utility-first

HTML

<button class="bg-blue color-white p-2 rounded">
  Envoyer
</button>

CSS

.bg-blue { 
  background-color: #007bff; 
}
.color-white {
  color: white;
}
.p-2 {
  padding: 0.5rem;
}
.rounded { 
  border-radius: 0.5rem;
}

En utility-first, on composer le design directement dans le HTML, un peu comme avec des LEGO.

Bref

L'important c'est surtout d'écrire les classes (class) et les identifiants (id) pour qu'on comprenne ce qu'ils font.

Imbrication CSS¶

L'imbrication CSS (ou CSS nesting) est une technique d'organisation du CSS. Elle permet d'imbriquer des classes entre elles afin de visualiser l'aspect hiérarchique.

Par exemple, un style de card conventionnel pourrait ressembler à ceci :

.card {
    padding: 2rem;
    border-radius: 1rem;
    background-color: #444;
}
.card .card--title {
    font-size: 26px;
    font-weight: bold;
    font-family: sans-serif;
    margin: 0;
}
.card .card--title.card--title__light {
    color: greenyellow;
}

La version imbriquée ressemblerait à ceci :

&

L'esperluette (&) représente le sélecteur parent (le sélecteur courant).

Exemple

.card {
  &.active  { /* identique à : .card.active  */ }
  & img     { /* identique à : .card img     */ }
  &:hover   { /* identique à : .card:hover   */ }
  & + &     { /* identique à : .card + .card */ }
}

aspect-ratio¶

Le ratio d’image décrit la forme d’une image, c’est-à-dire la relation entre sa largeur et sa hauteur. Ils sont normalement écris de la manière suivante :

1:1
4:3
16:9

En CSS, la propriété CSS aspect-ratio définit un ratio d'affichage. Au lieu d'avoir un ":" pour réparer les chiffres, en css on écrit un slash "/".

.mon-style {
    aspect-ratio: 16 / 9;
}

ratio et images¶

Si on veut que les images conservent leur ratio original peu importe la configuration css, il suffit d'inscrire les dimensions de l'image en html. Ex :

<img src="..." alt="..." width="123" height="456">

opacity¶

La propriété opacity ressemble à ce que fait rgba pour la couleur. Elle permet de gérer l'opacité d'un élément. Une valeur de 0 correspond à une transparence complète, tandis qu'une valeur de 1 correspond à une opacité complète.

Important à savoir, ça affecte aussi les enfants (héritée visuellement).

.mon-style {
  opacity: 0.5;
}

box-shadow¶

La propriété CSS box-shadow fonctionne un peu comme le text-shadow.

Ça ajoute des ombres à un élément. Ils peuvent être en flou ou pas et peuvent être à l'intérieur ou à l'extérieur

.mon-style {
  box-shadow: 10px 10px red;
  /* ou */
  box-shadow: 0 0 10px red;
  /* ou */
  box-shadow: inset 5px 5px 5px red;
  /* ou */
  box-shadow: 10px 10px red, 20px 20px blue;
}

Outil
Générateur d'ombre portée

Raccourcis clavier¶

Sélectionner tout le texte : Ctrl+A
Sauvegarder : Ctrl+S
Annuler (Undo) : Ctrl+Z
Refaire (Redo) : Ctrl+Shift+Z ou Ctrl+Y
Copier : Ctrl+C
Couper : Ctrl+X
Coller : Ctrl+V
Coller sans mise en forme : Ctrl+Shift+V
Ouvrir un onglet fermé : Ctrl+Shift+T
Changer d’application ouverte (task switcher) : Alt+Tab
Chercher : Ctrl+F

Mac

La plupart du temps, les variations pour mac remplacent Ctrl par Cmd.

Prochain cours : examen 02¶

Révision avec le prof 🧑‍🏫

Exercices¶

Exercice - CSS
Néomorphisme

Exercice de révision CSS
Priorités

Exercice - CSS
Discord

Exercice - CSS
Discord, la suite