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

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!!!