davidbgk
/
larlet-fr-david-cache

<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang=fr>
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset=utf-8>
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
<!-- Required to make a valid HTML5 document. -->
<title>Bootstrap est une régression pour un développement Front-end de qualité (archive) — David Larlet</title>
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/static/david/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="David Larlet">
<meta name="application-name" content="David Larlet">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- That good ol' feed, subscribe :p. -->
<link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="http://blog.lesieur.name/bootstrap-est-une-regression-pour-un-developpement-front-end-de-qualite/">

<style>
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* http://practicaltypography.com/equity.html */
/* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
/* https://www.filamentgroup.com/lab/js-web-fonts.html */
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ConcourseT3';
  src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
       url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
body {
  /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  font-family: "EquityTextB", Palatino, serif;
  background-color: #f0f0ea;
  color: #07486c;
  font-kerning: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern", "liga", "clig", "calt";
}
pre, code, kbd, samp, var, tt {
  font-family: 'TriplicateT4c', monospace;
}
em {
  font-style: italic;
  color: #323a45;
}
strong {
  font-weight: bold;
  color: black;
}
nav {
  background-color: #323a45;
  color: #f0f0ea;
  display: flex;
  justify-content: space-around;
  padding: 1rem .5rem;
}
  nav:last-child {
    border-bottom: 1vh solid #2d7474;
  }
  nav a {
    color: #f0f0ea;
  }
  nav abbr {
    border-bottom: 1px dotted white;
  }

h1 {
  border-top: 1vh solid #2d7474;
  border-bottom: .2vh dotted #2d7474;
  background-color: #e3e1e1;
  color: #323a45;
  text-align: center;
  padding: 5rem 0 4rem 0;
  width: 100%;
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
}
  h1.single {
    padding-bottom: 10rem;
  }
  h1 span {
    position: absolute;
    top: 1vh;
    left: 20%;
    line-height: 0;
  }
    h1 span a {
      line-height: 1.7;
      padding: 1rem 1.2rem .6rem 1.2rem;
      border-radius: 0 0 6% 6%;
      background: #2d7474;
      font-size: 1.3rem;
      color: white;
      text-decoration: none;
    }
h2 {
  margin: 4rem 0 1rem;
  border-top: .2vh solid #2d7474;
  padding-top: 1vh;
}
h3 {
  text-align: center;
  margin: 3rem 0 .75em;
}
hr {
  height: .4rem;
  width: .4rem;
  border-radius: .4rem;
  background: #07486c;
  margin: 2.5rem auto;
}
time {
  display: bloc;
  margin-left: 0 !important;
}
ul, ol {
  margin: 2rem;
}
ul {
  list-style-type: square;
}
a {
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.09em;
}
article {
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  margin: 2rem auto;
}
  article.single {
    border-top: .2vh dotted #2d7474;
    margin: -6rem auto 1rem auto;
    background: #f0f0ea;
    padding: 2rem;
  }
  article p:last-child {
    margin-bottom: 1rem;
  }
p {
  padding: 0 .5rem;
  margin-left: 3rem;
}
  p + p,
  figure + p {
    margin-top: 2rem;
  }

blockquote {
  background-color: #e3e1e1;
  border-left: .5vw solid #2d7474;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  margin: 1.5rem;
}
  blockquote cite {
    font-style: italic;
  }
  blockquote p {
    margin-left: 0;
  }

figure {
  border-top: .2vh solid #2d7474;
  background-color: #e3e1e1;
  text-align: center;
  padding: 1.5rem 0;
  margin: 1rem 0 0;
  font-size: 1.5rem;
  width: 100%;
}
  figure img {
    max-width: 250px;
    max-height: 250px;
    border: .5vw solid #323a45;
    padding: 1px;
  }
figcaption {
  padding: 1rem;
  line-height: 1.4;
}
aside {
  display: flex;
  flex-direction: column;
  background-color: #e3e1e1;
  padding: 1rem 0;
  border-bottom: .2vh solid #07486c;
}
  aside p {
    max-width: 50rem;
    margin: 0 auto;
  }

