KSS, feuille de style CSS pour projets web

Développement | Personnel | 07/04/2014
Une feuille de style CSS pour poser les bases et bien démarrer vos sites Internet et applications web sans perdre de temps à réinventer la roue.

Présentation

Ce projet a été mis à jour le 12/08/2019.

En développement web, que ce soit un site Internet ou une application web, on a forcément besoin d'une charte graphique à un moment donné (aussi minimaliste soit-elle). Et donc, l'étape de la feuille de style CSS est obligatoire. Au début, on s'amuse à réécrire les règles CSS à chaque nouveau projet car c'est en forgeant qu'on devient forgeron. Mais au bout d'un moment, quand l'expertise est là, on cherche à gagner du temps sans avoir à réinventer la roue à chaque fois.

À ce moment-là, j'ai d'abord commencé par utiliser des feuilles de style CSS dites "reset" (celle d'Éric Meyer, par exemple) ou "normalize". J'ai même essayé des frameworks CSS comme "KNACSS" (de Raphaël Goetter) ou "Bootstrap" (d'un développeur Twitter). Mais le problème était toujours le même, j'avais l'impression d'avoir un bazooka entre les mains alors que ma cible était une mouche. Par cette comparaison foireuse, je sous-entends que la majorité des feuilles de style CSS sont agrémentées de scripts JS, grilles, thèmes par défaut, etc. Et ce n'est pas ce que je voulais car aucun projet ne se ressemble et je voulais plutôt une base qu'une boite à outils complète. En outre, en tant que développeur, j'avais ce besoin de comprendre le fonctionnement et d'essayer par moi-même.

Du coup, je me suis lancé dans la conception d'une modeste feuille de style CSS, baptisée KSS. Ce n'est pas un framework CSS, il n'y a aucune fonctionnalité avancée de type popup, liste déroulante, préprocesseur, etc. Je me suis concentré sur le principal. C'est-à-dire une combinaison de reset et de normalize pour avoir une base graphique identique quel que soit le navigateur utilisé. Et conjointement à cette base, je greffe une autre feuille de style CSS vierge où j'ajoute mes règles propres à la charte graphique du projet (couleurs, tailles, polices, etc.).

J'ai déjà utilisé KSS sur plusieurs projets personnels (comme mon Portfolio) et professionnels (un intranet par exemple) et je suis très satisfait du rendu final. Je n'ai plus à me soucier de la compatibilité cross-navigateur avec les règles CSS nécessaires à la réinitialisation des règles propres au navigateur, tout en ayant un minimum de mise en forme (tableaux, formulaires, icônes, notifications, etc.) que j'agrémente selon le besoin du projet.

Pour la réalisation de cette feuille de style CSS, outre mes modifications personnelles, je me suis inspiré de l'excellent travail d'Éric Meyer (pour son reset CSS), de Raphaël Goetter (pour son framework CSS nommé KNACSS), de Nicolas Gallagher (pour son normalize CSS) et de plusieurs frameworks CSS bien connus (BluePrint, Bootstrap, Foundation, etc.).

CSS3Développement webFeuille de stylesFrameworkHTML5Normes W3CResponsive Design

Ressources