Tout savoir sur WordPress

CSS Maintenables avec Sass & Compass

CSS Maintenables avec Sass & Compass est un livre qui aborde l’ensemble des bonnes pratiques à mettre en place lors d’une intégration HTML/CSS.

CSS Maintenables avec Sass & Compass est un livre écrit par Kaelig Deloumeau-Prigent (@kaelig) et édité par Eyrolles.

Tous les passionnés et professionnels du design web le savent : les feuilles de styles peuvent devenir un casse-tête pour tous ceux qui conçoivent le design de sites web. Ce livre aborde l’ensemble des bonnes pratiques à mettre en place lors d’une intégration.

Avant de continuer, je tiens à préciser que le sous-titre du livre («avec Sass et Compass») est un faux ami. En effet, il ne s’agit pas d’un livre entièrement consacré à ce préprocesseur. En réalité, seulement deux chapitres sont dédiés à la découverte et à la maitrise de Compass.

CSS Maintenables avec Sass et Compass

Table des matières

  • Préface de Chris Heilmann
  • Avant-propos
  • De à @font-face : une problématique nouvelle
  • Première plongée dans CSS
  • Bonnes pratiques pour un code 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 des CSS

Un livre plein de bon conseil

On appréciera l’histoire qui retrace la relation peu évidente entre les navigateurs et CSS. Elle permet notamment de sensibiliser les développeurs sur l’utilité des feuilles de style et qu’il ne faut pas considérer CSS comme un langage de second niveau.

Ensuite, c’est avec plaisir que l’on découvre une liste de sites ressources traitant du CSS. Cela m’a permis de découvrir des nouveaux sites comme Pompage.net et 24 Ways, puis des outils en ligne tels que Dabblet et Tinkerbin qui m’étaient inconnu jusqu’à ce jour. De même pour les frameworks CSS, l’auteur fait une sélection des frameworks les plus connus et les plus utilisés à ce jour (BluePrint, OOCSS, etc…)

Kaelig apporte des explications sur les bonnes pratiques à adopter pour avoir un code lisible et maintenable De la dégradation gracieuse à la séparation des CSS en fonction de leur contenu, tout est revu en détail pour que vous puissiez démarrer vos prochains projets dans les meilleurs conditions.

Après avoir fait le tour des problématiques et des bonnes pratiques à respecter, deux chapitres sont consacrés à Compass. Ils permettent de se familiariser avec la quasi-totalité des fonctionnalités apportées par le préprocesseur. Étant un (ancien) utilisateur de Less, le livre m’a convaincu d’utiliser Compass pour mes prochains projets. Grâce, entre autre, à des mixins CSS3 pré-intégrés ou la création automatique des sprites, les capacités offertes par Compass dépassent de loin celles de Less.

Quelques petits bémols

Lors de la fin du « De à @font-face : une problématique nouvelle», on aurait apprécié un exemple d’utilisation de @font-face lors du 1er chapitre. Pour les personnes qui n’ont pas encore utilisé cette fonctionnalité, il aurait pu être judicieux d’insérer et d’expliquer en exemple.

Enfin, le livre se termine de façon un peu trop abrupt : il ne contient pas de conclusion. Du coup, on est un peu déçu de voir un livre si parfait se terminer d’une manière aussi directe.

A qui est destiné ce livre ?

Ce livre est destiné à toute personne, de l’intégrateur web au designer web, qui sera amené à toucher du code sur des projets web d’une certaine envergure.

Conclusion

Ce livre est à mettre entre les mains de tous les apprentis développeurs et sur la table de chevet de tous les «experts». En résumé, je recommande ce livre à tous les développeurs quelque soit le niveau en intégration.

Et comme le dit si bien Kaelig : Pratiquer constamment pour vous améliorer : c’est la clé pour devenir un développeur web confirmé.

Errata

Page 88
La première puce à la fin de page contient l’erreur suivante : «HTML + Microdata + Arial» au lieu de «HTML + Microdata + ARIA»

