{"id":380,"date":"2020-12-14T07:00:19","date_gmt":"2020-12-14T06:00:19","guid":{"rendered":"https:\/\/cours.artecom.studio\/nepduweb\/?p=380"},"modified":"2020-12-14T02:11:11","modified_gmt":"2020-12-14T01:11:11","slug":"20201130-emmet-plus-de-css","status":"publish","type":"post","link":"https:\/\/cours.artecom.studio\/nepduweb\/2020\/12\/14\/20201130-emmet-plus-de-css\/","title":{"rendered":"En mode projet : Emmet plus de CSS ?"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\" id=\"toc_0\">En mode projet : Emmet plus de CSS ?<sup><a href=\"#fn1\">1<\/a><\/sup><\/h1>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc_1\"><em>En mode projet, \u00e9pisode 2<\/em><\/h2>\n\n\n\n<p><em>La s\u00e9rie EN MODE PROJET inaugure de nouveaux types de billets, principalement des tutoriels, permettant de r\u00e9aliser une des op\u00e9rations dont vous pourrez avoir besoin pour votre projet. Le billet est publi\u00e9 en parall\u00e8le des fichiers HTML et CSS sur la dropbox.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc_2\">Un turbo dans votre CSS<\/h2>\n\n\n\n<p>Hello les bricodeurs et les bricodeuses ! Pour celles et ceux d&rsquo;entre vous qui ont trop aim\u00e9 l&rsquo;article sur <strong>Emmet<\/strong>, je me permets un petit <em>one more thing<\/em>\u2026<br><br>J&rsquo;allais vous \u00e9crire un article sur <em>Emmet et le CSS<\/em> \u00e0 la suite de l&rsquo;article de pr\u00e9sentation, qui montre le fonctionnement d&rsquo;<strong>Emmet<\/strong> en HTML. Sachant que vous allez principalement \u00e9crire du CSS, en mode projet, c&rsquo;\u00e9tait la suite logique. Et voil\u00e0 que je tombe sur cet article de <a href=\"https:\/\/la-cascade.io\/\">La Cascade<\/a><sup><a href=\"#fn2\">2<\/a><\/sup> qui a d\u00e9j\u00e0 fait tout le job ! C&rsquo;est accessible en cliquant sur son titre, et \u00e7a s&rsquo;intitule : <a href=\"https:\/\/la-cascade.io\/emmet-un-turbo-dans-votre-css\/\"><em>Emmet, un turbo dans votre CSS<\/em><\/a> (comme c&rsquo;est une traduction, je ne suis m\u00eame pas s\u00fbr qu&rsquo;ils ont per\u00e7u le jeu de mots\u2026).<br><br>Et, cerise sur le <em>cheesecake<\/em>, les raccourcis sont accompagn\u00e9s d&rsquo;exemples visuels :<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/la-cascade.io\/content\/images\/2013\/Dec\/emmet_css_multiple_properties.gif?w=740&#038;ssl=1\" alt=\"exemple: \u00e9crire des propri\u00e9t\u00e9s multiples\"\/><figcaption>exemple: \u00e9crire des propri\u00e9t\u00e9s multiples<\/figcaption><\/figure>\n\n\n\n<p><strong>Enjoy !<\/strong><sup><a href=\"https:\/\/cours.artecom.studio\/nepduweb\/wp-admin\/post.php?post=380&amp;action=edit#fn3\">3<\/a><\/sup><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc_3\">Monsieur Plus, encore plus d&rsquo;Emmet !<\/h2>\n\n\n\n<p>Quand j&rsquo;\u00e9tais gamin, il y avait un personnage r\u00e9current dans les publicit\u00e9s pour des petits g\u00e2teaux, Monsieur Plus: il ajoutait des ingr\u00e9dients dans la p\u00e2te des g\u00e2teaux pour qu&rsquo;ils soient meilleurs. <\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"video-container\"><iframe title=\"BAHLSEN Kipferl  confiserie M Plus   Publicit\u00e9 Inafr\" width=\"740\" height=\"555\" src=\"https:\/\/www.youtube.com\/embed\/FfBlN4Y2ldY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<\/div><figcaption>Ah le Monsieur Plus de Bahlsen \ud83d\ude09 Un retour \u00e0 l&rsquo;enfance !<\/figcaption><\/figure>\n\n\n\n<p>H\u00e9 ben \u00e0 mon tour de jouer les Monsieur Plus :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>je vous met un des premiers tutos vid\u00e9o que j&rsquo;avais trouv\u00e9 sur Emmet, quand je d\u00e9couvrais encore le plug-in; j&rsquo;ai coup\u00e9 la partie sur le HTML, le tuto d\u00e9marre directement au CSS (mais vous pouvez le remettre au d\u00e9but, sur Youtube, si vous voulez passer 13 minutes d&rsquo;\u00e9merveillement codique ;-)).<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"video-container\"><iframe title=\"Tutoriel Sublime Text : Emmet\" width=\"740\" height=\"555\" src=\"https:\/\/www.youtube.com\/embed\/vB9nj7Etn0o?start=449&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<\/div><figcaption>Un tutoriel pour voir ce qu&rsquo;Emmet est capable de faire en CSS<\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>En prime, un article qui recense les principaux raccourcis d&rsquo;Emmet, ceux que vous pouvez facilement retenir et qui vous seront toujours utiles : <a href=\"https:\/\/la-cascade.io\/une-liste-de-raccourcis-emmet\/\">Raccourcis et astuces Emmet<\/a><\/li><li>Enfin, les d\u00e9veloppeurs d&rsquo;Emmet ont eux-m\u00eames \u00e9crit <a href=\"https:\/\/docs.emmet.io\/cheat-sheet\/\">une documentation compl\u00e8te t\u00e9l\u00e9chargeable<\/a> : si vous cherchez un raccourci d&rsquo;Emmet, il s&rsquo;y trouve !<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/la-cascade.io\/content\/images\/2017\/03\/em13-compressor.png?w=740&#038;ssl=1\" alt=\"principaux raccourcis CSS d'Emmet\"\/><figcaption>principaux raccourcis CSS d&rsquo;Emmet<\/figcaption><\/figure><\/div>\n\n\n\n<p>Allez, j&rsquo;arr\u00eate, faudrait pas que vous en arriviez \u00e0 une indigestion, non plus !<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<ol class=\"wp-block-list\"><li>Je persiste dans le jeu de mots pourri, mais\u2026 j&rsquo;aime trop \u00e7a !&nbsp;<a href=\"#fnref1\">\u21a9<\/a><\/li><li>La Cascade, c&rsquo;est ce site qui s&rsquo;est donn\u00e9 pour mission de traduire en fran\u00e7ais des articles importants pour comprendre le d\u00e9veloppement web initialement parus en anglais.&nbsp;<a href=\"#fnref2\">\u21a9<\/a><\/li><li><strong>Rappel<\/strong>: si vous n&rsquo;\u00eates pas trop \u00e0 l&rsquo;aise avec votre CSS, Emmet peut vous embrouiller au lieu de vous aider. Ne vous forcez pas: soit la magie op\u00e8re, et vous \u00e9crivez beaucoup plus vite et avec beaucoup moins d&rsquo;erreur votre CSS, soit vous ne comprenez pas ce que vous faites et <strong>(1)<\/strong> vous avez l&rsquo;impression que Brackets vous en veux <em>vraiment<\/em>, <strong>(2)<\/strong>. vous vous dites qu&rsquo;un <em>Ghost in the machine<\/em> \u00e9crit le code \u00e0 votre place. Dans ce cas, abandonnez <strong>Emmet<\/strong> et revenez \u00e0 une \u00e9criture traditionnelle, plus lente, mais o\u00f9 vous comprenez tout ce que vous faites.&nbsp;<a href=\"#fnref3\">\u21a9<\/a><\/li><\/ol>\n","protected":false},"excerpt":{"rendered":"<p>En mode projet : Emmet plus de CSS ?1 En mode projet, \u00e9pisode 2 La s\u00e9rie EN MODE PROJET inaugure de nouveaux types de billets, principalement des tutoriels, permettant de&#46;&#46;&#46;<\/p>\n","protected":false},"author":2,"featured_media":388,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[11,14,46,16,9,4],"tags":[43,40,63],"class_list":["post-380","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-a-lire","category-a-tester","category-en-mode-projet","category-mode-demploi","category-outils","category-pduweb","tag-css","tag-emmet","tag-plus"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2020\/12\/emmet-%40fontface.gif?fit=500%2C210&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/posts\/380","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/comments?post=380"}],"version-history":[{"count":7,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/posts\/380\/revisions"}],"predecessor-version":[{"id":390,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/posts\/380\/revisions\/390"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/media\/388"}],"wp:attachment":[{"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/media?parent=380"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/categories?post=380"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/tags?post=380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}