Desarrollo de arquitecturas CSS basadas en ITCSS

Desarrollo de arquitecturas CSS basadas en ITCSS

Aprenderemos una metodología que utiliza una jerarquía basada en capas que nos va a permitir un desarrollo ágil, óptimo y controlado. Esta metodología, en definitiva, nos va a permitir desarrollar nuestra arquitectura de una manera muy sana, ya que vamos a obtener una estructura súper organizada, una reducción de las redundancias de los selectores y conseguiremos convertirnos en todos unos maestros en el dominio de la especificidad de nuestros elementos.

Charla dada en: Meetup Murcia Frontend (26/10/2017).

Repositorio en GitHub con la presentación y los ejemplos.

Enlaces que contiene la presentación:

Frameworks:
InuitCSS (Harry Roberts)
HaitiCSS

Referencias:
Specificity calculator
CSS Stats
Specificity graph
CSS Wizardry (Harry Roberts)
Daniel Fornells
CSS Performance test by @benfrain

C6eef2f316659472539e666f4da9d539?s=128

Juan Carlos Ruiz

October 26, 2017
Tweet

Transcript

  1. Desarrollo de arquitecturas en CSS basadas en ITCSS Juan Carlos

    Ruiz Carrión
  2. Juan Carlos Ruiz Carrión UI / Front-end developer @klaufel Klaufel#2373

    @klaufel Party hard: Dev:
  3. Fer Edu Juan Carlos

  4. Conociendo ITCSS

  5. Harry Roberts @csswizardry Conociendo ITCSS

  6. ¿Qué es ITCSS? Conociendo ITCSS

  7. Inverted Triangle architecture for CSS (Arquitectura de triángulo invertido) Conociendo

    ITCSS
  8. ¿Qué es ITCSS? - Una propuesta de arquitectura CSS -

    Estructura para organizar las hojas de estilo - Arquitectura basada en la especificidad Conociendo ITCSS
  9. ¿Qué es ITCSS? “ITCSS nos va ayudar a escribir un

    CSS mucho más sano, flexible, reutilizable, comprensible y manejable.” Conociendo ITCSS
  10. ¿Qué es ITCSS? Conociendo ITCSS Utilities Componets Elements Generic Tools

    Objects ITCSS Settings
  11. ¿Qué es ITCSS? Conociendo ITCSS Utilities Componets Elements Generic Tools

    Objects ITCSS Settings Magnitud Alcance e impacto en los elementos
  12. ¿Qué es ITCSS? Conociendo ITCSS Utilities Componets Elements Generic Tools

    Objects ITCSS Settings Magnitud Alcance e impacto en los elementos Especificidad Importancia del selector y sus propiedades
  13. ¿Qué es ITCSS? Conociendo ITCSS Utilities Componets Elements Generic Tools

    Objects ITCSS Settings Magnitud Alcance e impacto en los elementos Especificidad Importancia del selector y sus propiedades Claridad Menor abstración en la semántica e impacto del selector
  14. ¿Qué es ITCSS? Conociendo ITCSS Utilities Componets Elements Generic Tools

    Objects ITCSS Settings Magnitud Alcance e impacto en los elementos Especificidad Importancia del selector y sus propiedades Claridad Menor abstración en la semántica e impacto del selector CSS output
  15. Especificidad CSS

  16. Especificidad CSS ¿Cómo decide el navegador qué estilos debe aplicar

    a un determinado elemento de la página? La especificidad de los selectores CSS
  17. 0 | 0 | 0 | 1 element { }

    ::pseudo-element { } Especificidad CSS
  18. 0 | 0 | 1 | 0 .class { }

    [attribute] { } :pseudo-class { } Especificidad CSS
  19. 0 | 1 | 0 | 0 #identifier { }

    Especificidad CSS
  20. 1 | 0 | 0 | 0 property: value !important;

    style="property: value;" Especificidad CSS
  21. 0 | 0 | 0 | 0 > + *

    ~ @media Especificidad CSS
  22. Especificidad CSS Calculando la especificidad 0010 < 00012

  23. Especificidad CSS Calculando la especificidad 0010 < 00012 0 |

    0 | 1 | 0 > 0 | 0 | 0 | 12 Calculadora de especificidad: https://specificity.keegan.st/
  24. Especificidad CSS Selectores anidados ¡No podemos predecir el futuro! .section

    article .header h1 { } .navigation .dropdown ul li { } .form form .form-group input { }
  25. Especificidad CSS Selectores anidados Intenta evitarlos siempre que sea posible

    :)
  26. Especificidad CSS Gráfico de especificidad Localización en la hoja de

    estilos Especificidad
  27. Especificidad CSS Gráfico de especificidad Localización en la hoja de

    estilos Especificidad Selectores anidados ?!!
  28. Especificidad CSS Gráfico de especificidad Localización en la hoja de

    estilos Especificidad Selectores anidados ?!! ID ?!!
  29. Especificidad CSS Gráfico de especificidad Localización en la hoja de

    estilos Especificidad Selectores anidados ?!! ID ?!! !important ?!!
  30. Especificidad CSS Gráfico de especificidad ITCSS Localización en la hoja

    de estilos Especificidad
  31. Capas del triángulo invertido

  32. 01 - Settings Capas del triángulo invertido - Configuración de

    la arquitectura - Variables globales - Definición de fuentes, colores, … - Breakpoints (no genera CSS)
  33. 02 - Tools - Funciones globales Conversión unidades, … -

    Mixins globales Media Queries Font sizes, transitions, … Capas del triángulo invertido (no genera CSS)
  34. - Normalización de estilos para navegadores (Normalize) - Modelo de

    caja (box-sizing) - Espaciado de elementos genéricos Capas del triángulo invertido 03 - Generic
  35. - Apariencia de los elementos HTML (headings, listas, enlaces, …)

    Capas del triángulo invertido 04 - Elements
  36. - Patrones repetitivos, simples y reusables - Heredables por los

    componentes - Propiedades asociadas a la distribución (contenedor, retícula, secciones) Capas del triángulo invertido 05 - Objets
  37. Capas del triángulo invertido - Componentes visuales reusables - Semántica

    asociada a su apariencia, no a su función ni contenido - Generalmente, es la capa que más CSS va a generar 06 - Components
  38. - Clases de ayuda diseñadas para las excepciones - Sobrescribe

    los atributos de las capas superiores (espaciado, color alternativo, modificaciones dependiendo del viewport, …) Capas del triángulo invertido !important no es una opción 07 - Utilities
  39. Niveles de especificidad en las capas Generic Objects Components Utilities

    Settings & Tools Elements 0|0|0|1 0|0|0|2 0|0|0|3 0|0|1|0 0|0|2|0 0|0|3|0 0|1|0|0 1|0|0|0 Capas del triángulo invertido
  40. Capas del triángulo invertido Localización en la hoja de estilos

    Especificidad Gráfico de especificidad Amazon España https://www.amazon.es/
  41. Capas del triángulo invertido Localización en la hoja de estilos

    Especificidad Gráfico de especificidad con ITCSS Zinkcare https://www.zinkcare.com/
  42. Capas del triángulo invertido

  43. Nomenclatura ITCSS+BEM

  44. BEM Block Element Modifier .block { } .block__element { }

    .block--modifier { } Nomenclatura ITCSS+BEM
  45. ITCSS + BEM BEMIT Nomenclatura ITCSS+BEM

  46. .c-block { } .c-block__element { } .c-block--modifier { } Nomenclatura

    ITCSS+BEM BEMIT namespaces Se añadirá como prefijo la inicial del nombre de la capa
  47. BEMIT namespaces $s-var: true ! default; @function t-rem($_rem__unit) { }

    @mixin t-mq($_mq__name) { } Los namespaces también se extienden a variables, functions y mixins Nomenclatura ITCSS+BEM
  48. BEMIT namespaces $c-header__width: 100% !default; $c-header__spacing: $s-global__spacing !default; .c-header {

    width: $c-header__width; padding: 0 $c-header__spacing; } Nomenclatura ITCSS+BEM
  49. BEMIT sufijos .o-layout\@sm { } class="o-layout@sm" .u-1/4\@sm { } class="u-1/4@sm"

    .u-hidden\@print { } class="u-hidden@print" Se utiliza para definir un estilo dependiendo del viewport @[breakpoint] Nomenclatura ITCSS+BEM
  50. Clases de estado .is-[name] .has-[name] Se utilizarán en caso de

    que un componente cambie su estado Nomenclatura ITCSS+BEM
  51. Maquetación con BEMIT <section class="o-section o-section--tiny"> <article class="c-post"> <header class="c-post__header">

    <h1 class="c-post__title">Minions ipsum tank yuuu!</h1> </header> <p>Do <span class="u-hidden@sm">potatoooo</span> bappleees</p> <a class="c-post__button c-button">Bananaaaa!</a> </article> </section> Nomenclatura ITCSS+BEM
  52. Nomenclatura ITCSS+BEM “Utilizar una metodología para nombrar las clases va

    a hacer que nuestro código sea mucho más fácil de leer y nos va a ayudar a trabajar de una manera mas eficiente.” Metodología de nomenclatura
  53. Nomenclatura ITCSS+BEM Tus compañeros de equipo lo agradecerán Metodología de

    nomenclatura
  54. ¿Por dónde empezar?

  55. ¿Por dónde empezar? Estructuración ITCSS de las hojas de estilo

  56. ¿Por dónde empezar? Estructuración ITCSS src/ ├── 01_settings/ │ ├──

    settings.scss │ ├── 01_settings__config.scss │ ├── 02_settings__variables.scss │ ├── 03_settings__breakpoints.scss │ ├── 04_settings__colors.scss │ └── 05_settings__fonts.scss │ ├── 02_tools/ │ ├── tools.scss │ ├── 01_tools__mixins.scss │ └── 02_tools__media-queries.scss │ ├── 03_generic/ │ ├── generic.scss │ ├── 01_generic__normalize.scss │ ├── 02_generic__box-sizing.scss │ ├── 03_generic__global.scss │ └── 04_generic__print.scss │ ├── 04_elements/ │ ├── elements.scss │ ├── 01_elements__headings.scss │ ├── 02_elements__paragraphs.scss │ ├── 03_elements__anchors.scss │ └── 04_elements__images.scss │ │ ├── 05_objects/ │ ├── objects.scss │ ├── 01_objects__container.scss │ ├── 02_objects__grid.scss │ ├── 03_objects__section.scss │ └── 04_objects__table.scss │ ├── 06_components/ │ ├── components.scss │ ├── 01_components__button.scss │ ├── 02_components__input.scss │ └── structure/ │ ├── 01_components__header.scss │ └── 02_components__footer.scss │ ├── 07_utilities/ │ ├── utilities.scss │ ├── 01_utilities__widths.scss │ ├── 02_utilities__colors.scss │ ├── 03_utilities__trumps.scss │ └── 02_utilities__debug.scss │ └── style.scss
  57. ¿Por dónde empezar? Estructuración ITCSS // Settings @import "01_settings/settings"; //

    Tools @import "02_tools/tools"; // Generic @import "03_generic/generic"; // Elements @import "04_elements/elements"; // Objects @import "05_objects/objects"; // Components @import "06_components/components"; // Utilities @import "07_utilities/utilities";
  58. ¿Por dónde empezar? https://github.com/inuitcss/inuitcss Harry Roberts

  59. ¿Por dónde empezar? https://github.com/haiticss/haiticss (Daniel Fornells) HaitiCSS https://github.com/iotacss/iotacss (Dimitris Psaropoulos)

    iotaCSS
  60. ¿Por dónde empezar? Refactorizando que es gerundio

  61. ¿Por dónde empezar? @import "01_settings/settings"; @import "02_tools/tools"; .s-refactor { @import

    "03_generic/generic"; @import "04_elements/elements"; @import "05_objects/objects"; @import "06_components/components"; @import "07_utilities/utilities"; } Refactoriación Adopción gradual de nuestra arquitectura
  62. ¿Por dónde empezar? Refactoriación Adopción gradual de nuestra arquitectura <section

    class="container"> <ul id="listadoDeProductos"> <li class="list-item"> <img class="img_max_width" src="" /> <a style="text-decoration: none !important;" href="">Bananaaaa!</a> </li> </ul> </section>
  63. ¿Por dónde empezar? Refactoriación Adopción gradual de nuestra arquitectura <section

    class="container"> <div class="s-refactor"> <ul class="c-product-list"> <li class="c-product-list__item"> <img class="c-product-list__image u-block@md" src="" /> <a class="c-product-list__link" href="">Bananaaaa!</a> </li> </ul> </div> <!— / ITCSS Refactor —> </section>
  64. Agradecimientos Daniel Fornells @danifornells https://github.com/haiticss/haiticss HaitiCSS

  65. Referencias https://specificity.keegan.st/ Specificity calculator http://cssstats.com/ CSS Stats https://jonassebastianohlsson.com/specificity-graph/ Specificity graph

    https://csswizardry.com/ CSS Wizardry (Harry Roberts) https://github.com/benfrain/css-performance-tests CSS Performance test by @benfrain
  66. ¡Muchas gracias!

  67. Frontendly greetings!!!