/* https://fvsch.com/code/css-locks/ */
p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  font-size: 1rem;
  line-height: calc( 1.5em + 0.2 * 1rem );
}
h1 {
  font-size: 1.9rem;
  line-height: calc( 1.2em + 0.2 * 1rem );
}
h2 {
  font-size: 1.6rem;
  line-height: calc( 1.3em + 0.2 * 1rem );
}
h3 {
  font-size: 1.35rem;
  line-height: calc( 1.4em + 0.2 * 1rem );
}
@media (min-width: 20em) {
  /* The (100vw - 20rem) / (50 - 20) part
     resolves to 0-1rem, depending on the
     viewport width (between 20em and 50em). */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
    margin-left: 0;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
}
@media (min-width: 50em) {
  /* The right part of the addition *must* be a
     rem value. In this example we *could* change
     the whole declaration to font-size:2.5rem,
     but if our baseline value was not expressed
     in rem we would have to use calc. */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * 1rem );
    line-height: 1.5em;
  }
  p, li, pre, details {
    margin-left: 3rem;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * 1rem );
    line-height: 1.2em;
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * 1rem );
    line-height: 1.3em;
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * 1rem );
    line-height: 1.4em;
  }
  figure img {
    max-width: 500px;
    max-height: 500px;
  }
}

figure.unsquared {
  margin-bottom: 1.5rem;
}
  figure.unsquared img {
    height: inherit;
  }


