Personne ne pourra dire le contraire, le langage CSS est devenu un élément incontournable de tous les sites Web… En effet, aujourd’hui on ne peut pas se passer de celui-ci pour mettre en forme un élément de la page (couleur, taille, etc…), mais également agencer la page (disposition des blocs à droite, à gauche, etc…).
Acronyme de Cascading Style Sheets, ce langage donc destiné à la présentation, est aujourd’hui une ressource incontournable de l’écosystème Web. Reprenant à son compte la doctrine de la séparation du contenu et de la présentation d’un document, le langage CSS permet de factoriser les informations de style, et par la même occasion de réduire considérablement le poids d’une page Web.

Malheureusement, comme tout le monde le sait, l’Internet est un vaste entrepôt de ressources ! À ce jour, si vous souhaitez vous lancer dans le développement Web, et de facto par la création d’un site Web, vous allez pouvoir retrouver des tutoriels, des exemples d’intégrations, et même des frameworks, 960.gs et Twitter Bootstrap pour ne citer qu’eux, qui vont vous économiser un temps précieux. Mais comme souvent, débuter avec un projet gigantesque qui est composé de dizaines de fichiers, et qui pour certains est entièrement dans la langue de Shakespeare peut être un frein !
Dans le domaine du CSS, on va retrouver également de nombreux “resets”, tels que Normalizr, qui sont des techniques consistant à réinitialiser à 0 la valeur de certains éléments HTML afin d’éviter une partie des différences d’affichage sur les divers navigateurs. Certes c’est déjà un avancement par rapport au “lourd” framework mais il y a encore quelques lacunes comme nous allons voir par la suite…

Un projet par un français…

Tout ceci est du passé ! En effet, c’était sans compter sur les talents d’un webdesigner alsacien, passionné de CSS et de Web mobile, fondateur d’Alsacréations et photographe amateur… Vous l’avez reconnu ? Bien sûr il s’agit de Raphaël Goetter adepte des services en tout genre sur le Web ! À son actif, outre le fait d’être le fondateur d’Alsacréations, il a développé ThinkMobileFirst, un site personnel dédié à la conception de pages Web pour les appareils mobiles (smartphones, tablettes) dans lequel il présente différentes solutions pour la navigation mobile, la mise en page fluide, et les performances Web, ainsi qu’ie7nomore initialement créé lors de la sortie du navigateur Internet Explorer 8, pour démontrer les faiblesses de son aîné IE7.

Autant dire que ce n’est pas une surprise de voir donc Raphaël s’embarquer dans un nouveau projet, qui selon ses mots est “un nouveau projet personnel”.

KNACSS, la solution ultime ?

Pour reprendre la description qu’il en fait sur son blog personnel, KNACSS est une feuille de styles de base pour débuter n’importe quel projet d’intégration HTML/CSS ! Comme Raphaël le précise, ce projet est le “fruit de quelques années d’expérience et d’échanges dans le domaine”.

Autrement dit, KNACSS se positionne entre les lourds frameworks CSS, et les solutions de reset. Ainsi, ce dernier va éviter aux développeurs, et donc à vous lecteur, d’utiliser que partiellement les frameworks…

KNACSS, présenté par son auteur…

Pour présenter KNACSS, et en apprendre davantage sur ce dernier qui de mieux placer que Raphaël lui-même pour en parler ? C’est pourquoi j’ai décidé de lui poser quelques questions auxquelles il a répondu en quelques minutes ! Une personnes talentueuse et simple ! Et oui ça existe … Bref voici l’interview :

BlogNT : Bonjour Raphael, je te reçois une nouvelle fois sur le BlogNT, et aujourd’hui nous allons parler de KNACSS ! Peux-tu nous dire en quelques mots ce qui se cache derrière ce terme “barbare” ? D’ailleurs d’où vient-il pour les non “alsacophiles” ?
Raphaël : Bonjour Yohann, Derrière le nom “KNACSS” se combinent plusieurs originalités. Tout d’abord, il s’agit d’un nom de domaine court et qui contient le terme CSS. C’est un bon début.
Pour finir en beauté, le mot “knacks” désigne des saucisses de Strasbourg et apporte la touche d’humour que je souhaitais et qui caractérise généralement les projets d’Alsacréations.

BlogNT : Ce projet personnel n’est pas si anodin que ça, en quoi est-il mieux que les poids lourds ? Est-ce justement le terme “poids lourd” ?

Raphaël : Il s’agit surtout d’un projet né avec l’expérience d’un certain nombre d’intégrations HTML / CSS pour des projets de clients.
Pour avoir testé de nombreux resets (Eric Meyer, YUI, Normalizr), mais aussi beaucoup de frameworks CSS (Blueprint, 960.gs, Twitter Bootstrap), nous en sommes arrivés à une conclusion assez unanime : ces outils sont pratiques pour aller très vite en développement mais sont généralement des usines à gaz dont on n’exploite qu’une infime partie. De plus, on n’est systématiquement obligé d’écraser une bonne partie des styles pour les adapter à chaque projet.
Bref, on avait effectivement besoin d’une base commune conventionnée et commentée. Mais surtout d’une base minimale pouvant être enrichie et adaptée à chacun de nos projets.

