background preloader

BONNES PRATIQUES

Facebook Twitter

Les trucs à faire et surtout ne pas faire !

Non-standard and Obsolete CSS Properties. 2015's most common CSS Resets to copy/paste, with documentation / tutorials. Enduring CSS: writing style sheets for rapidly changing, long-lived projects – Ben Frain. 820Days 820 days since this post was last revised.

Enduring CSS: writing style sheets for rapidly changing, long-lived projects – Ben Frain

Specific details are likely out of date. 25th September, 2015. The methodology of this post has now been updated, expanded and detailed more fully in my book, Enduring CSS, available from Leanpub. When architecting CSS for a large scale project it’s a common aim to abstract visual patterns for re-use, DRY out code and normalise our designs as much as possible. This post describes what I consider the most advantageous practices and approaches when authoring CSS for a rapidly changing, large scale web project. Due credit: Nicolas Gallagher is always ahead of the game when it comes to thinking about CSS implementations at scale and I took and adapted large elements (specifically code organisation by component) of this approach from his work.

What this post does attempt, is to encapsulate my current approach to writing CSS for enduring web projects. This is a long one, hence the ‘index’: First up, essential tooling: Build system Utility styles. Mini Convention CSS. Ordonnez vos déclarations CSS ! – La Tête dans le Flux. S’y retrouver au sein d’un fichier CSS de plusieurs centaines de lignes de déclarations est souvent fastidieux, notamment dans le cadre d’un projet web collaboratif et quand vos collègues ont d’autres habitudes d’écriture que les vôtres.

Ordonnez vos déclarations CSS ! – La Tête dans le Flux

Par expérience, j’ai pu constater que l’un des moyens pour améliorer rapidement la lisibilité du code CSS est de systématiquement faire apparaître les déclarations dans un ordre identique au sein des blocs de règles. La compréhension et la relecture de la feuille de styles en sont grandement facilitées. À ma connaissance, aucun organisme n’établit ce que l’on pourrait appeler un « agencement officiel ». Je vous suggère cependant de respecter la logique suivante, même si celle-ci – vous allez vous en rendre compte – n’est pas forcément adaptée à tous les cas pratiques : Width: 100%, tu es le Mal ! – La Tête dans le Flux. La propriété CSS width est certainement celle qui porte le plus mal son nom.

width: 100%, tu es le Mal ! – La Tête dans le Flux

En effet, elle représente la taille de la composante de contenu uniquement, pas largeur de l’élément. A vrai dire, l’appellation content-width lui conviendrait parfaitement et serait bien moins source de problèmes, mais voilà, elle s’appelle bel et bien width, et c’est ça le drame. Il est dangereux de croire que width correspond à la largeur de l’élément puisque dès que des marges internes (paddings) ou bordures (border) y sont ajoutées, la taille totale de l’élément ne correspond plus du tout à width. Et c’est d’autant plus problématique que l’on voit pulluler partout des width: 100%… ce qui crée potentiellement des éléments qui déborderont joyeusement de leur parent dès lors que le moindre padding ou la moindre bordure seront appliqués.

C’est tout. Dans la grande majorité des cas, on peut aisément se passer de width: 100% Vos éléments sont des blocks (div, p, h1, ul, etc.) ? Utilisation optimisée de Framework CSS comme Bootstrap avec Less. J'ai déjà abordé le sujet des Frameworks CSS qui surchargeaient le DOM HTML inutilement et allait à l'encontre de la philosophie du W3C (séparation du fond et de la forme) dans un précédent article où j'expliquais pourquoi, par exemple, Bootstrap est une régression pour un développement Front-end de qualité.

Utilisation optimisée de Framework CSS comme Bootstrap avec Less

J'ai également expliqué comment reproduire l'équivalent de fonctionnalités utiles dans un Framework en respectant l'approche CSS-driven dans Grille CSS Responsive et Sémantique sans Framework. Je vais ici vous démontrer que cette méthode CSS-driven peut non seulement être grandement simplifiée avec l'utilisation des préprocesseurs CSS comme Less, Sass ou Stylus, mais qu'elle permet également d'exploiter les Frameworks tel que Bootstrap de manière propre et conforme à la philosophie de séparation de la sémantique et du design. Code Guide by @mdo. Auditer votre CSS. Auditer votre CSS vous aide à organiser votre code, à le rendre plus lisible, à éliminer les répétitions, mais aussi à améliorer les performances de votre site.

Auditer votre CSS

Par Susan Robertson. Par Susan Robertson La perspective de procéder à un audit de CSS ne soulève généralement pas l'enthousiasme, et pourtant c'est devenu un de mes genres de projets préférés. L'audit de CSS est un vrai travail de détective. Vous partez du code d'un site et vous commencez à creuser : combien de feuilles de styles, quel impact sur la performance, comment le CSS lui-même est-il écrit? Je vais partager avec vous quelques astuces pour mener votre propre audit, quelques outils, et les avantages de procéder à un inventaire complet de votre CSS. KNACSS, un micro framework CSS qui a du goût ! Code Guide by @mdo. Necolas/idiomatic-css. Styleguide. Home · Primer.