Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Architecture CSS avec ITCSS et InuitCSS

Kévin Bizien
March 01, 2018

Architecture CSS avec ITCSS et InuitCSS

Kévin Bizien

March 01, 2018
Tweet

More Decks by Kévin Bizien

Other Decks in Design

Transcript

  1. @cssflip #5 @kbizien #cssflip • Variables • Mixins • Nested

    rules • … Maintenance css basique, manque de classes helpers et d’un système de grille complet
  2. @cssflip #5 @kbizien #cssflip • Grid • Helpers/Utilities • UI

    Components • … Framework complet avec une dépendance niveau UI. Pratique pour des poc/protos
  3. @cssflip #5 @kbizien #cssflip Défauts du CSS • Cascade et

    héritage • Dépendance sur l’ordre d’inclusion dans le code • Global namespace • Spécificité Défauts des développeurs • Manque de documentation dans nos projets • Manque de structuration du code • Manque de rigueur dans les conventions collectives
  4. @cssflip #5 @kbizien #cssflip .block {} .block__element {} .block--modifier {}

    .block__element--modifier {} • .avatar représente le block • .avatar__img représente un élément du block • .avatar__img--rounded représente un modifier de l'élément
  5. @cssflip #5 @kbizien #cssflip Séparer la structure de l’esthétique —>

    classes réutilisables .button { width: 150px; height: 50px; } .button—-small { width: 100px; height: 25px; } .button—-primary { background: #FFF; border-radius: 5px; }
  6. @cssflip #5 @kbizien #cssflip <div class="grid"> <div class="grid__item lap--one-half desk--two-thirds">

    ... </div><!-- --><div class="grid__item lap--one-half desk--one-third"> ... </div> </div>
  7. @cssflip #5 @kbizien #cssflip Architecture / État d’esprit Utile peu

    importe votre stack de développement Pas de dépendance à un pré/post-procésseur
  8. @cssflip #5 @kbizien #cssflip + BEMIT • .c-avatar • .c-avatar__img

    • .c-avatar__img—rounded • .o-block__element--modifier pour les objets • .c-block__element--modifier pour les composants • .u-block__element--modifier pour les utilitaires • .js-[name] pour les hooks javascript (pas de styles) =
  9. @cssflip #5 @kbizien #cssflip • Mixin responsive avec Sass-mq •

    Mixin pour la gestion des font-size et line-height • Bonne pratique de styles génériques • box-sizing • normalize • reset • Objet media • Objet layout (grille) • Utilities margin / padding / width • Extensible selon les besoins en créant sa propre bibliothèque de settings, tools, objects, components et utilities. Ensemble de config, mixins, resets, objets et classes utilitaires
  10. @cssflip #5 @kbizien #cssflip Suivi d’InuitCSS • Création d’un compte

    et repo GitHub dédié • https://github.com/inuitcss • Team “core” de 5 personnes • 15 contributeurs à ce jour • Première release hors bêta (v6.0.0) commit ce lundi ! • Évolution de la base de code en un seul module npm à installer • Maintien de l’inclusion flexible des styles nécessaires pour son projet • Existance d’un slack pour la communauté • https://herzinger.typeform.com/to/h6e3Km
  11. @cssflip #5 @kbizien #cssflip Bibliographie Sass —> https://sass-lang.com/ compass —>

    http://compass-style.org/ Bootstrap —> https://getbootstrap.com/ Foundation —> https://foundation.zurb.com/ BEM —> Yandex https://tech.yandex.com/bem/ OOCSS —> Nicole Sullivan http://oocss.org/ SMACSS —> Jonathan Snook https://smacss.com/ csswizardry-grids, ITCSS, BEMIT, InuitCSS —> Harry Roberts https://csswizardry.com/