{"id":6423,"date":"2011-11-15T22:12:58","date_gmt":"2011-11-15T21:12:58","guid":{"rendered":"http:\/\/www.ziserman.com\/blog\/?p=6423"},"modified":"2011-11-15T22:49:26","modified_gmt":"2011-11-15T21:49:26","slug":"les-outils-pour-enrichir-le-css","status":"publish","type":"post","link":"https:\/\/www.ziserman.com\/blog\/2011\/11\/15\/les-outils-pour-enrichir-le-css\/","title":{"rendered":"Les outils pour enrichir le CSS"},"content":{"rendered":"

Le CSS, c’est le langage qui permet de faire la mise en forme des pages web.<\/p>\n

Cela permet de s\u00e9parer le fond de la forme : le HTML contient le fond (le texte en particulier), et la d\u00e9coration se fait via le CSS (la police, la taille, les bordures, …).<\/p>\n

Bon, \u00e7a, c’est la th\u00e9orie ;).<\/p>\n

Dans la pratique, \u00e9crire une couche pr\u00e9sentation en CSS est tr\u00e8s technique, avec certaines parties plut\u00f4t r\u00e9p\u00e9titives et impossible \u00e0 factoriser. Exemple : un site utilise une palette de couleurs. Impossible, en CSS, de d\u00e9finir des constantes avec ces codes couleurs.<\/p>\n

Sinon, quand on n’arrive pas \u00e0 faire ce qu’on veut en CSS, on le fait en Javascript.<\/p>\n

Certains proposent d’am\u00e9liorer tout \u00e7a avec des \u00ab\u00a0m\u00e9ta langages\u00a0\u00bb au dessus de CSS.<\/strong><\/p>\n

Exemples : SASS<\/a>, LESS<\/a>, …<\/p>\n

SASS est une technologie c\u00f4t\u00e9 serveur, on passe son code CSS enrichi dans la moulinette SASS et \u00e7a ressort un code CSS standard.<\/p>\n

\"\"<\/a><\/p>\n

Si j’ai bien compris, LESS permet \u00e0 peu pr\u00e8s la m\u00eame chose, avec une technologie Javascript, qui peut \u00eatre c\u00f4t\u00e9 client ou serveur.<\/p>\n

Je ne rentrerais pas dans le d\u00e9tail, ce n’est pas l’objet de ce blog.<\/p>\n

Je trouve que c’est une super bonne id\u00e9e<\/strong>, que de proposer des langages, ou m\u00e9ta langages, qui permettent de programmer plus propre, plus court<\/strong>.<\/p>\n

Mais cela ouvre la voie suivante :<\/p>\n

Le code que j’\u00e9cris n’est pas le code envoy\u00e9 c\u00f4t\u00e9 client.<\/p>\n

Avantage : le code que j’\u00e9cris est plus court, de meilleure qualit\u00e9.<\/p>\n

Inconvenient : ce que je vais d\u00e9bugg\u00e9 n’est pas ce que j’ai \u00e9crit.<\/p>\n

Mon avis, tr\u00e8s clairement, est que c’est bien l’avenir !<\/strong><\/p>\n

Je pense depuis longtemps qu’\u00e0 moyen terme, les langages du web n’ont pas vocation \u00e0 \u00eatre manipul\u00e9s directement<\/strong> : ce sont, de mon point de vue, des langages de trop bas niveaux, avec des contraintes beaucoup trop complexes. Je pense bien s\u00fbr en particulier au probl\u00e8me de multi-terminal \/ multi navigateur.<\/p>\n

Pour prendre une analogie, cela me fait penser au Postscript : c’est un langage de bas niveau pour piloter les imprimantes (ou autres interfaces d’ailleurs). Mais personne n’aurait l’id\u00e9e d’\u00e9crire \u00e0 la main du code Postscript !<\/em><\/p>\n

J’ai donc la conviction qu’il devrait sortir des syst\u00e8mes qui vont bien plus loin dans cette voie :<\/p>\n

C’est une voie \u00e9troite, parce que, de mon point de vue, ces syst\u00e8mes doivent \u00eatre sp\u00e9cifiques web, alors que ce qu’on voit bien souvent, ce sont des frameworks g\u00e9n\u00e9riques, et je ne crois pas du tout \u00e0 cette approche.<\/p>\n

C’est pour cela que je trouve les initiatives type LESS ou SASS particuli\u00e8rement int\u00e9ressantes : on am\u00e9liore la qualit\u00e9, de mani\u00e8re tr\u00e8s sp\u00e9cifique au Web.<\/p>\n

Et vous, qu’en pensez vous ?<\/p>\n","protected":false},"excerpt":{"rendered":"

Le CSS, c’est le langage qui permet de faire la mise en forme des pages web. Cela permet de s\u00e9parer le fond de la forme : le HTML contient le fond (le texte en particulier), et la d\u00e9coration se fait via le CSS (la police, la taille, les bordures, …). Bon, \u00e7a, c’est la th\u00e9orie […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[2],"tags":[379,300,184,283,52],"class_list":["post-6423","post","type-post","status-publish","format-standard","hentry","category-e-commerce","tag-araok","tag-css","tag-genie-logiciel","tag-html","tag-programmation"],"yoast_head":"\nLes outils pour enrichir le CSS - Ziserman.com<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.ziserman.com\/blog\/2011\/11\/15\/les-outils-pour-enrichir-le-css\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Les outils pour enrichir le CSS - Ziserman.com\" \/>\n<meta property=\"og:description\" content=\"Le CSS, c’est le langage qui permet de faire la mise en forme des pages web. Cela permet de s\u00e9parer le fond de la forme : le HTML contient le fond (le texte en particulier), et la d\u00e9coration se fait via le CSS (la police, la taille, les bordures, …). Bon, \u00e7a, c’est la th\u00e9orie […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.ziserman.com\/blog\/2011\/11\/15\/les-outils-pour-enrichir-le-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Ziserman.com\" \/>\n<meta property=\"article:published_time\" content=\"2011-11-15T21:12:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2011-11-15T21:49:26+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.ziserman.com\/blog\/wp-content\/uploads\/2011\/11\/Capture-d\u2019\u00e9cran-2011-11-15-\u00e0-22.38.57.png\" \/>\n<meta name=\"author\" content=\"Fran\u00e7ois\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ziserman\" \/>\n<meta name=\"twitter:site\" content=\"@ziserman\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fran\u00e7ois\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.ziserman.com\\\/blog\\\/2011\\\/11\\\/15\\\/les-outils-pour-enrichir-le-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.ziserman.com\\\/blog\\\/2011\\\/11\\\/15\\\/les-outils-pour-enrichir-le-css\\\/\"},\"author\":{\"name\":\"Fran\u00e7ois\",\"@id\":\"https:\\\/\\\/www.ziserman.com\\\/blog\\\/#\\\/schema\\\/person\\\/f9bae013e59005579f4b86f162f89c72\"},\"headline\":\"Les outils pour enrichir le CSS\",\"datePublished\":\"2011-11-15T21:12:58+00:00\",\"dateModified\":\"2011-11-15T21:49:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.ziserman.com\\\/blog\\\/2011\\\/11\\\/15\\\/les-outils-pour-enrichir-le-css\\\/\"},\"wordCount\":492,\"commentCount\":12,\"publisher\":{\"@id\":\"https:\\\/\\\/www.ziserman.com\\\/blog\\\/#\\\/schema\\\/person\\\/f9bae013e59005579f4b86f162f89c72\"},\"keywords\":[\"ARAOK !\",\"CSS\",\"G\u00e9nie Logiciel\",\"HTML\",\"programmation\"],\"articleSection\":[\"e-commerce\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.ziserman.com\\\/blog\\\/2011\\\/11\\\/15\\\/les-outils-pour-enrichir-le-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.ziserman.com\\\/blog\\\/2011\\\/11\\\/15\\\/les-outils-pour-enrichir-le-css\\\/\",\"url\":\"https:\\\/\\\/www.ziserman.com\\\/blog\\\/2011\\\/11\\\/15\\\/les-outils-pour-enrichir-le-css\\\/\",\"name\":\"Les outils pour enrichir le CSS - Ziserman.com\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.ziserman.com\\\/blog\\\/#website\"},\"datePublished\":\"2011-11-15T21:12:58+00:00\",\"dateModified\":\"2011-11-15T21:49:26+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.ziserman.com\\\/blog\\\/2011\\\/11\\\/15\\\/les-outils-pour-enrichir-le-css\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.ziserman.com\\\/blog\\\/2011\\\/11\\\/15\\\/les-outils-pour-enrichir-le-css\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.ziserman.com\\\/blog\\\/2011\\\/11\\\/15\\\/les-outils-pour-enrichir-le-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/www.ziserman.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Les outils pour enrichir le CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.ziserman.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.ziserman.com\\\/blog\\\/\",\"name\":\"BLOG E-COMMERCE\",\"description\":\"Fran\u00e7ois Ziserman : entrepreneur, IA et \u00e9b\u00e9nisterie\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.ziserman.com\\\/blog\\\/#\\\/schema\\\/person\\\/f9bae013e59005579f4b86f162f89c72\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.ziserman.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/www.ziserman.com\\\/blog\\\/#\\\/schema\\\/person\\\/f9bae013e59005579f4b86f162f89c72\",\"name\":\"Fran\u00e7ois\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ba23809fd4de9b5f86f21715fd23efa8331e766f2929dc11d3ae98539ba237b4?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ba23809fd4de9b5f86f21715fd23efa8331e766f2929dc11d3ae98539ba237b4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ba23809fd4de9b5f86f21715fd23efa8331e766f2929dc11d3ae98539ba237b4?s=96&d=mm&r=g\",\"caption\":\"Fran\u00e7ois\"},\"logo\":{\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ba23809fd4de9b5f86f21715fd23efa8331e766f2929dc11d3ae98539ba237b4?s=96&d=mm&r=g\"},\"url\":\"https:\\\/\\\/www.ziserman.com\\\/blog\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Les outils pour enrichir le CSS - Ziserman.com","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.ziserman.com\/blog\/2011\/11\/15\/les-outils-pour-enrichir-le-css\/","og_locale":"fr_FR","og_type":"article","og_title":"Les outils pour enrichir le CSS - Ziserman.com","og_description":"Le CSS, c’est le langage qui permet de faire la mise en forme des pages web. Cela permet de s\u00e9parer le fond de la forme : le HTML contient le fond (le texte en particulier), et la d\u00e9coration se fait via le CSS (la police, la taille, les bordures, …). Bon, \u00e7a, c’est la th\u00e9orie […]","og_url":"https:\/\/www.ziserman.com\/blog\/2011\/11\/15\/les-outils-pour-enrichir-le-css\/","og_site_name":"Ziserman.com","article_published_time":"2011-11-15T21:12:58+00:00","article_modified_time":"2011-11-15T21:49:26+00:00","og_image":[{"url":"http:\/\/www.ziserman.com\/blog\/wp-content\/uploads\/2011\/11\/Capture-d\u2019\u00e9cran-2011-11-15-\u00e0-22.38.57.png","type":"","width":"","height":""}],"author":"Fran\u00e7ois","twitter_card":"summary_large_image","twitter_creator":"@ziserman","twitter_site":"@ziserman","twitter_misc":{"\u00c9crit par":"Fran\u00e7ois","Dur\u00e9e de lecture estim\u00e9e":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.ziserman.com\/blog\/2011\/11\/15\/les-outils-pour-enrichir-le-css\/#article","isPartOf":{"@id":"https:\/\/www.ziserman.com\/blog\/2011\/11\/15\/les-outils-pour-enrichir-le-css\/"},"author":{"name":"Fran\u00e7ois","@id":"https:\/\/www.ziserman.com\/blog\/#\/schema\/person\/f9bae013e59005579f4b86f162f89c72"},"headline":"Les outils pour enrichir le CSS","datePublished":"2011-11-15T21:12:58+00:00","dateModified":"2011-11-15T21:49:26+00:00","mainEntityOfPage":{"@id":"https:\/\/www.ziserman.com\/blog\/2011\/11\/15\/les-outils-pour-enrichir-le-css\/"},"wordCount":492,"commentCount":12,"publisher":{"@id":"https:\/\/www.ziserman.com\/blog\/#\/schema\/person\/f9bae013e59005579f4b86f162f89c72"},"keywords":["ARAOK !","CSS","G\u00e9nie Logiciel","HTML","programmation"],"articleSection":["e-commerce"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.ziserman.com\/blog\/2011\/11\/15\/les-outils-pour-enrichir-le-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.ziserman.com\/blog\/2011\/11\/15\/les-outils-pour-enrichir-le-css\/","url":"https:\/\/www.ziserman.com\/blog\/2011\/11\/15\/les-outils-pour-enrichir-le-css\/","name":"Les outils pour enrichir le CSS - Ziserman.com","isPartOf":{"@id":"https:\/\/www.ziserman.com\/blog\/#website"},"datePublished":"2011-11-15T21:12:58+00:00","dateModified":"2011-11-15T21:49:26+00:00","breadcrumb":{"@id":"https:\/\/www.ziserman.com\/blog\/2011\/11\/15\/les-outils-pour-enrichir-le-css\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.ziserman.com\/blog\/2011\/11\/15\/les-outils-pour-enrichir-le-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.ziserman.com\/blog\/2011\/11\/15\/les-outils-pour-enrichir-le-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/www.ziserman.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Les outils pour enrichir le CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.ziserman.com\/blog\/#website","url":"https:\/\/www.ziserman.com\/blog\/","name":"BLOG E-COMMERCE","description":"Fran\u00e7ois Ziserman : entrepreneur, IA et \u00e9b\u00e9nisterie","publisher":{"@id":"https:\/\/www.ziserman.com\/blog\/#\/schema\/person\/f9bae013e59005579f4b86f162f89c72"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.ziserman.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":["Person","Organization"],"@id":"https:\/\/www.ziserman.com\/blog\/#\/schema\/person\/f9bae013e59005579f4b86f162f89c72","name":"Fran\u00e7ois","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/secure.gravatar.com\/avatar\/ba23809fd4de9b5f86f21715fd23efa8331e766f2929dc11d3ae98539ba237b4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/ba23809fd4de9b5f86f21715fd23efa8331e766f2929dc11d3ae98539ba237b4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ba23809fd4de9b5f86f21715fd23efa8331e766f2929dc11d3ae98539ba237b4?s=96&d=mm&r=g","caption":"Fran\u00e7ois"},"logo":{"@id":"https:\/\/secure.gravatar.com\/avatar\/ba23809fd4de9b5f86f21715fd23efa8331e766f2929dc11d3ae98539ba237b4?s=96&d=mm&r=g"},"url":"https:\/\/www.ziserman.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.ziserman.com\/blog\/wp-json\/wp\/v2\/posts\/6423","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ziserman.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ziserman.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ziserman.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ziserman.com\/blog\/wp-json\/wp\/v2\/comments?post=6423"}],"version-history":[{"count":0,"href":"https:\/\/www.ziserman.com\/blog\/wp-json\/wp\/v2\/posts\/6423\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.ziserman.com\/blog\/wp-json\/wp\/v2\/media?parent=6423"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ziserman.com\/blog\/wp-json\/wp\/v2\/categories?post=6423"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ziserman.com\/blog\/wp-json\/wp\/v2\/tags?post=6423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}