BlogNT : J’ai lu chez un confrère que l’on te reprochait de ne pas avoir fait une description anglophone de KNACSS, qui est selon toi une volonté. Attends-tu justement un retour de la communauté GitHub ?

Raphaël : J’ai vu ce commentaire et j’ai plusieurs réponses possibles :

• 1 – il s’agit au départ d’un petit projet presque personnel qui n’a pas vocation à devenir un monstre du buzz 😉
• 2 – toute la feuille de style est intégralement commentée (donc expliquée) en anglais car notre convention interne est anglophone
• 3 – le projet est hébergé sur GitHub, donc à priori parfaitement ouvert à la communauté (oui francophone uniquement en effet)
• 4 – un nom tel que “KNACSS” n’est pas franchement prévu pour s’expatrier 🙂

BlogNT : Ensuite, j’ai vu que tu avais certaines réticences au sujet de GitHub ? Pourquoi ? Ne crois-tu pas qu’il s’agisse d’un bon système pour tous les projets ?

Raphaël : Je n’ai aucune réticence envers GitHub, c’est simplement que je suis plutôt d’un esprit “artiste” et assez réticent à lire dans la matrice et faire de la ligne de code. Je pensais naïvement qu’il était possible de gérer ses transferts de fichiers en ligne directement sur GitHub, ce qui n’est pas le cas.
Depuis, je me soigne petit à petit et je découvre Git.

BlogNT : Allez une dernière pour finir, penses-tu, souhaites-tu, espères-tu, que KNACSS peut s’exporter dans un premier temps sur tous les petits projets des développeurs francophones, avant de s’expatrier outre Atlantique ?

Raphaël : En toute honnêteté je n’en sais rien et je n’ai rien calculé.
Tout ce que je sais, c’est qu’il s’agit d’un outil interne au départ, qui nous sert au quotidien. S’il peut servir à d’autres, tant mieux !

BlogNT : As-tu une astuce à fournir au lecteur du BlogNT avant de commencer le développement ?

Comme pour n’importe quel outil, KNACSS n’est pas magique et ne pourra pas être idéal dans toutes les situations, même s’il tend à atteindre cet idéal puisque minimaliste.
Il faut bien lire toutes les indications et pistes (voir les liens explicatifs fournis par exemple) avant de se jeter dessus.
De plus, il n’est pas forcément destiné aux débutants complets et certaines subtilités peuvent avoir de grosses conséquences. Par exemple j’ai choisi de modifier tous les calculs des tailles d’éléments à l’aide de la propriété box-sizing, c’est loin d’être anodin et il faut vraiment comprendre ce que cela implique, notamment en terme de compatibilité envers les anciens navigateurs (IE7) et du fichiers “polyfill” requis.
De même pour les positionnements : il est prévu de pouvoir disposer de deux schémas de positionnement différents, de gérer les gouttières et les largeurs des boîtes, mais je pars du principe que l’utilisateur maîtrise déjà correctement les positionnements CSS avant d’avoir recours à des frameworks.

Mais comment l’utiliser ?

Il s’agit de l’énorme avantage de KNACSS ! Il vous suffit de récupérer le projet sur GitHub, puis d’inclure la feuille de style dans votre page Web comme ceci :

L’énorme avantage d’avoir un fichier, est qu’il évite des requêtes et des chargements inutiles ! Ensuite, au menu de KNACSS nous allons avoir des styles pour :

• 1 – colors
• 2 – reset
• 3 – layout and modules
• 4 – header
• 5 – sidebar
• 6 – footer
• 7 – forms
• 8 – main
• 9 – iefix
• 10 – print
• 11 – mobile

À vous de jouer et laisser votre imagination parler…

Conclusion

Si l’on devait conclure sur KNACSS, sachez qu’il s’agit d’une feuille de style CSS certes minimaliste, mais qui se veut extensible pour débuter une intégration et qui surtout vous évite d’utiliser n’importe quelle usine à gaz, ou encore un reset CSS complet qui peut s’avérer “agressif” dans le sens où généralement il faut que l’on redéfinisse chaque élément par la suite.

Voilà de quoi commencer un projet extensible et modulable ! Encore un grand merci pour son boulot qu’il fait quotidiennement pour le Web français, mais également pour sa disponibilité.

Plutôt sympa non ? Si vous avez des remarques sur le projet, n’hésitez pas à les formuler sur GitHub, Raphaël se fera un plaisir d’y répondre…