CSS maintenables

CSS maintenables

by Kaelig Deloumeau-Prigent
Released July 2012
Publisher(s): Eyrolles
ISBN: 9782212134179

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Tous les passionnés et professionnels du design web le savent : les feuilles de styles CSS peuvent devenir un casse-tête, tant pour l'amateur qui crée un site sous WordPress que pour l'intégrateur professionnel en agence web.

Ecrit par un intégrateur web chevronné, cet ouvrage aborde toutes les bonnes pratiques pour obtenir des CSS maintenables. Il explique l'utilisation d'outils fiables, permettant d'éviter bruit et redondance dans le développement des feuilles de styles, en conservant leur nature en cascade. A mettre entre les mains de tous les développeurs et intégrateurs web !

"C'est une petite bombe ! C'est l'un des bouquins qu'il faudra rendre obligatoires dans toute équipe de concepteurs et d'intégrateurs web." 
Raphaël Goetter, fondateur d'Alsacreations.fr et auteur du livre "CSS avancées", Eyrolles 2011

"Nos feuilles de styles CSS sont devenues des bidonvilles de code, alors qu'il faudrait au contraire leur accorder le même soin qu'à nos programmes Python ou JavaScript." 
Christian Heilmann, Mozilla Developer Network


Au sommaire

  • De à @font-face : une problématique nouvelle
  • Première plongée dans CSS
  • Bonnes pratiques pour un code CSS lisible et maintenable
  • Pragmatisme : démystifier certaines bonnes pratiques
  • Les frameworks CSS
  • Travailler en équipe
  • Préprocesseurs CSS : quand la machine écrit pour vous
  • Sass et Compass
  • Erreurs de conception : comment les débusquer
  • Méthode : coder un design de zéro
  • Méthode : faire le ménage dans les CSS

