Codex

Astuces et codes à emporter.

Css & Sass

Les bonnes pratiques pour un code épuré et utilisables par d'autres personnes.

Mise en page

Suivez le style de formatage utilisé par Prettier (avec les paramètres par défaut).

  • Retrait avec 2 espaces
  • Un sélecteur par ligne
  • Une ligne par déclaration ( property: value;)
  • Toujours utiliser ; à la fin d'une déclaration
  • Préférez les guillemets doubles ( "hello") et les valeurs d'attribut ( input[type="text"])
body {
  font-size: 0.8rem;
}

.selector,
.other[type="text"] {
  font-weight: bold;
  color: black;
}

@media (min-width: 768px) {
  .Sidebar {
    display: block;
    background-image: url("/assets/img/pattern.png");
  }
}

Unités : pixels, ems, etc.

Il n'est pas toujours évident de savoir quelles unités CSS sont les meilleures pour quels cas d'utilisation. Voici quelques points de référence :

  • Évitez les unités physiques telles que cm et pt qui sont réservées au print
  • Requêtes multimédias : préférez px (plutôt que d'utiliser em)
  • font-size : utiliser rem, em ou px
  • line-height : utiliser un rapport sans unité, par exemple 1.2
  • 1vw est égal à 1% de la largeur de la fenêtre (100vw)
  • 1vh est égal à 1% de la hauteur de la fenêtre (100vh), mais cela peut ne pas être fiable dans les navigateurs mobiles
html {
  // should be 16 * 1.25 = 20px
  font-size: 125%;
}

body {
  font-size: .8rem;
  line-height: 1.4;
}

h1 {
  font-size: 1.6rem;
  line-height: 1.2;
}

@media (min-width: 1100px) {
  h1 {
    font-size: 2.4rem;
    line-height: 1.1;
  }
}

Éviter !important

L'ajout !important à vos déclarations permet de résoudre les problèmes de spécificité, mais seulement à très court terme! L'éviter au maximum.

L'utiliser uniquement si il faut cibler un élément qui reste en surcharge

Si vous l'utilisez !important dans votre code, écrivez toujours un commentaire expliquant pourquoi.

.Section-inner {
  // The JS library we use forces a width in JavaScript,
  // but we really need a fluid width here!
  width: auto !important;
}

Imbrications

Il est fortement recommandé de partir du général et d'aller au plus précis.
De cette manière on peut facilement repérer les éléments parents et leurs enfants directs.


.header {...}
.header ul {...}
.header ul li {...}
.header ul li a {...}

.footer {...}
.footer ul {...}
.footer ul li {...}
.footer ul li a {...}

Polices

Déclarer les solutions de secours

Toujours déclarer un nom de famille générique à la fin d'une font-familydéclaration: serif, sans-serifou monospace.

Si possible, déclarez également les polices système dont le style est proche de la police Web que vous utilisez :

body {
  font-family: Fira Sans, Arial, sans-serif;
}

Utilisation de polices Web

  • Obtenez toujours des licences pour les polices commerciales.
  • Hébergez les polices localement (voir: Google Fonts Helper ).
  • Utilisez WOFF2 et WOFF, ignorez les anciens formats.
  • Utilisez un seul nom de famille pour tous les @font-faceblocs décrivant une famille de polices.

Les polices Web ralentissent les sites Web!

En règle générale, les fichiers de polices sont chargés après les feuilles de style et les navigateurs peuvent rendre le texte invisible jusqu'à ce que les polices soient chargées. Quelques options pour accélérer les choses :

  • Utilisez plutôt les polices système.
  • N'utilisez que quelques poids et styles.
  • Indiquez au navigateur de rendre le texte même si les polices ne sont pas encore chargées, à l'aide de la propriété font-display.
  • Préchargez le ou les fichiers WOFF2 les plus importants.
@font-face {
  font-family: "My Cool Typeface";
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url("/fonts/mycooltyp.woff2") format("woff2"),
  url("/fonts/mycooltyp.woff") format("woff");
}

@font-face {
  font-family: "My Cool Typeface";
  font-style: normal;
  font-weight: 800;
  /* show the fallback font while the font file is loading */
  font-display: fallback;
  src: url("/fonts/mycooltyp-heavy.woff2") format("woff2"),
  url("/fonts/mycooltyp-heavy.woff") format("woff");
}

body {
  font-family: My Cool Typeface, Georgia, serif;
}

<head>
  <link rel="preload" as="font" type="font/woff2" src="/fonts/mycooltyp.woff2">
</head>

Sélecteurs

Nous utilisons des classes pour les sélecteurs. Nous essayons de garder les sélecteurs courts (idéalement, juste une classe).

Eviter d'utiliser un ciblage oar Id #some-idsélecteur (en raison de sa spécificité élevée). Si vous avez vraiment besoin de cibler un identifiant, et ne peut pas ajouter une classe, utilisez le sélecteur d'attribut: [id="some-id"].

  • Sélecteurs élément ( h2, .MainNav-item a, etc.). Mais gardez à l'esprit que parfois l'élément peut changer, par exemple un <h2> peut être changé en <h3>, un a en <button>, etc.
  • Sélecteurs d'attributs, en particulier pour les états dynamiques (.MainNav a[disabled]).
  • Les pseudo-classes (:empty, :invalid, ...)
// Mauvais ciblage car trop spécifique!
#stream .tweet_header .author {...}

// Sélection plus intelligente
.Tweet {...}
.Tweet-author {...}
.Tweet-author a {...}
.Tweet-retweetBtn {...}
.Tweet-retweetBtn[disabled] {...}