Cet article a été mis à jour il y a 4178 jours - Il n'est peut être plus à jour !

Article écrit par Jonathan B.

Jonathan est le co-fondateur de WP Media, startup connue pour être l’auteur de WP Rocket et Imagify. Il est aussi co-organisateur du WordCamp Lyon et Paris.

9 Commentaires

  1. L’avis est intéressant, je commence à me tourner vers Sass et Compass mais je me pose quand même quelques questions :

    – Peut-on intégrer ce genre de méthode dans WordPress ? je suppose que oui à condition de ce farcir un thème de 0.

    – Comme je le disais je commence seulement à regarder ce genres de choses, et je sais qu’il y a aussi le Less. Est ce qu’il y a une différence nette entre Less et Sass par exemple ou est-ce que c’est simplement de façons différentes de faire ?

    En tout cas le principe de mettre de variables dans le CSS j’adore et j’aime beaucoup leurs exemples sur le site mais je trouve l’exemple avec le code couleur un peu poussé.

    Etienne.

  2. @Etienne :

    Les préprocesseurs CSS sont totalement indépendant des CMS. Pour un thème existant, ça ne sert à rien d’utiliser Compass ou autre puisque le créateur du thème n’aura pas utiliser ces outils. Par contre, pour un thème que l’on développe pour soit même à partir de 0, je conseille fortement l’utilisation de Compass ou de Less.

    Ensuite, la différence entre Less et Compass est assez simple. Compass apporte beaucoup plus de fonctionnalité que Less. De plus, la documentation officielle est déjà vraiment pas mal.

  3. Oui voilà l’intérêt de l’utiliser avec un CMS c’est lorsqu’on fait le template complet, merci :)

    D’accord, j’avais simplement visité les deux sites internet je n’ai pas encore testé less ou compass, merci aussi pour cette réponse :p Y’a plus qu’à !

  4. C’est un très bon live que j’ai apprécié lire :). On a pas mal d’informations pour utiliser les bonnes pratique (que ça soit du CSS classique ou avec SASS/Compass). Dommage que la partie SASS/Compass ne soit pas assez complète.

    Pour ceux qui utilise SASS et Compass comment architecturez-vous vos fichiers dans le dossiers “sass” ? Par exemple une fichier _layout (que contiendrait-t-il ?), un fichier _grid, etc, etc. Si vous avez des exemples de structure de projet avec compass ça me plairais bien pour structurer à bien mes projets.

  5. Perso, j’ai quasiment adopté les recommandations de l’auteur : style.scss, _normalize.scss, _layout.scss, _application.scss, _fonts.scss, _forms.scss, _helpers.scss et ie.scss

  6. Une dernière question en rapport avec Amazon car je sais que tu vends des bouquins sur amazon, est ce qu’il est possible et/ou autoriser de vendre son livre avec son lien d’affi ? En tout cas je vais acheter le bouquin sur compass, si tu as un lien je prends ;)

  7. @Etienne : Oui, bien sur. Il est toute à fait autoriser de vendre ses propres livres via un lien d’affiliation. Je le fais pour mon livre “Savoir tout faire pour le Web avec PHP/MySQL”.

    Pour acheter le livre de Kaelig, tu peux passer via ce lien d’affiliation => CSS Maintenables

  8. @DoudouMoii :

    Le principal intérêt de LESS est qu’il existe des scripts PHP pour le convertir en CSS proprement. Idéal pour les développeurs sous serveurs mutualisés qui travaillent en FTP.

    Pour Sass, il te faudra Ruby ou être en local pour le convertir (d’après mes maigres recherches sur le sujet).

    Pour le reste, c’est surtout une question de syntaxe et du nombre de fonctions disponibles.

    Concernant les thèmes WordPress, certains sont fournis avec leurs fichiers .less ou .scss.
    Au pire, tu peux utiliser des outils en ligne pour convertir les fichiers CSS en LESS (http://css2less.cc/) ou en SASS (http://css2sass.heroku.com/)