@media print {
  body { font-size: 100%; }
  a:after { content: " (" attr(href) ")"; }
  a, a:link, a:visited, a:after {
    text-decoration: underline;
    text-shadow: none !important;
    background-image: none !important;
    background: white;
    color: black;
  }
  abbr[title] { border-bottom: 0; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  img { page-break-inside: avoid; }
  @page { margin: 2cm .5cm; }
  h1, h2, h3 { page-break-after: avoid; }
  p3 { orphans: 3; widows: 3; }
  img {
    max-width: 250px !important;
    max-height: 250px !important;
  }
  nav, aside { display: none; }
}

ul.with_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_columns {
    column-count: 2;
  }
}
@media (min-width: 50em) {
  ul.with_columns {
    column-count: 3;
  }
}
ul.with_two_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_two_columns {
    column-count: 1;
  }
}
@media (min-width: 50em) {
  ul.with_two_columns {
    column-count: 2;
  }
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
  .gallery figure img {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .gallery figure figcaption {
    font-family: 'ConcourseT3'
  }

footer {
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
  border-top: 3px solid white;
  padding: 4rem 0;
  background-color: #07486c;
  color: white;
}
  footer > * {
    max-width: 50rem;
    margin: 0 auto;
  }
  footer a {
    color: #f1c40f;
  }
  footer .avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
    margin-right: 2rem;
    padding: 2px 5px 5px 2px;
    background: white;
    border-left: 1px solid #f1c40f;
    border-top: 1px solid #f1c40f;
    border-right: 5px solid #f1c40f;
    border-bottom: 5px solid #f1c40f;
  }
</style>

<h1>
  <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  Bootstrap est une régression pour un développement Front-end de qualité (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="http://blog.lesieur.name/bootstrap-est-une-regression-pour-un-developpement-front-end-de-qualite/">Source originale du contenu</a></h3>
    <p>Pourquoi je n&#39;utilise pas <a href="http://getbootstrap.com/" title="Le framework de développement Front-end responsive et mobile first le plus populaire du web">Bootstrap</a> ? Cela peut sembler une « évolution » de nos méthodes de travail Front-end, mais gare au loup et attention de ne pas tomber dans un travers que le W3C tente d&#39;enrayer au fur et à mesure des évolutions HTML et CSS.</p>

<p>Commençons par le commencement. Qu&#39;est-ce que <a href="http://getbootstrap.com/" title="Le framework de développement Front-end responsive et mobile first le plus populaire du web">Bootstrap</a> ? Comme pleins d&#39;autres « Librairie » ou « Framework » CSS dans la même veine, <a href="http://getbootstrap.com/" title="Le framework de développement Front-end responsive et mobile first le plus populaire du web">Bootstrap</a> est un outil permettant d&#39;augmenter la productivité des développeurs Front-end le maîtrisant, dans le but de fournir le plus rapidement possible un rendu visuel ergonomique et si possible responsive.</p>

<p>Mon problème ne vient pas tant de sa finalité qui est louable, mais belle et bien de la mise en œuvre technique qui permet d&#39;atteindre cette finalité. Pour être concis avant de développer : <a href="http://getbootstrap.com/" title="Le framework de développement Front-end responsive et mobile first le plus populaire du web">Bootstrap</a> est une régression pour un travail Front-end de qualité.</p>

<p>Je ne compte persuader personne, et à défaut de convaincre, je vais au moins vous expliquer mon point de vue.</p>

<h2 id="les-deux-approches-possibles-pour-de-l-int-gration-front-end">Les deux approches possibles pour de l&#39;intégration Front-end</h2>

<h3 id="l-approche-s-mantique-visuelle-ou-celle-du-w3c-http-www-w3-org-">L&#39;approche Sémantique/Visuelle (ou celle du <a href="http://www.w3.org/">W3C</a>)</h3>

<p>Cette approche considère que dans un fichier HTML, les balises doivent avoir du sens et être complétées (que ce soit par leurs genres, leurs noms, leurs ids ou leurs classes) de manière sémantique de façon à donner du sens au document.</p>

<blockquote>
<h4 id="exemple">Exemple</h4>
<p>Si j&#39;ai deux éléments qui se suivent : le premier pourrait porter l&#39;attribut <samp>class=&quot;main&quot;</samp> et le second l&#39;attribut <samp>class=&quot;aside&quot;</samp>.</p>
</blockquote>

<p><strong>L&#39;attribut <samp>class</samp> est donc dans cette approche une extension de l&#39;attribut <samp>id</samp> (mais en version multiple) et le HTML garde un unique rôle : le rôle sémantique.</strong></p>

<h3 id="l-approche-tout-en-un-ou-celle-de-bootstrap-amp-cie-">L&#39;approche « Tout en un » (ou celle de <a href="http://getbootstrap.com/" title="Le framework de développement Front-end responsive et mobile first le plus populaire du web">Bootstrap</a> &amp; cie)</h3>

<p>Cette approche considère que dans un fichier HTML, les balises doivent représenter un visuel et être complétées de manière à laisser transparaître rapidement le résultat visuel.</p>

<blockquote>
<h4 id="exemple">Exemple</h4>
<p>Si j&#39;ai deux éléments qui se suivent : le premier pourrait porter l&#39;attribut <samp>class=&quot;left&quot;</samp> et le second l&#39;attribut <samp>class=&quot;right&quot;</samp>.</p>
</blockquote>

<p><strong>L&#39;attribut <samp>class</samp> est donc dans cette approche une extension de l&#39;attribut <samp>style</samp> (mais une sorte de raccourci) où il n&#39;est pas nécessaire de lister les directives CSS en inline mais dans un fichier CSS séparé.</strong></p>

<h2 id="comparaison-de-code-des-deux-approches">Comparaison de code des deux approches</h2>

<p>Pour les plus curieux, voici techniquement la différence entres les codes :</p>

<h3 id="s-mantique-et-visuel-s-par-">Sémantique et visuel séparé</h3>

<p><strong>HTML :</strong></p>

<pre class="prettyprint linenums"><code class="lang-html">&lt;header&gt;
    &lt;h1&gt;Le titre&lt;/h1&gt;
    &lt;nav&gt;
        &lt;ul&gt;
            &lt;li&gt;menu&lt;/li&gt;
            &lt;li&gt;menu&lt;/li&gt;
            &lt;li&gt;menu&lt;/li&gt;
            &lt;li&gt;menu&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/nav&gt;
&lt;/header&gt;
&lt;section&gt;
    &lt;article&gt;
        &lt;p&gt;Le contenu&lt;br&gt;
        Le contenu&lt;br&gt;
        Le contenu&lt;/p&gt;
    &lt;/article&gt;
    &lt;aside&gt;Les à cotés&lt;/aside&gt;
&lt;/section&gt;
</code></pre>

<p><strong>CSS :</strong></p>

<pre class="prettyprint linenums"><code class="lang-css">/* Entrer le padding dans le calcul interne */
h1,
nav,
article,
aside {
    box-sizing: border-box;
}

/* Mettre le titre en gras */
h1 {
    font-weight: bold;   
}

/* Centrer les textes du menu */
nav {
    text-align: center;
}

/* Retrait du comportement de liste standard */
nav ul {
    padding-left: 0;
}
nav li {
    list-style-type: none;
}

/* À partir d&#39;une tablette */
@media (min-width: 768px) {

    /* Empêcher les écoulements de flottants */
    header:after,
    section:after {
        content: &quot;&quot;;
        display: block;
        clear: both;
    }

    /* Flotter à gauche en 50% */
    h1,
    aside {
        float: left;
        width: 50%;
    }

    /* Flotter à droite en 50% */
    h1,
    article {
        float: right;
        width: 50%;
    }

    /* Remettre les menus en alignement standard */
    nav {
        text-align: left;
    }

    /* Mettre le menu en ligne */
    nav li {
        display: inline-block;
    }

    /* Placer le titre à droite */
    h1 {
        text-align: right;
    }

}
</code></pre>

<p><strong>Rendu</strong></p>

<blockquote>
<div class="example-header">
    <div class="example-logo"><p>Le logo</p></div>
    <div class="example-menu">
        <ul>
            <li>menu</li>
            <li>menu</li>
            <li>menu</li>
            <li>menu</li>
        </ul><br>    </div>
</div>
<div class="example-content">
    <div class="example-main">
        <p>Le contenu<br>
        Le contenu<br>
        Le contenu</p>
    </div>
    <div class="example-aside"><p>Les à coté</p></div>
</div>

</blockquote>

<p><em>Note : vous pouvez rétrécir votre fenêtre sur périphérique desktop pour voir le résultat mobile.</em></p>

<h3 id="framework-css-comme-bootstrap">Framework CSS comme Bootstrap</h3>

<p><strong>HTML :</strong></p>

<pre class="prettyprint linenums"><code class="lang-html">&lt;header class=&quot;container&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
        &lt;h1 class=&quot;col-sm-6 col-sm-push-6 text-right-sm&quot;&gt;
            &lt;strong&gt;Le titre&lt;/strong&gt;
        &lt;/h1&gt;
        &lt;nav class=&quot;col-sm-6 col-sm-pull-6 text-center-xs text-left-sm&quot;&gt;
            &lt;div class=&quot;navbar-collapse collapse in&quot;&gt;
                &lt;ul class=&quot;nav navbar-nav&quot;&gt;
                    &lt;li&gt;Menu&lt;/li&gt;
                    &lt;li&gt;Menu&lt;/li&gt;
                    &lt;li&gt;Menu&lt;/li&gt;
                    &lt;li&gt;Menu&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
        &lt;/nav&gt;
    &lt;/div&gt;
&lt;/header&gt;

&lt;section class=&quot;container&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
        &lt;article class=&quot;col-sm-6 col-sm-push-6&quot;&gt;
            &lt;p&gt;Le contenu&lt;br&gt;
               Le contenu&lt;br&gt;
               Le contenu&lt;/p&gt;
        &lt;/article&gt;
        &lt;aside class=&quot;col-sm-6 col-sm-pull-6&quot;&gt;Les à coté&lt;/aside&gt;
    &lt;/div&gt;
&lt;/section&gt;
</code></pre>

<p><strong>CSS :</strong></p>

<pre class="prettyprint linenums"><code class="lang-html">&lt;!-- État de boite noire, ça marche tel que la doc l&#39;explique --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css&quot;&gt;
</code></pre>

<pre class="prettyprint linenums"><code class="lang-css">/* Parce que Bootstrap ne réalise pas tout ce que 
l&#39;on souhaite faire, on surcharge ensuite avec sa 
propre CSS en essayant de conserver 
la philosophie Bootstrap (pas simple) */

/* Comportement par défaut */,

.text-center-sm,
.text-center-md,
.text-center-lg,
.text-right-sm,
.text-right-md,
.text-right-lg { 
    text-align: inherit; 
}

/* Style par défaut */
.text-center-xs { 
    text-align: center; 
}
.text-right-xs { 
    text-align: right;
}

/* Style pour tablette */
@media (min-width: 768px) {
    .text-center-sm, 
    .text-center-xs { 
        text-align: center; 
    }
    .text-right-sm, 
    .text-right-xs { 
        text-align: right; 
    }
}

/* Style pour desktop */
@media (min-width: 992px) {
    .text-center-md, 
    .text-center-sm, 
    .text-center-xs { 
        text-align: center; 
    }
    .text-right-md, 
    .text-right-sm, 
    .text-right-xs { 
        text-align: right;
    }
}

/* Style pour grand desktop */
@media (min-width: 1200px) {
    .text-center-lg, 
    .text-center-md, 
    .text-center-sm, 
    .text-center-xs {
        text-align: center;
    }
    .text-right-lg, 
    .text-right-md, 
    .text-right-sm, 
    .text-right-xs {
        text-align: right;
    }
}
</code></pre>

<p><em>Note : une autre approche est de dupliquer un objet que <a href="http://getbootstrap.com/" title="Le framework de développement Front-end responsive et mobile first le plus populaire du web">Bootstrap</a> ne saurait pas facilement afficher dans des états différents en fonction de la taille du périphérique afin de n&#39;en afficher qu&#39;un des deux à la fois. Ce qui créé du contenu dupliqué.</em></p>

<p><strong>Rendu</strong></p>

<blockquote>
<div class="example-header">
    <div class="example-logo"><p>Le logo</p></div>
    <div class="example-menu"><p>menu menu menu menu</p></div>
</div>
<div class="example-content">
    <div class="example-main">
        <p>Le contenu<br>
        Le contenu<br>
        Le contenu</p>
    </div>
    <div class="example-aside"><p>Les à coté</p></div>
</div>

</blockquote>

<p><em>Note : vous pouvez rétrécir votre fenêtre sur périphérique desktop pour voir le résultat mobile.</em></p>

<h2 id="pourquoi-l-approche-s-mantique-est-la-meilleure-selon-moi-">Pourquoi l&#39;approche sémantique est la meilleure (selon moi)</h2>

<h3 id="la-raison-historique-de-la-s-paration-du-fond-et-de-la-forme">La raison historique ; de la séparation du fond et de la forme</h3>

<p>Le W3C améliore les normes de structures HTML dans un but de séparation de la structure et du rendu. Voyons ça plus en détail :</p>

<h4 id="d-abord-html">D&#39;abord HTML</h4>

<p>Le HTML dans ses débuts embarquait des balises permettant de créer du fond (ou de structurer) tel que <samp>&lt;div&gt;</samp>, <samp>&lt;span&gt;</samp>, <samp>&lt;table&gt;</samp>, etc. et des balises permettant de créer de la forme (ou du rendu) tel que <samp>&lt;font&gt;</samp>, <samp>&lt;i&gt;</samp>, <samp>&lt;b&gt;</samp>, <samp>&lt;center&gt;</samp>, etc. Les deux étaient mélangés et c&#39;est bien dans le fichier HTML, au travers de sa structure que l&#39;on décidait qu&#39;un texte devrait être rouge, centré et avoir une taille de 20 pixel.</p>

<h4 id="puis-le-xhtml">Puis le xHTML</h4>

<p>Une évolution logique a donc été de supprimer (ou déprécier) les balises porteuses d&#39;un rendu visuel et de leur préférer un sens sémantique (tout en accordant une grande importance au CSS pour l&#39;habillage). Ainsi un texte centré ou rouge se créé via une feuille CSS et on ne considère plus un texte important comme <samp>&lt;b&gt;</samp> (bold) mais plutôt ayant un sens <samp>&lt;strong&gt;</samp> (fort). C&#39;est au développeur de choisir si finalement <samp>&lt;strong&gt;</samp> n&#39;a pas plutôt un rendu italique et souligné via CSS.</p>

<p>Il y a donc une volonté du Web de séparer la structure et le rendu. Ce que je trouve assez logique.</p>

<h4 id="on-continue-avec-le-html5">On continue avec le HTML5</h4>

<p>Toujours dans ce soucis de structure sémantique, les balises en elles-mêmes se voit rajoutée du sens et c&#39;est pour cela que <samp>&lt;header&gt;</samp>, <samp>&lt;footer&gt;</samp>, <samp>&lt;section&gt;</samp>, <samp>&lt;article&gt;</samp>, <samp>&lt;aside&gt;</samp>, <samp>&lt;figure&gt;</samp>... font leur apparition.</p>

<p>Cela signifie que l&#39;approche de <a href="http://getbootstrap.com/" title="Le framework de développement Front-end responsive et mobile first le plus populaire du web">Bootstrap</a> prend le contre-pied de cette idée de séparation et instaure selon moi une approche plus liée qui n&#39;est pas en accord avec la philosophie que je partage avec le W3C.</p>

<h2 id="les-raisons-techniques">Les raisons techniques</h2>

<h3 id="la-taille-du-fichier-html-g-n-r-">La taille du fichier HTML généré</h3>

<p>Ajouter des classes à outrance pour habiller visuellement sa structure HTML surcharge anormalement le DOM d&#39;au moins trois manières :</p>

<ul>
<li>Obligation d&#39;imbriquer des éléments pour qu&#39;ils fonctionnent tels que <a href="http://getbootstrap.com/" title="Le framework de développement Front-end responsive et mobile first le plus populaire du web">Bootstrap</a> l&#39;a prévu.</li>
<li>Multiplication du nombre de classes dans l&#39;attribut <samp>class</samp>.</li>
<li>Duplication de contenu pour afficher/masquer simplement en fonction de la taille du périphérique.</li>
</ul>

<p>Cela défère le poids de la CSS vers le HTML. Or, autant les fichiers CSS peuvent être mis en cache, autant la structure HTML peut difficilement l&#39;être étant donné sa nature changeante en fonction du contrôleur qui la génère.</p>

<h3 id="la-surcharge-css">La surcharge CSS</h3>

<p><a href="http://getbootstrap.com/" title="Le framework de développement Front-end responsive et mobile first le plus populaire du web">Bootstrap</a> n&#39;est pas négligeable en taille. Cela impose un pré-chargement plus lourds au premier chargement de page (en supposant qu&#39;ensuite le fichier soit mis en cache). De manière assez amusante, plus Bootstrap &quot;supporte&quot; des périphériques petits avec de faibles débits à l&#39;utilisation (ajout de fichiers CSS et JS), plus il est lourd en poids...</p>

<h3 id="la-ma-trise-de-l-outil">La maîtrise de l&#39;outil</h3>

<p>L&#39;avantage offert par <a href="http://getbootstrap.com/" title="Le framework de développement Front-end responsive et mobile first le plus populaire du web">Bootstrap</a> est perdu dès l&#39;instant ou l&#39;outil est utilisé par des personnes ne le connaissant pas (rapidité d&#39;intégration). Pire encore, cela expose l&#39;intégration par de multiples personnes à mélanger l&#39;approche <a href="http://getbootstrap.com/" title="Le framework de développement Front-end responsive et mobile first le plus populaire du web">Bootstrap</a> à une approche sémantique.</p>

<h3 id="maintenance-de-code-et-changement-de-design">Maintenance de code et changement de design</h3>

<p>La structure étant intimement liée au Framework <a href="http://getbootstrap.com/" title="Le framework de développement Front-end responsive et mobile first le plus populaire du web">Bootstrap</a> et au visuel soumis, le code HTML est bon à revoir dans son architecture pour un changement de design. La structure étant liée aux contrôleurs, car créée par eux, c&#39;est le Back-end qui se retrouve impacté par un changement de design là ou seulement les CSS et les JS auraient du bouger (sans que le Back soit touché par du changement de design).</p>

<h3 id="ne-pas-rendre-service-au-front-end-apprenant">Ne pas rendre service au Front-end apprenant</h3>

<p>L&#39;approche « tout en un » masque le plus important : les mécanismes de fonctionnement des classes en elles-mêmes. Pourquoi -pour réaliser telles actions- elles utilisent ces attributs précisément ? Si cet état de boîte noire peut s&#39;avérer intéressant pour des débutants et un gain de temps pour les experts : cela maintient l&#39;écart entre les deux. Et, les seuls apprenant réellement à utiliser les nouveautés du CSS en comprenant les mécanismes sous-jacent sont ceux qui maintiennent <a href="http://getbootstrap.com/" title="Le framework de développement Front-end responsive et mobile first le plus populaire du web">Bootstrap</a> (ou équivalent) ou ceux qui ne l&#39;utilisent pas.</p>

<h3 id="un-probl-me-de-seo-ou-de-performance-">Un problème de SEO ou de performance ?</h3>

<p>Dupliquer du contenu de manière identique dans le DOM dans le seul but de l&#39;afficher à deux endroits différents de la grille <a href="http://getbootstrap.com/" title="Le framework de développement Front-end responsive et mobile first le plus populaire du web">Bootstrap</a> créer du contenu dupliqué au sein d&#39;une même page. Bien entendu, on peut éviter cela en laissant dans le DOM source le code destiné au mobile et en dupliquant en JavaScript celui-ci pour l&#39;afficher sur desktop en sacrifiant un peu de ressource JavaScript et en masquant tant bien que mal le phénomène de <a href="http://fr.wikipedia.org/wiki/FOUC">FOUC</a>.</p>

<h2 id="pourquoi-utiliser-bootstrap-alors-">Pourquoi utiliser Bootstrap alors ?</h2>

<h3 id="-utiliser-pour-">À utiliser pour :</h3>

<ul>
<li>Développer des « Proof of Concept » ou remplacer la création PSD par une création temps réel de façon rapide.</li>
<li>Faire des sites à la pelle et avec de très petits budgets où le résultat en performance et en qualité reste un problème, mais où l&#39;argent fournit pour la réalisation manque.</li>
<li>Habiller un Back-office personnalisé (ou une application web) qui n&#39;a pas fait l&#39;objet d&#39;une créa et que l&#39;on espère « user friendly » rapidement et simplement (une création purement fonctionnelle sans problèmes de performances à grande échelle ou de soucis de SEO).</li>
</ul>

<h3 id="-ne-pas-utiliser-pour-">À ne pas utiliser pour :</h3>

<ul>
<li>Des petits sites, car cela augmente bien souvent de 90% le poids du site, il vaut donc mieux ne pas le faire et perdre un peu de temps pour un gain en performance maintenance et sémantique.</li>
<li>De grosses structures, car cela leurs font perdre la flexibilité du changement d&#39;UI sans impacter le Back-end, impose la formation de toutes les ressources Front-end travaillant sur le projet à Bootstrap et il résulte de la construction même des pages un impact SEO non négligeable due au poids du HTML, sa sémantique limitée et plus globalement au temps de chargement des pages.</li>
</ul>

<blockquote>
<h4 id="semantic-ui">Semantic UI</h4>
<p><strong><samp>Bonne idée :</samp></strong> Pour ma part, quitte à devoir être HTML-driven et non pas Stylesheet-driven pour l&#39;habillage CSS, autant utiliser des Framework tel que Semantic UI qui au moins garde la philosophie du composant qui explique ce qu&#39;il fait et non ce à quoi il ressemble.</p>
<blockquote>
<p><a href="http://semantic-ui.com/">Voir le projet Semantic UI</a></p>
</blockquote>
</blockquote>

<h2 id="m-langer-les-deux-approches-pour-en-garder-les-avantages-">Mélanger les deux approches pour en garder les avantages ?</h2>

<p>Si l&#39;on extrait les problèmes majeurs en considérant que nos ressources seront formées à utiliser <a href="http://getbootstrap.com/" title="Le framework de développement Front-end responsive et mobile first le plus populaire du web">Bootstrap</a> nous nous retrouvons avec les deux points suivants.</p>

<h3 id="la-lourdeur-de-la-librairie">La lourdeur de la librairie</h3>

<p>Que ce soit pour <a href="http://getbootstrap.com/" title="Le framework de développement Front-end responsive et mobile first le plus populaire du web">Bootstrap</a> ou pour une autre librairie, le premier chargement sera laborieux (avant que le fichier n&#39;ai été téléchargé une fois et mis en cache). On peut palier à ce problème en utilisant une version du script hébergé sur des serveurs comme c&#39;est le cas pour jQuery par exemple. Ainsi pour Bootstrap, on peut se faire servir par <a href="http://www.bootstrapcdn.com/" title="CDN for Bootstrap">http://www.bootstrapcdn.com/</a>. L&#39;avantage est que tous les sites utilisant le chargement par CDN Bootsrap participe à mettre en cache pour vous le fichier. Cela signifie que ce n&#39;est plus nécessairement votre première page ouverte qui ralentira le chargement du visiteur mais peut-être celle d&#39;un autre site.</p>

<h3 id="remettre-les-classes-tout-en-un-de-nouveau-dans-la-css">Remettre les classes « tout en un » de nouveau dans la CSS</h3>

<p>Finalement, ce qu&#39;il nous faudrait pour résoudre notre soucis et remettre la sémantique à l&#39;ordre du jour, c&#39;est d&#39;adresser dans la feuille CSS (et non dans la page HTML elle-même) notre suite de classe. Si nous pouvions par exemple transformer ceci :</p>

<pre class="prettyprint linenums"><code class="lang-html">&lt;div class=&quot;clr&quot;&gt;
    &lt;div class=&quot;left hidden boxsizing w50&quot;&gt;
        Le logo
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>en ceci</p>

<pre class="prettyprint linenums"><code class="lang-html">&lt;div class=&quot;header&quot;&gt;
    &lt;div class=&quot;logo&quot;&gt;
        Le logo
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<pre class="prettyprint linenums"><code class="lang-css">/* Fichier complet type Bootstrap */

.header {
    .clr;
}
.logo {
    .left; 
    .hidden; 
    .boxsizing; 
    .w50;
}
</code></pre>

<p>le tour serait joué.</p>

<p>C&#39;est exactement ce que permettent des approches comme <a href="http://sass-lang.com/" title="Sass - Syntactically Awesome Stylesheets">SASS</a> ou <a href="http://lesscss.org/" title="LESS &laquo; The Dynamic Stylesheet language">LESS</a>. Elles permettent d&#39;écrire de manière intuitive et non redondante des suites de sélecteurs CSS pour au final générer le fichier CSS qui va bien. Vous pouvez lire l&#39;article « <a href="http://blog.lesieur.name/utilisation-optimisee-de-framework-css-comme-bootstrap-avec-less/">Utilisation optimisée de Framework CSS comme Bootstrap avec Less</a> » pour comprendre comment cela fonctionne et de cette manière vous pourrez remplir vos classes HTML de manière sémantique tout en conservant vos habitudes d&#39;intégration avec <a href="http://getbootstrap.com/" title="Le framework de développement Front-end responsive et mobile first le plus populaire du web">Bootstrap</a> par exemple.</p>

<h2 id="mon-retour-rapide-sur-l-utilisation-bootstrap">Mon retour rapide sur l&#39;utilisation Bootstrap</h2>

<p>Je trouve que les types de sites réalisés avec Bootstrap se ressemble tous et qu&#39;il devient difficile de faire quelque chose s&#39;en éloignant sans finalement perdre du temps. <a href="http://getbootstrap.com/" title="Le framework de développement Front-end responsive et mobile first le plus populaire du web">Bootstrap</a> devient ici plus contraignant pour la patte créative également et on en vient parfois même à blâmer les agences de création digital car leurs créations ne sont pas « compliant » Bootstrap.</p>

<p>Pour exemple voici des variations de design pour un HTML identique en CSS-driven :</p>

<p><em><a href="http://www.nicolas-hoffmann.net/">Site de Nicolas Hoffmann</a></em></p>

<ul>
<li><a href="http://www.nicolas-hoffmann.net/source/changer_skin.php?theme=ND_mobfirst">ND Mobi First</a></li>
<li><a href="http://www.nicolas-hoffmann.net/source/changer_skin.php?theme=ND_new_green">ND New Green</a></li>
<li><a href="http://www.nicolas-hoffmann.net/source/changer_skin.php?theme=ND">ND</a></li>
<li><a href="http://www.nicolas-hoffmann.net/source/changer_skin.php?theme=firefox">Firefox</a></li>
</ul>

<p>et la même chose pour un HTML identique avec Bootstrap</p>

<p><em><a href="https://github.com/terryweiss/docstrap">Template pour documentation JSDoc</a></em></p>

<ul>
<li><a href="http://terryweiss.github.io/docstrap/themes/amelia/">Amelia</a></li>
<li><a href="http://terryweiss.github.io/docstrap/themes/cyborg/">Cyborg</a></li>
<li><a href="http://terryweiss.github.io/docstrap/themes/readable/">Readable</a></li>
<li><a href="http://terryweiss.github.io/docstrap/themes/superhero/">DocStrap</a></li>
</ul>

<p>CQFD.</p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="http://blog.lesieur.name/bootstrap-est-une-regression-pour-un-developpement-front-end-de-qualite/">Source originale</a> |
    <a href="/david/stream/2019/">Accueil du flux</a>
  </p>
</nav>

<footer>
  <div>
    <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
    <p>
      Bonjour/Hi!
      Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
      Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
    </p>
    <p>
      Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
    </p>
    
    <p>
      Voici quelques articles choisis :
      <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
      <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
      <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
      <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
      <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
      <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
      <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
      <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
      <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
      <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
      <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
      <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
      <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
      <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
      <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
      et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
    </p>
    <p>
      On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.
    </p>
    <p>
      Je ne traque pas ta navigation mais mon
      <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
      conserve des logs d’accès.
    </p>
  </div>
</footer>
<script type="text/javascript">
  ;(_ => {
    const jumper = document.getElementById('jumper')
    jumper.addEventListener('click', e => {
      e.preventDefault()
      const anchor = e.target.getAttribute('href')
      const targetEl = document.getElementById(anchor.substring(1))
      targetEl.scrollIntoView({behavior: 'smooth'})
    })
  })()
</script>