Alsacreations.com - Actualités - Archives (mai 2016)

Le: 25 05 2016 à 10:35 Auteur: Raphael

Originellement conçu pour des web designers, CSS se veut être un langage de description et non de programmation.

Mais ça c'était avant.

Le Web a évolué, nos usages et consommations également. CSS s'adapte petit à petit au contexte actuel et se complexifie pour devenir "un vrai langage" (avec variables, calculs et fonctions, notamment).

En attendant une hypothétique stabilisation du langage, nous en sommes aujourd'hui à déplorer des feuilles CSS de taille astronomique et de moins en moins maintenables en production.

Par exemple, sur le site alsacreations.com (hors forum), sur un fichier CSS de 32ko, l'outil StyleStats ne dénombre pas moins de :

• 46 occurences de !important
• 41 float inappropriés
• 402 sélecteurs d'ID
• 28 tailles de polices différentes
• 36 couleurs de texte différentes
• etc.

Une convention pour éviter la bidouille

Pour améliorer notre quotidien d'intégrateur, l'agence Alsacréations s'est constitué une mini Convention CSS contenant toutes les bonnes pratiques qui nous paraissent essentielles à ce beau langage qu'est CSS.

Ne nous lançons pas de fleurs : nous n'avons rien inventé, uniquement compilé les conseils et astuces de multiples autres sources.

Remarque : il s'agit d'une convention correspondant à nos besoins internes de petite agence web, vous devrez bien entendu l'adapter à votre environnement.

Lien vers la présentation : https://speakerdeck.com/goetter/mini-convention-css

Les bonnes pratiques CSS

Voici le contenu de cette mini convention CSS.

1. Généralités
2. Bonnes pratiques générales
   • Modèle de boîte :
     Opter pour le modèle de boîte CSS3 (box-sizing: border-box) en début de la feuille de style
   • Tailles de polices :
     Opter pour des tailles de polices fluides (de préférence en rem).
   • Flux :
     Éviter de sortir les éléments du flux (float, position) sans nécessité.
   • Positionnement :
     Positionner les éléments en choisissant de préférence display (block, inline), puis flexbox, puis inline-block ou table-cell
   • Lecture :
     Écrire des syntaxes compréhensibles par des êtres humains et des collègues.
   • Namespaces :
     Préfixer les classes par « namespace » pour les regrouper et les distinguer aisément.
3. Maintenance et lisibilité
   • Poids des sélecteurs :
     Éviter de surcharger un sélecteur, car cela lui ajoute du poids inutilement.
   • Sélecteur #ID :
     Éviter d’utiliser le sélecteur d’id, son poids est trop important et difficile à maintenir, éviter également le bazooka !important
   • Sélecteurs de structure :
     Éviter les sélecteurs associés à la structure HTML, un élément doit pouvoir être ciblé quel que soit son conteneur ou son emplacement dans le DOM.
   • Structure et apparence :
     Séparer la structure de l’apparence dans les sélecteurs pour faciliter la factorisation.
   • Factoriser les propriétés :
     Toujours tenter de rassembler les propriétés identiques.
   • Surcharge :
     Éviter d’écraser une règle par une autre.
   • Redondances :
     Utiliser des pré-processeurs (Sass, LESS, Stylus) pour éviter les répétitions de code.
   • Réutiliser les blocs :
     Grouper les éléments par composants réutilisables.
   • Ne pas trop réutiliser :
     Se limiter à 4 noms de classes au maximum par élément HTML. Si l’on pense qu’il en faut davantage, il est temps d’envisager une classe personnalisée.
4. Performances
   • Animations gourmandes :
     Éviter d’animer des propriétés autres que transform ou opacity , ou alors ajouter la propriété will-change et/ou le hack de translateZ().
   • @font-face performant :
     N’imposez pas de chargements aux anciens navigateurs (IE8). Privilégiez .woff2. Conservez l’astuce du #iefix
   • Propriétés raccourcies :
     Préférer les propriétés raccourcies.
   • Unités :
     L’unité est inutile si la valeur est nulle. Ne pas donner d’unité à line-height.
   • Préfixes vendeurs :
     Automatiser la gestion des préfixes à l’aide de Autoprefixer, ne pas le faire à la main et ne pas utiliser un mixin Sass/LESS pour cela.

Le: 24 05 2016 à 12:06 Auteur: Raphael

Depuis quelques jours, la version 5.0 de KNACSS est sortie avec son lot de nouveautés et mises à jour.

KNACSS est une feuille de styles CSS multi-vitaminée comprenant tout un ensemble de bonnes pratiques et de styles de base ("reset") pour débuter chacun de ses projets.

Un peu à la manière d'un framework CSS, mais en bien plus léger, KNACSS gère aussi bien les tailles de polices, les espacement, les alignements, les positionnements, les grilles et bien-entendu les Responsive Web Design. Le tout dans une petite feuille de styles.

Cela fait plus de 4 années que cet outil existe et l'on peut raisonnablement penser que la version 5 est celle de la maturité :)

Pour l'occasion, un Style Guide (guide d'utilisation visuel) a été concocté.

Les modifications notables de cette v5 sont :

• suppression du support IE8-IE9 (à partir de la version KNACSS 5.0, seul IE10 et supérieurs sont pris en charge)
• suppression du support LESS (à partir de la version KNACSS 5.0, seul le préprocesseur Sass est encore pris en charge pour des raisons de maintenabilité)
• mise à jour vers Normalize 4.1.1 
• restructuration / renommage des fichiers avec préfixes _config-, _layout-, _library-, _object-, _override-
• ajout de la library include-media pour faciliter la gestion des media queries
• adaptation des variables de breakpoint pour les rendre compatibles avec include-media
• grille "grillade" à présent en mobile first (par défaut 1 colonne sur "tiny", 2 colonnes sur "small", valeurs modifiables)
• nommage de variables préfixé pour plus de maintenabilité : $gutter -> $grid-gutter, $number -> $grid-number, $left -> $grid-left et $right -> $grid-right
• renommage des éléments de grilles : .flex-item-double --> .grid-item-double (plus cohérent)
• ajout des éléments de layout : .grid-item-first, .grid-item-medium et .grid-item-last
• ajout de Table des Matières dans la feuille de style non minifiée
• adaptation des fichiers gulpfile, package.json et bower.json
• mise à jour de la documentation

(re)découvrez KNACSS sur knacss.com

Flux (rss): http://www.alsacreations.com/rss/actualites.xml