Table of contents

  1. Couverture
  2. Le résumé et la biographie auteur
  3. Page de titre
  4. Copyright
  5. Dédicace
  6. Préface
  7. Table des matières
  8. Avant-propos
    1. Pourquoi ce livre ?
    2. À qui est destiné ce livre ?
    3. Structure du livre
    4. Remerciements
  9. Chapitre 1 De <font> à @font-face : une problématique nouvelle
    1. Aux débuts : pas de CSS, ni d’intégrateurs web
    2. L’apparition de la feuille de style comme livrable
    3. CSS aujourd’hui : l’importance des standards, l’impact des navigateurs
    4. Le futur des CSS
      1. Un web adaptatif
      2. Les régions CSS
      3. Les exclusions
      4. La liberté typographique
      5. Nouvelles structures de langage
  10. Chapitre 2 Première plongée dans CSS
    1. Apprendre les CSS : l’incontournable théorie
      1. Comprendre les CSS, c’est comprendre les navigateurs
      2. Une affaire d’expérience
    2. Être en veille constante
      1. Les sites et blogs spécialisés
        1. Smashing magazine
        2. A list apart
        3. Alsacréations
        4. Pompage.net
        5. OpenWeb
        6. Web design friday
        7. 24 Ways
        8. CSS4 design
        9. Mais aussi
    3. Aide entre développeurs
      1. À l’aide, j’ai un problème insoluble !
        1. Isoler le problème
        2. Outils, partage et entraide
        3. Documenter son code pour référence
      2. Les logiciels libres : un gisement inépuisable d’exemples
  11. Chapitre 3 Bonnes pratiques pour un code lisible et maintenable
    1. Un <head> à toute épreuve
      1. Le doctype
      2. Un élément <html> polyvalent avec modernizr
      3. Le mode compatibilité d’internet explorer
      4. L’encodage unicode
      5. Récapitulatif
    2. reset.css : réinitialisation des styles
      1. Le reset universel : à éviter
      2. Les reset.css sélectifs
    3. Bien ranger ses fichiers
      1. Un seul fichier ? attention aux débordements
      2. À chaque fichier sa fonction
        1. reset.css
        2. typo.css
        3. layout.css
        4. forms.css
        5. global.css
        6. application.css
        7. print.css
    4. Écrire un code lisible
      1. Conventions syntaxiques
      2. Notation multiligne ou monoligne ?
        1. Round 1 : lisibilité et maintenabilité
        2. Round 2 : CSS3
        3. Round 3 : gérer le suivi des versions
        4. Vainqueur du match
      3. L’indentation : la clé de la lisibilité
        1. Au sein d’un sélecteur
        2. Relations entre les sélecteurs
        3. Indenter les valeurs CSS3
      4. Classer les propriétés
        1. Par ordre alphabétique
        2. Par type de déclaration
      5. Utiliser les raccourcis
    5. Documenter son code
      1. Avant même de documenter, écrire un code explicite
      2. Syntaxe des commentaires CSS
      3. Quand ne pas (trop) documenter ?
    6. Dégradation gracieuse et amélioration progressive
      1. Dégradation gracieuse : la tolérance à l’erreur
      2. Amélioration progressive
    7. Simplifier un design trop complexe
    8. Tester, encore et encore
      1. Tests d’interopérabilité (multinavigateur)
      2. Tests de non-régression
      3. Une page pour tester tous les styles : le pattern portfolio
  12. Chapitre 4 Pragmatisme : démystifier certaines bonnes pratiques
    1. Mythe n°1 – Pas d’informations de présentation dans le HTML
    2. Mythe n° 2 – Ne pas utiliser d’éléments non sémantiques
    3. Mythe n° 3 – On ne doit pas créer de classes non sémantiques
    4. Mythe n° 4 – Le rendu doit être le même dans tous les navigateurs
    5. Mythe n° 5 – La taille du texte ne doit pas être exprimée en pixels
  13. Chapitre 5 Les frameworks CSS
    1. Pourquoi utiliser un framework CSS ?
      1. Ne pas réinventer la roue
      2. Travailler en équipe
      3. Prototyper rapidement
      4. Découvrir pour apprendre
      5. Quand ne pas s’en servir
    2. Frameworks les plus populaires
      1. Blueprint, le « tout-en-un »
      2. Twitter bootstrap, adaptatif et responsable
      3. 960.gs : une simple grille de mise en page
      4. HTML5 boilerplate : un concentré de bonnes pratiques
    3. OOCSS : CSS orientées objet
      1. Objets CSS
      2. Séparation de la structure et de l’apparence
        1. Exemple : boutons d’action
      3. Séparation du conteneur et du contenu
        1. Exemple : liste d’actualités
    4. Développer son propre framework ?
      1. Pourquoi posséder son propre framework ?
        1. Productivité, capitalisation d’expérience
        2. Maîtrise de la compatibilité
        3. Flexibilité
        4. Collaboration
  14. Chapitre 6 Travailler en équipe
    1. La communication avant tout
      1. Avec les graphistes
      2. Avec les développeurs
    2. Conventions de codage
      1. Conventions syntaxiques
      2. Installer des conventions de nommage
    3. Un code accessible aux débutants
    4. Les erreurs à ne pas commettre
      1. Réinventer la roue (carrée)
      2. Ne pas documenter son code
      3. Factoriser prématurément le code
      4. Ne pas tester
      5. Se laisser tenter par des techniques « dernier cri »
      6. Varier les conventions de nommage
      7. Ne pas communiquer
    5. Gérer les versions avec Git
      1. De l’intérêt d’un outil de gestion de versions
      2. Présentation de Git
  15. Chapitre 7 Préprocesseurs CSS : quand la machine écrit pour vous
    1. Un préprocesseur, pour quoi faire ?
    2. L’approche DRY : simplicité et élégance du code
    3. Étendre les possibilités de CSS
    4. Un code valide à tout moment
      1. Fautes de frappe, oublis… l’erreur est humaine
      2. Préprocesseur = validateur à la volée
    5. LESS
    6. Sass
    7. Google closure stylesheets
    8. Stylus
    9. CSS scaffold
  16. Chapitre 8 Sass et Compass
    1. Premiers pas avec Sass
      1. Interfaces graphiques
        1. Compass.app
        2. Scout
        3. CodeKit
        4. LiveReload
      2. Installation en ligne de commande
        1. Sous Mac OS X et Linux
        2. Si l’opération n’a pas fonctionné sous Mac
        3. Sous Windows
      3. Outil en ligne de commande
        1. Convertir un fichier en Sass
        2. Surveiller un dossier : conversion à la volée en temps réel
    2. Syntaxe et fonctionnalités de Sass
      1. Syntaxe de base de Sass
      2. Règles imbriquées
      3. Sélecteurs avancés
        1. Référencer le sélecteur courant
        2. Référencer les sélecteurs parents
      4. Commentaires
      5. Les variables
      6. Les mixins
        1. Définir un mixin : @mixin
        2. Appeler un mixin : @include
        3. Arguments
      7. Héritage de classe : @extend
      8. Inclure un fichier : @import
      9. Le module de couleurs
        1. Normalisation automatique
        2. Opérations sur les couleurs
        3. Transparence, opacité
        4. Saturation
        5. Varier la luminosité
    3. Bonnes pratiques en Sass
      1. Mixins : attention au surpoids
      2. Imbrications : la règle de l’inception
        1. Un problème répandu
        2. Le cauchemar de la surimbrication
        3. La règle de l’inception
      3. Performances : concaténer et compacter les CSS
    4. Compass : un métaframework
      1. Premiers pas avec Compass
    5. Compass dans la pratique
      1. Reset.css en une ligne
      2. Plus jamais d’images manquantes
      3. Des images et des fontes embarquées
      4. Dimensions d’une image
      5. Des sprites sans aucun effort
        1. Rappels sur les sprites CSS
        2. Présentation du module de sprites de Compass
        3. Créer un bouton avec Compass
      6. CSS3 facile sans préfixe
        1. Qu’est ce qu’un préfixe constructeur ?
        2. Box-shadow
        3. Border-radius
        4. Des dégradés sous tous les navigateurs
        5. Transformations
        6. Transitions
  17. Chapitre 9 Erreurs de conception : comment les débusquer
    1. L’usage des CSS sur le web aujourd’hui
    2. Les différents producteurs de feuilles de style
    3. Outils pour diagnostiquer
      1. L’inspecteur web et Firebug
      2. Diagnostic en ligne avec CSS lint
    4. Les styles inline (dans la source du HTML)
    5. La guerre des règles !important
    6. Les règles surspécifiées
    7. La multiplication des propriétés
  18. Chapitre 10 Méthode : coder un design de zéro
    1. Étudier le design
    2. Déduire des motifs récurrents
    3. Définir la base typographique
    4. Coder la structure générale
    5. Coder les modules
    6. Étape finale : les exceptions
  19. Chapitre 11 Méthode : faire le ménage dans des CSS
    1. À partir de quand, et jusqu’à quel point optimiser ?
    2. Étape 1 : utiliser les variables à bon escient
      1. Les couleurs
      2. Les jeux de polices
      3. La grille de mise en page
        1. Générer une grille de mise en page simple et maintenable
    3. Étape 2 : séparation en plusieurs feuilles partielles
    4. Étape 3 : imbrication des sélecteurs
    5. Étape 4 : création de mixins
      1. Idées de mixins
    6. Étape 5 : extensions de classes
      1. Exemple : étendre une boîte arrondie
      2. Exemple : optimiser un mixin
    7. Bonus : débogagecross-browser sans hacks
      1. Méthode 1 : classes et commentaires conditionnels
      2. Méthode 2 : feuilles de style séparées avec Sass
        1. Le principe
        2. En application
  20. Index

Product information

  • Title: CSS maintenables
  • Author(s): Kaelig Deloumeau-Prigent
  • Release date: July 2012
  • Publisher(s): Eyrolles
  • ISBN: 9782212134179